Vue内置指令

布满荆棘的人生 2021-09-27 13:36 392阅读 0赞

**1、v-bind**：响应并更新DOM特性；例如：v-bind:href  v-bind:class  v-bind:title  等等

主要用法是绑定属性，动态更新HTML元素上的属性；

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 </td> 
 <td> <code>&lt;a v-bind:href=</code><code>"url"</code> <code>rel=</code><code>"external nofollow"</code> <code>rel=</code><code>"external nofollow"</code> <code>&gt;...&lt;/a&gt;</code> <code>&lt;!-- 缩写 --&gt;</code> <code>&lt;a :href=</code><code>"url"</code> <code>rel=</code><code>"external nofollow"</code> <code>rel=</code><code>"external nofollow"</code> <code>&gt;...&lt;/a&gt;</code> <code>&lt;div :title=</code><code>'title'</code><code>&gt;标题&lt;/div&gt;</code> <code>var</code> <code>app = </code><code>new</code> <code>Vue({ </code> <code>&nbsp;&nbsp;</code><code>el: </code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>url: </code><code>'www.baidu.com'</code><code>,</code> <code>　　　　title: </code><code>'bind'</code> <code>&nbsp;&nbsp;</code><code>},</code> <code>}）</code> </td> 
 </tr> 
 </tbody> 
</table>

**2、v-on**：用于监听DOM事件； 例如：v-on:click  v-on:keyup

顺带讲一下方法与事件

2.1 @click 的表达式可以直接使用JavaScript 语句，也可以是一个在Vue 实例中methods 选项内的函数名，可以在方法中传递参数

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> <code>&lt;!-- 完整语法 --&gt;</code> <code>&lt;a v-on:click=</code><code>"doSomething"</code><code>&gt;...&lt;/a&gt;</code> <code>&lt;!-- 缩写 --&gt;</code> <code>&lt;a @click=</code><code>"doSomething()"</code><code>&gt;...&lt;/a&gt;　　　　</code><code>//是一个方法名</code> &nbsp; <code>&lt;p ng-</code><code>if</code><code>=</code><code>'show'</code><code>&gt;一段文本&lt;/p&gt;</code> <code>&lt;button @click=</code><code>"show=false"</code><code>&gt;点击隐藏文本&lt;/button&gt;　　</code><code>//直接是一个内联的语句</code> <code>&lt;button v-on:click=</code><code>"count++"</code><code>&gt;Add 1&lt;/button&gt;</code> <code>var</code> <code>app = </code><code>new</code> <code>Vue({ </code> <code>&nbsp;&nbsp;</code><code>el: </code><code>'#app'</code><code>,</code> <code>　　data:{ </code> <code>　　　　show: </code><code>true</code><code>，</code> <code>　　　　counter： 0</code> <code>　　},</code> <code>&nbsp;&nbsp;</code><code>methods: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>doSomething: </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>this</code><code>.title);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}）</code> </td> 
 </tr> 
 </tbody> 
</table>

2.2方法与事件：

Vue 提供了一个特殊变量$event ，用于访问原生DOM 事件，可以阻止事件冒泡或者阻止链接打开

写一个阻止冒泡的例子：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 </td> 
 <td> <code>&nbsp;&nbsp;</code><code>&lt;div @click=</code><code>"stopClick1('stop1',$event)"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div @click=</code><code>"stopClick2('stop2',$event)"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;div @click=</code><code>"stopClick3('stop3',$event)"</code><code>&gt;阻止冒泡&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>　　&lt;/div&gt;</code> &nbsp; <code>methods:{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>stopClick3: </code><code>function</code><code>(message, event){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(message);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>event.stopPropagation();&nbsp; </code><code>//阻止冒泡</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>stopClick2: </code><code>function</code><code>(message, event){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(message);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>stopClick1: </code><code>function</code><code>(message, event){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(message);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

2.3修饰符：

在＠绑定的事件后加小圆点“．”，再跟一个后缀来使用修饰符。

上面的阻止冒泡事件，可以直接用户修饰符的方式写为：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> <code>&lt;div @click.stop=</code><code>"stopClick3('stop3')"</code><code>&gt;阻止冒泡&lt;/div&gt;　　</code><code>//不用通过$event事件再来写了</code> </td> 
 </tr> 
 </tbody> 
</table>

常用的一些修饰符有：

.stop

.prevent

.capture

.self

.once

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> <code>＜ ！一阻止单击事件冒泡一〉</code> <code>&lt;a @click.stop=”handle "&gt;&lt;/a&gt;</code> <code>〈！一修饰符可以串联一〉</code> <code>&lt;a @click.stop.prevent=” handle ” &gt;&lt;/a&gt;</code> <code>〈！一添加事件侦听器时使用事件捕获模式一〉</code> <code>&lt;div @click . capture=”handle ”&gt; ... &lt;/div&gt;</code> <code>〈！一只当事件在该元素本身（而不是子元素） 触发时触发回调一〉</code> <code>&lt;div @click.self=” handle ”&gt; ... &lt;/div&gt;</code> <code>＜ ！一只触发一次，组件同样适用一〉</code> <code>&lt;div @click.once=” handle ”&gt; ... &lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

在表单元素上监昕键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 </td> 
 <td> <code>＜ ！一只有在keyCode 是13 时调用vm.submit()一〉</code> <code>&lt;input @keyup.13 ＝“ submit ”〉</code> </td> 
 </tr> 
 </tbody> 
</table>

**3、v-model**：数据双向绑定；用于表单输入等；例如：< input v-model= "message">

**4、v-show**：条件渲染指令，为DOM设置css的style属性(不能在<template>标签上使用)

**5、v-if**：条件渲染指令，动态在DOM内添加或删除DOM元素

**6、v-else**：条件渲染指令，必须跟v-if成对使用

**7、v-else-if**：判断多层条件，必须跟v-if成对使用；

**8、v-text**：更新元素的textContent；例如： 等同于 \{ \{msg\}\} ；

**9、v-html**：更新元素的innerHTML；会把标签名也带上。

**10、v-for**：循环指令；例如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>&lt;div id= </code><code>"app "</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li v-</code><code>for</code><code>=</code><code>"book in books"</code><code>&gt;{ { book.name } }&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/ul&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>var</code> <code>app =</code><code>new</code> <code>Vue({ </code> <code>&nbsp;&nbsp;</code><code>el: </code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>books: [</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{name: </code><code>'&lt;vue.js实战&gt;'</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{name: </code><code>'&lt;javascript语言精粹&gt;'</code><code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{name: </code><code>'&lt;javascript高级程序设计&gt;'</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

10.1 v- for 的表达式遍历数组时支持一个可选参数作为当前项的索引， 例如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>&lt;div id=</code><code>"app"</code><code>&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li v-</code><code>for</code><code>=</code><code>"(book , index) in books "</code><code>&gt;{ { index}} - { {book.name })&lt;/li&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/ul&gt;</code> <code>&lt;/div&gt;</code> </td> 
 </tr> 
 </tbody> 
</table>

10.2 v- for 的表达式遍历对象属性时，有两个可选参数，分别是键名和索引：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 </td> 
 <td> <code>&nbsp;&nbsp;</code><code>&lt;div id= </code><code>"app"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li v-</code><code>for</code><code>=</code><code>"(value , key , index) in user "</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{ { index } } - { { key } } : { { value } }</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/ul&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>var</code> <code>app = </code><code>new</code> <code>Vue({ </code> <code>&nbsp;&nbsp;</code><code>el: </code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>data: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>name: </code><code>'Aresn'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>grender: </code><code>'男'</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>age:23</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

10.3 v- for 的表达式还可以迭代整数：

10.4 数组更新

当我们修改数组时， Vue 会检测到数据变化，所以用v-for 渲染的视图也会立即更新。

• push()   
• pop()   
• shift()   
• unshit（）   
• splice()   
• sort（）   
• reverse()

这些方法会改变被这些方法调用的原始数组

例如，我们将之前一个示例的数据books 添加一项：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>app.books.push({ </code> <code>&nbsp;&nbsp;</code><code>name: </code><code>'《css世界》'</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

有些方法不会改变原数组，例如：

• filter()   
• concat()   
• slice()

它们返回的是一个新数组，在使用这些非变异方法时，可以用新数组来替换原数组，如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 </td> 
 <td> <code>app.books = app.books.filter(</code><code>function</code> <code>(item) { </code> <code>&nbsp;&nbsp;</code><code>return</code> <code>item . name.match(/JavaScript/);</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

Vue 在检测到数组变化时，并不是直接重新渲染整个列表，而是最大化地复用DOM 元素。

替换的数组中，含有相同元素的项不会被重新渲染，因此可以大胆地用新数组来替换旧数组，不用担心性能问题。

10.5 过滤与排序

当你不想改变原数组，想通过一个数组的副本来做过滤或排序的显示时， 可以使用计算属性来返回过滤或排序后的数组 ，例如：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> <code>&nbsp;&nbsp;</code><code>&lt;div id=</code><code>"app"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;ul&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;template v-</code><code>for</code><code>=</code><code>"book in filterBooks"</code><code>&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;书名：{ {book.name}}&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;li&gt;作者：{ {book.author}}&lt;/li&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/template&gt;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;/ul&gt;</code> <code>&nbsp;&nbsp;</code><code>&lt;/div&gt;</code> <code>var</code> <code>app= </code><code>new</code> <code>Vue({ </code> <code>&nbsp;&nbsp;</code><code>el: </code><code>'#app'</code><code>,</code> <code>&nbsp;&nbsp;</code><code>computed: { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filterBooks: </code><code>function</code><code>(){ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this</code><code>.books.filter(</code><code>function</code> <code>(book) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>book.name.match(/JavaScript/);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>},</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>});</code> </td> 
 </tr> 
 </tbody> 
</table>

**11、v-cloak**：不需要表达式，这个指令保持在元素上直到关联实例结束编译； v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 ；

**12、v-once**：也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或组件的所有子节点。

首次渲染后，不再随数据的变化重新渲染，将被视为静态内容； v-once 在业务中也很少使用，当你需要进一步优化性能时，可能会用到。

**13、v-pre**：不需要表达式，跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度；例如：` { { this will not be compiled }} `；