您的位置：首页 > Web前端 > Vue.js

Vue.js 2.x笔记：基本语法（2）

2018-06-08 15:33 453 查看

1. Vue实例及选项

1.1 创建Vue实例（new Vue instance）

　　每个Vue Application必须创建一个root Vue Instance。

<script>
var vm = new Vue({

});
</script>

　　一个Vue实例相当于一个MVVM模式中的ViewModel。在创建Vue实例时，可以传入一个选项对象，包含数据、模板、挂载元素、方法、生命周期钩子等选项。

　　Vue.js通过构造函数Vue{ option }创建一个Vue实例：

var vm = new Vue({ option });

1.2 元素选项（The Element Option）

<div id="app"></div>
<script>
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 生命周期钩子

　　每个Vue实例创建时，都会经历一些列的初始化过程，调用相应的生命周期钩子。

　　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>

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 属性上使用{{}}语法。

　　HTML 属性中的值应使用 v-bind 指令。

<div id="app">
<div v-bind:title="title">Content</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
title: "Todo List"
}
});
</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] )

 

2.2.2 双向过滤器

 

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)。

<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>

　　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>

　　计算属性依赖一个或多个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 调用方式将总是再次执行函数。

　　在某些场景下，不希望有缓存，使用 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'
},
watch: {
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 只阻止元素自身的点击

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航