vue 优点:
灵活, 易用, 高效; 用于构建用户界面的渐进式框架, 自底向上逐层应用; Vue 的核心库只关注图层, 不仅易于上手, 还便于与第三方库或既有项目整合. 当与现代化的工具链以及各种支持类库结合使用时, Vue 也完全能够为复杂的单页应用提供驱动. vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 数据和 DOM 被建立了关联, 所有东西都是响应式的. Vue 也提供一个强大的过渡效果系统, 可以在 Vue 插入 / 更新 / 移除元素时自动应用过渡效果.
一. 文本插值
- 1.{{}}
- {{ message }}
- var app = new Vue({
- el: '#app',
- data: {
- message: 'Hello Vue!'
- }
- })
结果: Hello Vue!
2.v-html 指令
<script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script>
结果: Hello Vue!
3.v-bind 指令
鼠标悬停几秒钟查看此处动态绑定的提示信息!
- var app2 = new Vue({
- el: '#app-2',
- data: {
- message: '页面加载于' + new Date().toLocaleString()
- }
- })
结果: 鼠标悬停几秒钟查看此处动态绑定的提示信息!
二. 条件与循环
1.v-if v-else v-else-if 条件指令
现在你看到我了
- var app3 = new Vue({
- el: '#app-3',
- data: {
- seen: true
- }
- })
结果: 现在你看到我了; 继续在控制台输入 app3.seen = false, 你会发现之前显示的消息消失了.
2.v-for 循环指令
例 1:
- dos">{{ todo.text }}
- var app4 = new Vue({
- el: '#app-4',
- data: {
- todos: [
- { text: '学习 JavaScript' },
- { text: '学习 Vue' },
- { text: '整个牛项目' }
- ]
- }
- })
结果: 学习 JavaScript
学习 Vue
整个牛项目
在控制台里, 输入 app4.todos.push({ text: '新项目' }), 你会发现列表最后添加了一个新项目.
例 2:
- {{ index }}. {{ key }} : {{ value }}
- <script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'https://www.runoob.com', slogan: '学的不仅是技术, 更是梦想!' } } }) </script>
结果:
0. name : 菜鸟教程 1. url : https://www.runoob.com 2. slogan : 学的不仅是技术, 更是梦想!
例 3:v-for 也可以循环整数
- {{ n }}
- <script> new Vue({ el: '#app' }) </script>
三. 处理用户输入
1.v-on 指令
{{ message }}
逆转消息
- var app5 = new Vue({
- el: '#app-5',
- data: {
- message: 'Hello Vue.js!'
- },
- methods: {
- reverseMessage: function () {
- this.message = this.message.split('').reverse().join('')
- }
- }
- })
结果:
2.v-model 指令: 实现表单输入和应用状态的双向绑定
- {{ message }}
- var app6 = new Vue({
- el: '#app-6',
- data: {
- message: 'Hello Vue!'
- }
- })
结果:
四. 修饰符
修饰符是以半角句号 . 指明的特殊后缀, 用于指出一个指定应该以特殊方式绑定. 例如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():
五. 参数
参数在指令后以冒号指明. 例如, v-bind 指令被用来响应地更新 HTML 属性:
<script> new Vue({ el: '#app', data: { url: 'https://www.runoob.com' } }) </script>
六. 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写:
v-bind 缩写
v-on 缩写
来源: https://www.2cto.com/kf/201807/763788.html