Vue.js 2.x笔记：基本语法（2）
1. Vue实例及选项
1.1 创建Vue实例（new Vue instance）
每个Vue Application必须创建一个root Vue Instance。
<script>
var vm = new Vue({
});
</script>
一个Vue实例相当于一个MVVM模式中的ViewModel。在创建Vue实例时，可以传入一个选项对象，包括挂载元素(el)、数据(data)、方法(methods)、模板(template)、生命周期钩子等选项。
Vue.js通过构造函数Vue{ option }创建一个Vue实例：
var vm = new Vue({ option });
1.2 元素选项（The Element Option）
<div id="app"></div> <script> /** * 实例化vue对象 * 每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的 * 实例化Vue时，需要传入一个选项对象 * el:elment需要获取的对象，一定是html中的根容器元素 * data：用于存储数据 */ var vm = new Vue({ el: "#app" }); </script>
1.3 数据选项（The Data Option）
<div id="app">{{ title }}</div> <script> var vm = new Vue({ el: "#app", data: { title: "标题" } }); </script>
1.4 方法methods
<div id="app"> {{ title }} {{ hello() }} <button @click="say">Hello</button> </div> <script> var vm = new Vue({ el: "#app", data: { title: "Hello World!" }, methods: { hello() { return "Hello Vue.js"; }, say() { console.log("Hello World!"); } } }); </script>
1.5 生命周期钩子
每个Vue实例创建时，都会经历一些列的初始化过程，调用相应的生命周期钩子。
Vue生命周期分为8个阶段：beforeCreate（创建前）、created（创建后）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（更新前）、updated（更新后）、beforeDestroy（销毁前）、destroyed（销毁后）。
Vue生命周期钩子：
◊ created：实例创建完成后调用，此阶段完成数据监测等，但尚未挂载，$el 还不可用。
◊ mounted：el 挂载到实例后调用。
<div id="app">{{ title }}</div> <script> var vm = new Vue({ el: "#app", data: { title: "标题" }, created: function () { console.log("Vue instance has been created!"); } }); </script>
<div id="app">{{ title }}</div> <script> var vm = new Vue({ el: "#app", data: { title: "标题" }, created() { console.log("Vue instance has been created!"); }, mounted() { console.log("mounted:" + this.$el); // <div id="app"></div> // console.log("mounted:" + this.$el.id); } }); </script>
Vue各生命周期在真实场景的业务逻辑应用：
◊ created：进行Ajax请求异步数据的获取、初始化数据。
◊ mounted：挂载元素内DOM节点的获取。
◊ nextTick：针对单一事件更新数据后立即操作DOM。
◊ updated：数据更新的统一业务逻辑处理。
◊ watch：监听具体数据变化，并做相应的处理。
2. 模板语法
Vue.js创建实例对象的选项中影响模板或DOM的选项：el 和 template。
◊ el ：类型为字符串，DOM 元素或函数。其作用是为实例提供挂载元素。
◊ template：类型为字符串。默认会将template 值替换挂载元素（即el 值对应的元素），并合并挂载元素和模板根节点的属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>libing.vue</title> <script src="node_modules/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <h1>将被模板内容替换</h1> </div> <template id="tpl"> <div class="tpl">Todo List</div> </template> <script> var vm = new Vue({ el: "#app", template: "#tpl" }); </script> </body> </html>
渲染输出HTML：
<body> <div class="tpl">Todo List</div> <template id="tpl"> <div class="tpl">Todo List</div> </template> <script> var vm = new Vue({ el: "#app", template: "#tpl" }); </script> </body>
Vue.js使用基于HTML的模版语法，允许声明式地将DOM绑定至Vue实例的数据。
Vue.js的核心：采用模板语法声明式的将数据渲染到DOM。
2.1 插值（Interpolations）
2.1.1 文本（Text）
Vue.js 实例中通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。
数据绑定：{{ }}
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>libing.vue</title> <script src="node_modules/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <h1>{{ title }}</h1> </div> <script> var vm = new Vue({ el: "#app", data: { title: "Todo List" } }); </script> </body> </html>
2.1.2 原始HTML（Raw HTML）
{{ }}：将数据中的 HTML 转为纯文本后再进行插值。
v-html ：输出 HTML 代码
<div id="app"> <div v-html="title"></div> </div> <script> var vm = new Vue({ el: "#app", data: { title: "<h1>Todo List</h1>" } }); </script>
2.1.3 属性（Attributes）
不能在 Vue 模板中的 HTML 属性上使用{{}}语法。
<div id="app"> <a href="{{url}}">链接</a><!-- 错误 --> </div> <script> var vm = new Vue({ el: "#app", data: { url: "https://www.baidu.com/" } }); </script>
HTML 属性中的值应使用 v-bind 指令。
<div id="app"> <a v-bind:href="url">链接</a> </div> <script> var vm = new Vue({ el: "#app", data: { url: "https://www.baidu.com/" } }); </script>
2.1.4 表达式
<div id="app"> {{ status ? "是" : "否" }} <div v-bind:title="status?'是':'否'">Content</div> </div> <script> var vm = new Vue({ el: "#app", data: { status: true } }); </script>
2.2 过滤器（Filters）
2.2.1 注册过滤器
Vue.js 允许在表达式后添加可选的过滤器，以管道符 “|” 指示。
<div id="app"> <h1>{{ title | uppercase }}</h1> </div> <script> var vm = new Vue({ el: "#app", data: { title: "Todo List" }, filters: { uppercase: function (value) { return value.toUpperCase(); } } }); </script>
多个过滤器链式使用：
{{ name | filterA | filterB }}
传入多个参数：
{{ name | filterA arg1 arg2}}
此时，filterA 将 name 的值做为第一个参数，arg1，arg2 做为第二、第三个参数传入过滤器函数中。
Vue.js 提供全局方法Vue.filter() 注册一个自定义过滤器，接受过滤器ID 和过滤器函数两个参数。
过滤器注册语法格式：
Vue.filter( id, [definition] )
示例：日期格式过滤器
引入moment.js：
npm install -S moment
import Vue from 'vue' import moment from 'moment' Vue.filter('datefmt', function (input, fmtstring) { return moment(input).format(fmtstring); }); new Vue({ el: '#app', data: { now: new Date() } })
{{ now | datefmt('YYYY-MM-DD HH:mm:ss') }}
2.3 指令（Directives）
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上。
v-bind指令：用于响应式地更新 HTML 属性。
v-on 指令：用于监听 DOM 事件。
<div id="app"> <h1 v-if="status">{{ title }}</h1> </div> <script> var vm = new Vue({ el: "#app", data: { title: "Todo List", status: true } }); </script>
2.3.1 参数（Arguments）
一些指令能够接受一个参数，参数在指令后以冒号（:）表示。
<div id="app"> <a v-bind:href="url">libingql</a> </div> <script> var vm = new Vue({ el: "#app", data: { url: "https://www.cnblogs.com/libingql" } }); </script>
2.3.2 修饰符（Modifiers）
修饰符：以句号 . 表示的特殊后缀，用于指出一个指定应该以特殊方式绑定。
示例：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
<form v-on:submit.prevent="onSubmit"></form>
2.4 用户输入
在 input 输入框中使用 v-model 指令来实现双向数据绑定。
<div id="app"> <div>{{ title }}</div> <input type="text" v-model="title" /> </div> <script> var vm = new Vue({ el: "#app", data: { title: "Todo List" } }); </script>
2.5 简写（Shorthands）
Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供特定简写。
2.5.1 v-bind 简写
<!-- 完整语法 --> <a v-bind:href="url"> ... </a> <!-- 简写 --> <a :href="url"> ... </a>
2.5.2 v-on 简写
<!-- 完整语法 --> <a v-on:click="doSomething"> ... </a> <!-- 简写 --> <a @click="doSomething"> ... </a>
3. 条件语句
3.1 v-if
v-if指令：条件判断
在 <template> 上使用 v-if 进行条件分组
<div id="app"> <h1 v-if="seen">Todo List</h1> <template v-if="ok"> <ul> <li>Todo Item</li> <li>Todo Item</li> <li>Todo Item</li> </ul> </template> </div> <script> var vm = new Vue({ el: "#app", data: { seen: true, ok: true } }); </script>
3.2 v-else
v-if / v-else语句块：
<div id="app"> <h1 v-if="ok">是</h1> <h1 v-else>否</h1> </div> <script> var vm = new Vue({ el: "#app", data: { ok: true } }); </script>
3.3 v-if-else
v-if-else：v-if 之后的“else-if 块”，可以多次链式地调用。
<div id="app"> <div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }); </script>
3.4 v-show
v-show：根据条件展示元素
v-show 的元素会始终渲染并保留在 DOM 中。v-show 只会切换元素的 display 这个 CSS 属性。
<div id="app"> <h1 v-show="ok">Todo List</h1> </div> <script> var vm = new Vue({ el: "#app", data: { ok: true } }); </script>
注：v-show 无法用于 <template> 元素，也不能和 v-else 配合使用。
3.5 v-if 和 v-show
v-if 是“真实”的条件渲染，因为它会确保条件块(conditional block)在切换的过程中，完整地销毁(destroy)和重新创建(re-create)条件块内的事件监听器和子组件。
v-if 是惰性的(lazy)：如果在初始渲染时条件为 false，它不会执行任何操作 - 在条件第一次变为 true 时，才开始渲染条件块。
v-show 不管初始条件如何，元素始终渲染，并且只是基于 CSS 的切换。
通常来说，v-if 在切换时有更高的性能开销，而 v-show 在初始渲染时有更高的性能开销。
如果需要频繁切换，推荐使用 v-show，如果条件在运行时改变的可能性较少，推荐使用 v-if。
4. 循环语句
4.1 v-for遍历数组
v-for 遍历数组格式：
item in items
其中，
items 是原始数据数组(source data array)，
item 是数组中每个迭代元素的指代别名(alias)。
可以使用of代替in作为分隔符，of是最接近JavaScript迭代器的语法。
item of items
<div id="app"> <ul> <li v-for="item in items">{{ item.text }}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { items: [{ id: 1, text: "Vue" }, { id: 2, text: "Angular" }, { id: 3, text: "React" }] } }); </script>
<div id="app"> <ul> <li v-for="item in list">{{ item.text }}</li> </ul> </div> new Vue({ el: '#app', data: { list: [{ id: 1, text: 'Vue' }, { id: 2, text: 'Angular' }, { id: 3, text: 'React' }] } });
v-for索引参数：
<li v-for="(item, index) in items">{{ index }}-{{ item.text }}</li>
其中，index从0开始。
4.2 v-for遍历对象
v-for 可以遍历对象的属性。
<div id="app"> <ul> <li v-for="value in item">{{ value }}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { item: { id: 1, text: "Vue" } } }); </script>
v-for遍历对象属性：两个参数key、value
<div id="app"> <ul> <li v-for="(value, key) in item">{{ key }}:{{ value }}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { item: { id: 1, text: "Vue" } } }); </script>
v-for遍历对象属性：3个参数index、key、value，索引（index）从0开始。
<div id="app"> <ul> <li v-for="(value, key, index) in item">{{ index }}-{{ key }}:{{ value }}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { item: { id: 1, text: "Vue" } } }); </script>
4.3 key
为便于 Vue 跟踪每个节点的身份，重新复用(reuse)和重新排序(reorder)现有元素，需要为每项提供唯一的 key 属性，从而给 Vue 一个提示。
理想的 key 值是每项都有唯一的 id。
推荐：在使用 v-for 时，尽可能提供一个 key，除非迭代的 DOM 内容足够简单，或者是故意依赖于默认行为来获得性能提升。
<div id="app"> <ul> <li v-for="item in items" v-bind:key="item.id">{{ item.text }}</li> </ul> </div> <script> var vm = new Vue({ el: "#app", data: { items: [{ id: 1, text: "Vue" }, { id: 2, text: "Angular" }, { id: 3, text: "React" }] } }); </script>
简写：
<li v-for="item in items" :key="item.id">{{ item.text }}</li>
4.4 v-for遍历整数
v-for可以在整数值范围内迭代。
<div id="app"> <ul> <li v-for="n in 10">{{ n }}</li> </ul> </div> <script> new Vue({ el: '#app' }); </script>
4.5 计算（computed）属性与监听（watch）属性
4.5.1 计算（computed）属性
在模板中使用表达式是非常方便直接的，只适用于简单的操作，不适于加入过多的逻辑。
对于复杂的逻辑，使用 computed 属性(computed property)。
计算属性都以函数的形式，在Vue实例的computed选项中，最终返回计算后的结果。
<div id="app"> {{ fullName }} </div> <script> new Vue({ el: '#app', data: { firstName: "bing", lastName: "li" }, computed: { fullName: function () { return this.lastName + ' ' + this.firstName; } } }); </script>
计算属性内部的this指向Vue实例。
计算属性依赖一个或多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图（vm）也会更新。
<div id="app"> <table> <tr> <th>商品ID</th> <th>商品名称</th> <th>单价</th> <th>数量</th> </tr> <tr v-for="item in products"> <td>{{ item.ID }}</td> <td>{{ item.ProductName }}</td> <td>{{ item.UnitPrice }}</td> <td> <input type="text" v-model="item.Quantity" /> </td> </tr> <tr> <td colspan="4" style="text-align: right;">总计：{{ total }}</td> </tr> </table> </div> <script> var vm = new Vue({ el: "#app", data: { products: [{ ID: 1, ProductName: "手机", UnitPrice: 1000, Quantity: 2 }, { ID: 2, ProductName: "电脑", UnitPrice: 5000, Quantity: 5 }] }, computed: { total: function () { var total = 0; for (var i = 0; i < this.products.length; i++) { total += this.products[i].Quantity * this.products[i].UnitPrice; } return total; } } }); </script>
computed 属性默认只有 getter ，可以在需要时提供一个 setter 。
<div id="app"> {{ fullName }} </div> <script> var vm = new Vue({ el: '#app', data: { firstName: "Bing", lastName: "Li" }, computed: { fullName: { get: function () { return this.lastName + ' ' + this.firstName; }, set: function (value) { var names = value.split(' ') this.lastName = names[0] this.firstName = names[names.length - 1] } } } }); vm.fullName = "Li Bing2018"; </script>
4.5.2 computed 缓存 vs method 方法
computed属性会基于它所依赖的数据进行缓存。每个 computed 属性，只有在它所依赖的数据发生变化时，才会重新取值(re-evaluate)。
<div id="app"> {{ now }} </div> <script> new Vue({ el: '#app', computed: { now: function () { return Date.now() } } }); </script>
method方法：每当触发重新渲染(re-render)时，method 调用方式将总是再次执行函数。不管依赖的数据是否改变，methods都会重新计算。
在某些场景下，不希望有缓存，使用 method 方法替代。
<div id="app"> {{ now() }} </div> <script> new Vue({ el: '#app', methods: { now: function () { return Date.now() } } }); </script>
4.5.3 computed 属性和 watch 属性
watch 属性：Vue 提供的一种更加通用的方式，来观察和响应 Vue 实例上的数据变化。
过度滥用 watch 属性会造成一些问题，更推荐的方式是，使用 computed 属性。
<div id="app"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <div>{{ fullName }}</div> </div> <script> new Vue({ el: '#app', data: { firstName: 'Bing', lastName: 'Li', fullName: 'Li Bing' }, computed: { firstName: function (val) { this.fullName = this.lastName + ' ' + val; }, lastName: function (val) { this.fullName = val + ' ' + this.firstName; } } }); </script>
<script> new Vue({ el: '#app', data: { firstName: 'Bing', lastName: 'Li', fullName: 'Li Bing' }, watch: { firstName: function () { this.fullName = this.lastName + ' ' + this.firstName; }, lastName: function () { this.fullName = this.lastName + ' ' + this.firstName; } } }); </script>
5. 样式绑定：class和style
5.1 class绑定
5.1.1 对象语法
向 v-bind:class 传入一个对象，来动态地切换 class。
<div id="app"> <div v-bind:class="{ active: isActive }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true } }); </script>
渲染：
<div class="active"></div>
active 这个 class 的存在与否，取决于 isActive 这个 data 属性的 truthy 值。
v-bind:class 指令可以和普通 class 属性共存。可以通过在对象中添加多个字段，来切换多个 class。
<div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: false } }); </script>
渲染：
<div class="static active"></div>
绑定对象，可以无需内联。
<div id="app"> <div v-bind:class="className"></div> </div> <script> new Vue({ el: '#app', data: { className: { active: true, 'text-danger': true } } }); </script>
渲染：
<div class="active text-danger"></div>
绑定返回对象的计算属性。
<div id="app"> <div v-bind:class="className"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: true }, computed: { className: function () { return { active: this.isActive, 'text-danger': this.hasError } } } }); </script>
5.1.2 数组语法
可以向 v-bind:class 传入一个数组，来与 class 列表对应。
<div id="app"> <div v-bind:class="[activeClass, errorClass]"></div> </div> <script> new Vue({ el: '#app', data: { activeClass: 'active', errorClass: 'text-danger' } }); </script>
三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
数组语法中使用对象语法：
<div id="app"> <div v-bind:class="[{ active: isActive }, errorClass]"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, errorClass: 'text-danger' } }); </script>
5.2 style绑定
5.2.1 对象语法
v-bind:style 直接设置样式
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> </div> <script> new Vue({ el: '#app', data: { activeColor: 'red', fontSize: 30 } }); </script>
渲染：
<div style="color: red; font-size: 30px;"></div>
绑定对象
<div id="app"> <div v-bind:style="style"></div> </div> <script> new Vue({ el: '#app', data: { style: { color: 'red', fontSize: '13px' } } }); </script>
v-bind:style 的对象语法，可以和 computed 属性结合使用，此 computed 属性所对应的 getter 函数需要返回一个对象。
5.2.2 数组语法
v-bind:style 的数组语法，可以在同一个元素上，使用多个 style 对象。
<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]"></div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'red', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } }); </script>
渲染：
<div style="color: red; font-size: 30px; font-weight: bold;"></div>
6. 事件处理
6.1 监听事件
v-on 指令：监听 DOM 事件，并在事件被触发时执行 JavaScript 代码。
<div id="app"> <button v-on:click="counter += 1">增加 1</button> <div>按钮点击次数：{{ counter }}次</div> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }); </script>
6.2 定义在 methods 对象中的事件处理器
用于处理逻辑复杂事件
<div id="app"> <button v-on:click="greet">greet</button> </div> <script> var vm = new Vue({ el: '#app', data: { name: "Li Bing" }, methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }); // 可以用 JavaScript 直接调用方法 vm.greet() // -> 'Hello Li Bing!' </script>
6.3 定义在行内的事件处理器
<div id="app"> <button v-on:click="greet('Li Bing')">greet</button> </div> <script> var vm = new Vue({ el: '#app', methods: { greet: function (name) { alert('Hello ' + name + '!'); } } }); </script>
6.4 事件修饰符(Event Modifiers)
在事件处理程序中常见调用 event.preventDefault() 或 event.stopPropagation()
v-on 提供事件修饰符，以点(.)开头的指令后缀来表示。
◊ .stop
◊ .prevent
◊ .capture
◊ .self
◊ .once
<!-- 停止点击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重新载入页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以链式调用 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时，使用事件捕获模式 --> <!-- 内部元素触发的事件先在此处处理，然后才交给内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只有在 event.target 是元素自身时，才触发处理函数。 --> <!-- 也就是说，event.target 是子元素时，不触发处理函数 --> <div v-on:click.self="doThat">...</div>
v-on:click.prevent.self 阻止所有点击
v-on:click.self.prevent 只阻止元素自身的点击
