第二章.vue.js-指令与事件（基础篇）

作者: 六个周 | 来源:发表于2018-07-13 19:48 被阅读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>