定义
指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上
- 一些指令能接受一个
参数，在指令后以冒号指明。
<a v-bind:href="url"></a>
-
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
<form v-on:submit.prevent="onSubmit"></form>
常用内置指令
-
v-html指令把元素的内容替换成为属性值的HTML片段
-
v-if指令将根据表达式的值的true/false来移除/插入元素 -
v-else指令来表示 v-if 的“else 块 -
v-else-if类似于 v-else，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。需添加一个具有唯一值的key属性来特殊标识
把一个<template>元素当做包装元素，并在上面使用v-if。最终的渲染结果不会包含<template>元素
<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>
-
v-show是简单地切换元素的 CSS 属性 display，带有 v-show 的元素始终会被渲染并保留在 DOM 中
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果在运行时条件不太可能改变，则使用 v-if 较好；如果需要非常频繁地切换，则使用 v-show 较好。
-
v-for根据一组数组的选项列表进行渲染
也可以用 v-for 通过一个对象的属性来迭代
如同 v-if 模板，你也可以用带有 v-for 的 <template> 标签来渲染多个元素块
v-for会检测数组改变来刷新界面，但是通过索引改变数组或者直接改变数组长度并不会被检测到，需要使用Vue.set来更新数组
2.2.0+ 的版本里，当在组件中使用 v-for 时，key现在是必须的
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
var example1 = new Vue({
data: {
items: [
{message: 'Foo' },
{message: 'Bar' }
],
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
-
v-bind指令被用来响应地更新 HTML 属性v-bind:可缩写为:
我们可以传给** v-bind:class** 一个对象，以动态地切换 class
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表
也可以直接绑定数据里的一个对象
我们也可以在这里绑定返回对象的计算属性
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<div v-bind:class="[activeClass, errorClass]">
<div v-bind:class="classObject"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger
classObject: {
active: true,
'text-danger': false
}
}
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
v-bind:style也有类似加强功能
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<div v-bind:style="styleObject"></div>
data: {
activeColor: 'red',
fontSize: 30
styleObject: {
color: 'red',
fontSize: '13px'
}
}
-
v-on指令，它用于监听 DOM 事件v-on:可缩写为@。最常用的为@click
把特殊变量 $event 把它传入方法，访问原生 DOM 事件
通过由点(.)表示的指令后缀来调用事件修饰符，处理原生默认DOM 事件，例如.stop、.prevent、.capture、.self、.once，而且修饰符可以串联。.once修饰符还能被用到自定义的组件事件上
v-on:keyup在监听键盘事件时添加关键修饰符，可使用keyCode或者别名
<button v-on:click="counter += 1">增加 1</button>
<button v-on:click="greet">Greet</button>
<button v-on:click="greet('hi',$event)">Say hi</button>
<a v-on:click.stop="doThis"></a> <!-- 阻止单击事件冒泡 -->
<input v-on:keyup.13="submit"> <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
new Vue({
el: '#example-3',
methods: {
greet: function (message) {
alert(message)
}
})
-
v-model指令在表单控件元素上创建双向数据绑定
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
在文本区域插值( <textarea></textarea> ) 并不会生效，应用 v-model 来代替{{}}
<input type="checkbox" id="checkbox" v-model="checked"><!-- `checked` 为 true 或 false -->
<input type="radio" id="one" value="One" v-model="picked" value="a"><!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" id="one" value="One" v-model="picked" v-bind:value="a"><!-- 当选中时，vm.pick === vm.a -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<input v-model.trim="msg">
网友评论