vue基础（1）—— 指令

1.v-if：可以实现条件渲染，Vue会根据表达式的值的真假条件，来控制一个元素是否渲染。（条件为false，则不会渲染这个元素。）

2.v-show：也是用于根据条件展示元素。（和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。）

ps~：v-if有更高的切换开销；v-show有更高的初始渲染开销。因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好。

3.v-else：是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

4.v-else-if：在v-if和v-else中间。

5.v-for：绑定数组的数据来渲染一个项目列表。

⑴.遍历数组：参数( 第一个为值，第二个为索引 )

⑵.遍历对象： 参数( 第一个为值，第二个为键名，第三个为索引 )

ps~：当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

6.v-bind( 简写"：")：用来动态的绑定一个或者多个特性，没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。

通俗点解释：就是是可以解析表达式或者变量等，可以使你这个属性具有逻辑处理的能力了。

7.v-on( 简写"@")：事件监听器 (主要用来监听dom事件)，通过它调用在 Vue 实例中定义的方法。

事件修饰符

.stop 阻止事件继续传播

.prevent 事件不再重载页面

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为  

ps~：使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

8.v-model：它能轻松实现表单输入和应用状态之间的双向绑定( 一般用在input )。v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。

9.v-html：双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，

     可以用v-html指令。它等同于JS的innerHtml属性。

<div v-html="divHtml"></div>

这个div的内容将会替换成属性值divHtml，直接作为HTML进行渲染。

10.v-text：可以等同于JS的innerText属性。

(<div v-text="divText"></div> 等价于 <div>{{divText}}</div>)

本文借鉴了

作者：klmhly

链接：https://www.jianshu.com/p/c4a87e1b4ef7

來源：简书