vue.js实战

第二章.vue.js-指令与事件(基础篇)

2018-07-13  本文已影响54人  六个周

数据驱动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指令将默认使用@写法)

下一节开始学习计算属性


上一章:vue.js-过滤器(基础篇)

下一章:vue.js-计算属性(基础篇)

上一篇 下一篇

猜你喜欢

热点阅读