vue_指令与事件
vue的指令通常带有前缀v-,它的主要职责是当其表达式的值改变时，相应地将某些行为应用到DOM上。
v-bind指令
" v-bind指令的基本用途就是动态更新HTML元素上的属性，比如id、class等。 "
代码示例
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<script type="text/javascript" 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脚本-->
<script>
var app = new Vue({
el: '#app',
data: {
url:'https://github.com/',
imgUrl:'https://t8.baidu.com/it/u=3660968530,985748925&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=5e64af964be378c6c2a3b0acc65dfe24'
}
})
</script>
</body>
</html>
运行结果：
v-bind使用
v-on指令
v-on指令用于绑定事件监听器。
在button按钮上，使用v-on:click 给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dblclick,keyup,mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前vue实例本身，因此可以直接使用this.xxx的形式来访问或修改数据。
代码示例
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
<p v-if="show">{{msg}}</p>
<button v-on:click="handleClose">点击隐藏</button>
</div>
<!--script脚本-->
<script>
var app = new Vue({
el: '#app',
data: {
show: true,
msg:' 在button按钮上，使用v-on:click 给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有\n' +
' dblclick,keyup,mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前vue实例本身，\n' +
'\n' +
' 因此可以直接使用this.xxx的形式来访问或修改数据。'
},
methods:{
handleClose: function () {
this.show=false;
}
}
})
</script>
</body>
</html>
运行结果：
v-on
点击后
