指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是, 当表达式的值改变时, 将其产生的连带影响, 响应式地作用于 DOM.
内置指令
1,v-bind: 响应并更新 DOM 特性; 例如: v-bind:href v-bind:class v-bind:title 等等
主要用法是绑定属性, 动态更新 html 元素上的属性;
- <a v-bind:href="url" rel="external nofollow" rel="external nofollow">
- ...
- </a>
- <!-- 缩写 -->
- <a :href="url" rel="external nofollow" rel="external nofollow">
- ...
- </a>
- <div :title='title'> 标题 </div>
- var app = new vue({ el: '#app', data: { url: 'www.baidu.com', title:
- 'bind' }, })
2,v-on: 用于监听 DOM 事件; 例如: v-on:click v-on:keyup
顺带讲一下方法与事件
2.1 @click 的表达式可以直接使用 JavaScript 语句, 也可以是一个在 Vue 实例中 methods 选项内的函数名, 可以在方法中传递参数
- <!-- 完整语法 -->
- <a v-on:click="doSomething">
- ...
- </a>
- <!-- 缩写 -->
- <a @click="doSomething()">
- ...
- </a>
- // 是一个方法名
- <p ng-if='show'>一段文本</p>
- <button @click="show=false">点击隐藏文本</button>
- // 直接是一个内联的语句
- <button v-on:click="count++">
- Add 1
- </button>
- var app = new Vue({ el: '#app', data:{ show: true, counter: 0 }, methods:
- { doSomething: function(){ console.log(this.title); }, } })
2.2 方法与事件:
Vue 提供了一个特殊变量 $event , 用于访问原生 DOM 事件, 可以阻止事件冒泡或者阻止链接打开
写一个阻止冒泡的例子:
- <div @click="stopClick1('stop1',$event)">
- <div @click="stopClick2('stop2',$event)">
- <div @click="stopClick3('stop3',$event)"> 阻止冒泡 </div>
- </div>
- </div>
- </div>
- methods:{
- stopClick3: function(message, event){
- console.log(message);
- event.stopPropagation(); // 阻止冒泡
- },
- stopClick2: function(message, event){
- console.log(message);
- },
- stopClick1: function(message, event){
- console.log(message);
- }
- }
2.3 修饰符:
在@绑定的事件后加小圆点 ".", 再跟一个后缀来使用修饰符.
上面的阻止冒泡事件, 可以直接用户修饰符的方式写为:
<div @click.stop="stopClick3('stop3')"> 阻止冒泡 </div> // 不用通过 $event 事件再来写了
常用的一些修饰符有:
.stop
.prevent
.capture
.self
.once
< ! 一阻止单击事件冒泡一
<a @click.stop="handle"></a>
! 一修饰符可以串联一
<a @click.stop.prevent="handle"></a>
! 一添加事件侦听器时使用事件捕获模式一
<div @click . capture="handle"> ... </div>
! 一只当事件在该元素本身 (而不是子元素) 触发时触发回调一
<div @click.self="handle"> ... </div>
< ! 一只触发一次, 组件同样适用一
<div @click.once="handle"> ... </div>
在表单元素上监昕键盘事件时, 还可以使用按键修饰符, 比如按下具体某个键时才调用方法:
< ! 一只有在 keyCode 是 13 时调用 vm.submit() 一
<input @keyup.13 ="submit"
3,v-model: 数据双向绑定; 用于表单输入等; 例如:<input v-model= "message">
4,v-show: 条件渲染指令, 为 DOM 设置 css 的 style 属性
5,v-if: 条件渲染指令, 动态在 DOM 内添加或删除 DOM 元素
6,v-else: 条件渲染指令, 必须跟 v-if 成对使用
7,v-else-if: 判断多层条件, 必须跟 v-if 成对使用;
8,v-text: 更新元素的 textContent; 例如:<span v-text="msg"></span> 等同于 <span>{{msg}} </span>;
9,v-html: 更新元素的 innerHTML; 会把标签名也带上.
10,v-for: 循环指令; 例如:
- <div id= "app">
- <ul>
- <li v-for="book in books">{ { book.name } }</li>
- </ul>
- </div>
- var app =new Vue({
- el: '#app',
- data: {
- books: [
- {name: '<vue.js 实战 >'},
- {name: '<javascript 语言精粹 >'},
- {name: '<javascript 高级程序设计 >'}
- ]
- }
- });
10.1 v- for 的表达式遍历数组时支持一个可选参数作为当前项的索引, 例如:
- <div id="app">
- <ul>
- <li v-for="(book , index) in books">{{ index}} - {{book.name })</li>
- </ul>
- </div>
10.2 v- for 的表达式遍历对象属性时, 有两个可选参数, 分别是键名和索引:
- <div id= "app">
- <ul>
- <li v-for="(value , key , index) in user">
- { { index } } - { { key } } : { { value } }
- </li>
- </ul>
- </div>
- var app = new Vue({
- el: '#app',
- data: {
- name: 'Aresn',
- grender: '男',
- age:23
- }
- });
10.3 v- for 的表达式还可以迭代整数:
- <div id="app">
- <span v-for="n in 10">{{n}}</span>
- </div>
10.4 数组更新
当我们修改数组时, Vue 会检测到数据变化, 所以用 v-for 渲染的视图也会立即更新.
- push()
- pop()
- shift()
unshit()
- splice()
- sort()
- reverse()
这些方法会改变被这些方法调用的原始数组
例如, 我们将之前一个示例的数据 books 添加一项:
app.books.push({
- name: 'css 世界'
- });
有些方法不会改变原数组, 例如:
- filter()
- concat()
- slice()
它们返回的是一个新数组, 在使用这些非变异方法时, 可以用新数组来替换原数组, 如:
- app.books = app.books.filter(function (item) {
- return item . name.match(/JavaScript/);
- });
Vue 在检测到数组变化时, 并不是直接重新渲染整个列表, 而是最大化地复用 DOM 元素.
替换的数组中, 含有相同元素的项不会被重新渲染, 因此可以大胆地用新数组来替换旧数组, 不用担心性能问题.
10.5 过滤与排序
当你不想改变原数组, 想通过一个数组的副本来做过滤或排序的显示时, 可以使用计算属性来返回过滤或排序后的数组 , 例如:
- <div id="app">
- <ul>
- <template v-for="book in filterBooks">
- <li> 书名:{{book.name}}</li>
- <li> 作者:{{book.author}}</li>
- </template>
- </ul>
- </div>
- var app= new Vue({
- el: '#app',
- computed: {
- filterBooks: function(){
- return this.books.filter(function (book) {
- return book.name.match(/JavaScript/);
- })
- },
- }
- });
11,v-cloak: 不需要表达式, 这个指令保持在元素上直到关联实例结束编译; v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ;
12,v-once: 也是一个不需要表达式的指令, 作用是定义它的元素或组件只渲染一次, 包括元素或组件的所有子节点.
首次渲染后, 不再随数据的变化重新渲染, 将被视为静态内容; v-once 在业务中也很少使用, 当你需要进一步优化性能时, 可能会用到.
13,v-pre: 不需要表达式, 跳过这个元素以及子元素的编译过程, 以此来加快整个项目的编译速度; 例如:
- <span v-pre>{{ this will not be compiled }} </span>
- ;