第二章.vue.js-指令与事件(基础篇)
数据驱动DOM是vue.js的核心理念,不到万不得已的时候不要主动操作DOM,我们只需要维护好数据,DOM的事vue会帮我们优雅的进行处理。
本章节我们来学习v-bind与v:on
首先,我们要了解到v:bind可缩写为:,v:on可缩写为@
v:bind的基本用途是动态的更新HTML元素上的属性,比如id,class等。
代码了解v:bind用法
<div id="lmz">
<a v-bind:href="url">链接<a>
<img v-bind:src="imgUrl">
</div>
<script>
var lmz = new Vue({
el:"#lmz",
data:{
url:"http://lmzlyl.club“,
imgUrl:"http://lmzlyl.club/img/lmz.png"
}
})
<script>
解释:示例中的链接地址与图片的地址都与数据进行了绑定,当通过各种方式改变数据时,链接和图片都会自动更新。
代码熟悉v:on的用法
<div id="lmz">
<p v-if="show">我是六个周<p>
<button v-on:click="handleClose">隐藏</button>
</div>
<script>
var lmz = new Vue({
el:"lmz",
data:{
show:true
}
methods:{
handleClose:function(){
this.show=false;
}
}
})
</script>
除了click外,还有dbclick、keyup、mouseover等。
(以后所有示例v:bind与v:on指令将默认使用:和@写法)
下一节开始学习计算属性。