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>