[JavaScript知识库]vue的指令

vue的常用指令

**1. v-text 【值绑定语法】**相当于真实dom的innerText属性，可以给标签设置内容，{{}}和它的作用是一样的。值绑定可以实现运算，但有限制，只能实现三目运算、&&、||等，最终要得到一个值。

<p v-text="'文字描述'+data中要用到的属性"></p>
<!--也可以写为-->
<p>文字描述{{data中要用到的属性}}</p>

2. v-model 是实现数据双向绑定的关键，常用于input标签，它不仅可以给input赋值，也可以获取input的value，而且获取的数据是实时的。
可以通过修饰符来给v-model添加一个增强：
v-model.trim可以去除输入框输入的多余空格；
v-model.lazy 实现懒监听，把默认的input事件切换为change事件，输入完成后才读取输入框内容。
v-model.number 只输入数字，即输入的内容只认数字，但是该修饰符要配合type="number"来使用，如果没有type=“number”，当输入的第一个字符不是数字时，v-model.number 没有作用，我们可以输入其他字符；只有当输入的第一个字符为数字时v-model.number才起作用，所以必须配合type="number"使用。

3. v-for 循环，用法v-for=“item in list”，变量item是数组list的每一项。
4. v-if 判断该标签是否要渲染，如果条件满足，该标签将被渲染到页面，否则该标签不会出现在页面的html代码中。与其配套的指令还有v-else和v-else-if。
5. v-show 决定该标签是否显示，v-show所在的标签都会出现在页面的html文档中，但是只有条件满足时，标签内容才会显示，因为它是根据display样式属性来决定的，条件不满足时display:none；条件满足时，不会有改属性。

v-show和v-if的作用是一样的，都决定着内容渲染，但工作原理不同，我们要根据业务需求来使用不同的指令，当数据变化较快的时候使用v-show，否则都用v-if，因为v-if只留下了满足条件的标签，减小了文档压力。

6. v-bind 用于绑定数据和元素属性
当a标签的href属性是传入的一个来自data的变量时，我们就要用到v-bind指令。当然也可以用在其他标签和属性上，属性可以是自定义属性。v-bind可以简写为一个冒号 :

  <a v-bind:href="url">这是一个链接</a>

7. v-on:事件 绑定事件的属性

<button v-on:click="">按钮</button>
<!--v-on：可以简写为一个@-->
<button @click="">按钮</button>