Vue 指令与事件
指令，Directives，Vue 模板中最常用的一项功能。
它带有 v- 前缀，如：v-if，v-html，v-pre等。
主要职责是，当其表达式的值改变时，相应地将某些行为应用到DOM上。
以 v-if 为例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">显示这段文本</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
上述代码将转化为：
<html><head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"><p>显示这段文本</p></div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body></html>
而当下面的代码时：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">显示这段文本</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: false
}
})
</script>
</body>
</html>
则转化为：
<html><head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"><!----></div>
<script>
var app = new Vue({
el: '#app',
data: {
show: false
}
})
</script>
</body></html>
v-bind，动态更新HTML 元素上的属性，比如：id、class等
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">链接</a>
<img v-bind:src="imgUrl">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.github.com',
imgUrl: 'http://xxx.xxx.xx/img.png'
}
})
</script>
</body>
</html>
转化为：
<html><head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app"><a href="https://www.github.com">链接</a> <img src="http://xxx.xxx.xx/img.png"></div>
<script>
var app = new Vue({
el: '#app',
data: {
url: 'https://www.github.com',
imgUrl: 'http://xxx.xxx.xx/img.png'
}
})
</script>
</body></html>
v-on，绑定事件监听器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClose: function () {
this.show = false
}
}
})
</script>
</body>
</html>
在 button 按钮上，使用 v-on:click 给该元素绑定一个点击事件。
在普通元素上，v-on可以监听原生的 DOM 事件，除了 click 外，还有 dblclick、keyup、mousemove等。
表达式可以是一个方法名，这些方法都写在Vue实例的methods 选项内，函数形式，函数内的this指向的是当前Vue实例本身，因此可以直接使用 this.xxx 的形式来访问或修改数据。
表达式除了方法名外，也可以直接是一个内联语句，如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="show = false">点击隐藏</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>
vue 将 methods 里的方法也代理了，所以也可以像访问 Vue数据那样来调用方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">这是一段文本</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClose: function () {
this.close()
},
close: function () {
this.show = false
}
}
})
</script>
</body>
</html>
正确的使用，上面只是展示用法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
show: true
},
methods: {
init: function (text) {
console.log(text)
}
},
mounted : function () {
this.init('在初始化时调用')
}
})
app.init('通过外部调用')
</script>
</body>
</html>