vue指令

vue指令：带有v-前缀的指令，代表vue提供的特殊属性。这些指令会在渲染的DOM上应用特殊的响应式行为。

v-text

作用：更新元素的textContent，若只更新部分文本内容需要使用{{ Mustache }}插值。

<span v-text="msg"></span>

v-html

作用：更新元素的innerHTML。
注意：v-html不能用来复合局部模板，因为vue不是基于字符串的模板引擎。另外只对可信内容使用v-html，避免xss攻击带来重大危险。

<span v-html="html"></span>

v-show

作用：根据指令的表达式值的真假，切换元素的display css属性。当条件变化时，会触发过渡效果。
说明：v-show会让元素始终渲染并保留在DOM中，因为只是改变css属性display。

<h1 v-show="ok">Hello!</h1>

v-if

作用：根据指令的表达式值的真假渲染元素。

<h1 v-if="awesome">Vue is awesome!</h1>

v-for

作用：
基于源数据（该数据类型可以是Array | Object | number | string | Iterable），进行多次渲染元素或模板块。该指令的值必须使用特定的语法alias in expression，为当前遍历的元素提供别名。

<ul id="example">
<li v-for="item in items">
{{ item.id }}
</li>
</ul>

<script>
var app = new Vue({

el: '#example',
data: {
items: [
{ text: "foo"},
{ text: "bar"}
]
}
})
</script>

另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>

v-for 默认行为试着不改变整体，而是替换元素。如果需要重新对元素进行排序，则需要使用 key 属性：

<div v-for="item in items" :key="item.id">
{{ item.id }}
</div>

v-on

缩写：@
参数：event
修饰符
.stop -调用event.stopPropagation()。
.prevent -调用event.preventDefault()。
.capture -添加事件监听器时使用capture模式。
.self -只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} -只当事件是从特定键触发时才触发回调。
.native -监听组件根元素的原生事件。
.once -只触发一次回调。
.left -只当点击鼠标左键时触发。
.right -只当点击鼠标右键时触发。
.middle -只当点击鼠标中键时触发。
.passive -以{ passive: true }模式添加侦听器。
作用：绑定事件监听器。事件类型由参数指定。

v-bind

缩写： :

修饰符

.prop -被用于绑定DOM属性.
.camel -.camel -将 kebab-case 特性名转换为 camelCase.
.sync -语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器 -
作用：动态地绑定一个或多个特性，或一个组件prop到表达式。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写形式 -->
<img :src="imageSrc">

<!-- class绑定 -->
<div :class=" { red: isRed } "></div>
<div :class="[classA, classB]"></div>

<!-- style绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="{ styleObjectA, styleObjectB }"></div>

v-model

修饰符：
.lazy -取代input监听change事件。
.number -输入字符串转为有效的数字。
.trim -输入首尾空格过滤。
作用：在表单控件或组件上创建双向绑定。