Vue的常用指令总结

v-text：

更新元素的文本内容，如果要更新一部分的文本内容，用插值语法（{{内容}}）

<span v-text="msg"></span>
<!-- 等价于 -->
<span>{{msg}}</span>

v-html：

更新元素的HTML内容

<div v-html="'<h1>Hello World</h1>'"></div>

v-show：

根据表达式的真假值，切换元素展示和隐藏，底层是设置display为none或block等

v-if：

根据表达式的真假值来有条件地渲染元素。他和v-show的区别也就是v-show底层是设置display为none或block实现的，而他不是。

v-else，v-else-if：

配合v-if使用，这三个作用就是条件渲染。

（重点）v-for：

对数组或对象遍历，进而多次渲染，表达式里可以用in或of遍历，可以对比for-in,for-of理解，同时v-for也可以迭代map和set。

<div v-for="(arr, index) in arr"></div>
<div v-for="(value, key) in object"></div>

（重点）v-on（缩写@）：

用于绑定事件监听器，重点是指令后面的修饰符，可以处理事件

常用修饰符：

.stop - 调用 event.stopPropagation()。

.prevent - 调用 event.preventDefault()

.left - 只当点击鼠标左键时触发。

.right - 只当点击鼠标右键时触发。

.middle - 只当点击鼠标中键时触发。

常用示例：
<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

（重点）v-bind（缩写：）：

把属性和元素绑定。

<!-- 绑定 attribute -->
<img v-bind:src="imageSrc" />

（重点）v-model：

在表单控件或者组件上创建双向绑定。

<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>

例如这个示例，v-model绑定message，p标签里同时也要写message