指令
指令是带有 v-
前缀的特殊 HTML 标签属性。指令的职责,就是当其属性值改变时,将某些行为应用到 DOM 上。
概述
指令是扩展和复用代码的一种方式。
🥛v-text
可以用属性值设置元素的内容:
<span v-text="value"></span>
当 value 修改时,v-text 会修改当前所在元素的内容,这就是 v-text 的某些应用到 DOM 的行为 。
🍺 v-bind
🌰:把 value 和 url 的 href 属性绑定起来:
<div id="app">
<a v-bind:href="value">url</a>
</div>
<script>
var a= new Vue({
el: '#app',
data(){
return {
value:'http://t.cn/#42'
}
}
})
</script>
指令 v-bind 会在绑定的属性值修改时,同步修改由参数(href)指定的属性。
指令的格式:
- 指令能接受一个
参数
,在指令后以 “:
” 指明。 - 指令能接受一个或者多个
修饰符
,是以 “.
” 指明的特殊后缀。 - 指令能接受一个
单一JavaScript表达式
,最常见的表达式就是一个属性值。
🍾 v-on
可以声明式地把 Vue 实例方法挂接到 DOM 标签的事件上,🌰: