vue.js实战学习——指令与事件

Posted 2020-10-17

 注：此内容摘抄自：梁灏的《Vue.js实战》

1.指令是Vue.js模版中最常用的一项功能，它带有前缀 v- ，比如：v-if , v-html ，v-pre 等。指令的主要职责就是当其表达式的值改变时，相应的将某些行为应用到DOM上。

<div class="app1">
    <p v-if="show">哈喽？</p>
</div>
var app=new Vue({
    el:‘.app1‘,
    data:{
        show:true
    }
});

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

Vue.js内置了很多指令，帮我们快速完成常见的DOM操作，比如循环渲染、显示与隐藏等。

2.v-bind

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

<div class="app3">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">{{show?"点击隐藏":"点击显示"}}</button>
</div>

var app2=new Vue({
    el:‘.app2‘,
    data:{
        url:‘http://baidu.com‘,                                        
        imgUrl:‘https://tpc.googlesyndication.com/pagead/imgad?id=CICAgKDroa7gpwEQ2AUYWjIIi8qo2d6gtwQ‘
    }
});

3.v-on 

v-on是用来绑定事件监听器，这样我们可以做一些交互了：

<div class="app3">
    <p v-if="show">这是一段文本</p>
    <button v-on:click="handleClose">{{show?"点击隐藏":"点击显示"}}</button>
</div>

var app3=new Vue({
    el:‘.app3‘,
    data:{
        show:true
    },
    methods:{
        handleClose:function(){
            if(this.show){
                this.show=false;
            }else{
                this.show=true;
            }
                        
        }
    }
})

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

表达式除了方法名，也可以直接是一个内联语句：<button v-on:click="show=flase">点击隐藏</button>

4.语法糖

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

Vue.js的v-bind和v-on指令都提供了语法糖，也可以说是缩写，比如v-bind，可以省略v-bind，直接写一个冒号“：”

<img v-bind:src="imgUrl"  />
可以改写成
<img :src="imgUrl"  />

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

<button v-on:click="handleClose">{{show?"点击隐藏":"点击显示"}}</button>
可以缩写成：
<button @click="handleClose">{{show?"点击隐藏":"点击显示"}}</button>