Vue 2.0学习（三）指令与事件

　　指令（Directives）是Vue.js模板中最经常使用的一项功能，它带有前缀v-，前面已经使用过v-html、v-pre等。指令的主要职责就是当表达式的值改变时，相应地将某些行为应用到DOM上。

 

v-if

<!-- html -->
<div id="app">
    <p v-if="show">显示这段文本</p>
</div>

//JS
var app = new Vue({ el: '#app', data: { show:true } })

　　当数据show的值为true时，p元素会被插入，为false时则会被移除。

 

v-bind

　　v-bind的基本用途是动态更新HTML元素上的元素，好比id、class等。

<!-- html -->
<div id="app">
    <a v-bind:href="url">连接</a>
    <img v-bind:src="imgUrl">
</div>

//JS
var app = new Vue({ el: '#app', data: { url: 'https://www.github.com' imgUrl: 'http://xxx.xxx.xx/img.png' } })

 

v-on

　　v-on用来绑定时间监听器，作一些事件交互。

<!-- html -->
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">点击隐藏</button>
</div>

//JS
var app = new Vue({ el: '#app', data: { show:true }, methods:{ handleColse: function() { this.show = false; } } })

　　在button按钮上，使用v-on:click给该元素绑定了一个点击事件，在普通元素上，v-on能够监听原生的DOM事件，除了click外，还有dblclick、keyup、mousemove等。

　　表达式除了方法名，也能够直接是一个内联语句。

<!-- html -->
<div id="app">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="show = false">点击隐藏</button>
</div>

//JS
var app = new Vue({ el: '#app', data: { show:true } })

　　若是绑定的事件要处理复杂的业务逻辑，建议仍是在methods里声明一个方法，这样可读性更强也更好维护。

　　Vue.js将methods里的方法也代理了，因此也能够像访问Vue数据那样来调用方法。

//JS
var app = new Vue({ el: '#app', data: { show:true }, methods:{ handleColse: function() { this.close(); }, close: function(){ this.show = false; } } })

 

语法糖

　　语法糖是指在不影响功能的状况下，添加某种方法实现一样的效果，从而方便开发程序。

　　Vue.js的v-bind和v-on指令都提供了语法糖，也能够说是缩写，好比v-bind,能够省略v-bind，直接写一个冒号":"。

<a v-bind:href="url">连接</a>
<img v-bind:src="imgUrl">
<!-- 缩写为 -->
<a :href="url">连接</a>
<img :src="imgUrl">

　　v-on能够直接用"@"来缩写

<button v-on:click="handleClose">点击隐藏</button>
<!-- 缩写为 -->
<button @click="handleClose">点击隐藏</button>