指令（Directives）是 Vue.js 模板中最常用的一项功能，它带有前缀v-，在前文我们已经使用过不少指令了，比如 v-if、v-html、v-pre 等。指令的主要职责是当其表达式的值改变时，相应地将某些行为应用到DOM上，以 v-if 为例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>指令与事件</title>
</head>
<body>
<div id="app">
<p v-if="show">显示这段文字</p>
<button v-on:click="handleClose">点击隐藏</button>
<button v-on:click="show = false">点击隐藏2</button>
</div>
<div id="app2">
<!--v-bind 的基本用途是动态更新HTML元素上的属性，比如id、class 等 -->
<a v-bind:href="url">百度一下</a>
<img style="height: 400px; width: 300px;" v-bind:src="imgUrl">
</div>
<!--自动识别最新稳定版本的Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClose:function(){
this.show = false;
}
}
})
</script>
<!--上面还可以这样写：
去除上面的methods方法，直接一个内联语句
<button v-on:click="show = false">点击隐藏</button>
-->
<!--如果绑定的事件要处理复杂的业务逻辑，建议还是在methods里声明一个方法，Vue.js将methods里
方法也代理了，所以也可以想访问Vue数据那样来调用方法
methods:{
handleClose:function(){
this.close();
}，
close:function(){
this.show = false;
}
}
-->
<script>
var app = new Vue({
el:"#app2",
data:{
url:'https://www.baidu.com',
imgUrl:'http://b127.photo.store.qq.com/psb?/440982b8-1f1e-473c-b41d-b630005d5f65/k47uYaiYTmzFY29wd.*P67qQrqqT3MhfQ7PypQE3b4g!/b/dDb0wUsuBAAA&bo=gALEA1IDAAUBKB4!&rf=viewer_4'
}
})
</script>
</body>
</html>
指令与事件.png
网友评论