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 -输入首尾空格过滤。
作用:在表单控件或组件上创建双向绑定。