Vue.js 2.x笔记：基本语法（2）
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 ></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 只阻止元素自身的点击
以上是 Vue.js 2.x笔记：基本语法（2） 的全部内容， 来源链接： utcz.com/z/377090.html
