指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。
内置指令
1、v-bind:响应并更新DOM特性;例如:v-bind:href v-bind:class v-bind:title 等等
主要用法是绑定属性,动态更新HTML元素上的属性;
...
...
标题
var app = new Vue({
el: '#app',
data: {
url: 'www.baidu.com',
title: 'bind'
},
})
2、v-on:用于监听DOM事件; 例如:v-on:click v-on:keyup
顺带讲一下方法与事件
2.1 @click 的表达式可以直接使用JavaScript 语句,也可以是一个在Vue 实例中methods 选项内的函数名,可以在方法中传递参数
...
... //是一个方法名
一段文本
点击隐藏文本 //直接是一个内联的语句
Add 1
var app = new Vue({
el: '#app',
data:{
show: true,
counter: 0
},
methods: {
doSomething: function(){
console.log(this.title);
},
}
})
2.2方法与事件:
Vue 提供了一个特殊变量$event ,用于访问原生DOM 事件,可以阻止事件冒泡或者阻止链接打开
写一个阻止冒泡的例子:
阻止冒泡