Vue.js---指令与事件、语法糖

浅浅的花香味﹌ 2021-08-13 22:19 384阅读 0赞

#### 指令与事件 ####

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

**v-if:**

<div id="app">
        <p v-if="show">显示这段文本</p>
    </div>
    <script> var app = new Vue({ el: '#app', data: { show: true } }); </script>

当数据show的值为true时，p元素会被插入，为false时则会被移除。数据驱动DOM是Vue.js的核心理念，所以不到万不得已时不要主动操作DOM，只需要维护好数据，DOM事Vue会帮我们处理。

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

<div id="app2">
        <a v-bind:href="url">链接</a>
        <img v-bind:src="imgUrl">
    </div>
    <script> var app1 = new Vue({ el: '#app2', data: { url:'https://www.baidu.com', imgUrl:'http://xxx.xxx.xx/img.png' } }); </script>

链接地址与图片的地址都与数据进行了绑定，当通过各种方式改变数据时，链接和图片都会自动更新。

**v-on：**  
v-on用来绑定事件监听器。

<div id="app3">
        <p v-if="show">这是一段文本</p>
        <button v-on:click="handleClose">点击隐藏</button>
    </div>
    <script> var app3 = new Vue({ el: '#app3', data: { show: true }, methods: { handleClose: function () { this.show = false; } } }); </script>

在button按钮上，使用v-on:click给该元素绑定了一个点击事件，在普通元素上，v-on可以监听原生的DOM事件，除了click外，还有dblclick、keyup、mousemove等。表达式可以是一个方法名，这些方法都写在Vue实例的methods属性内，并且是函数的形式，函数内的this指向的是当前Vue实例本身，因此可以使用this.xxx的形式访问或修改数据。

Vue.js将methods里的方法也代理了，所以也可以像访问Vue数据那样来调用方法：

在handleClose方法内，直接通过this.close()调用了close()函数。在上面示例中是多此一举的，只是用于演示它的用法，在业务中会经常用到，例如以下几种用户都是正确的：

#### 语法糖 ####

语法糖是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。  
Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bing，可以省略v-bind，直接写一个冒号“：”。

v-on可以直接用“@”来缩写：