vue.js中指令的作用是什么？

vue.js中指令的作用是什么？

指令（Directives）带有前缀 v- ，比如 v-if、v-html、v-pre 等。指令的作用是当表达式的值改变时，相应地将某些行为应用到 DOM 上。

我们以 v-if 为例：

html：

<div id="app">
    <p v-if="show">显示</p>
</div>

js：

<script>
    var app=new Vue({
       el:'#app',
       data:{
           show:true
       }
    });
</script>

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

Vue.js 的核心理念是数据驱动 DOM，所以我们只需维护好数据，剩下的事交给 Vue 就好啦O(∩_∩)O~

1、v-bind

v-bind 会动态更新 HTML 元素上的属性。

html：

<div id="app2">
    <a v-bind:href="url">人工智能画作拍卖 作品签名是数学方程式</a><p></p>
    <img v-bind:src="imgUrl" width="50%" height="50%">
</div>

js：

var app2=new Vue({
    el:'#app2',
    data:{
    url:'http://news.163.com/photoview/00AO0001/2297321.html#p=DV5FFQOV00AO0001NOS',
    imgUrl:'http://pic-bucket.nosdn.127.net/photo/0001/2018-10-27/DV5FFQOV00AO0001NOS.jpg-600'
    }
});

效果：

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

2、v-on

v-on 用于绑定事件监听器。

html：

<div id="app3">
    <p v-if="show">显示</p>
    <button v-on:click="hide">点击隐藏</button>
</div>

js：

var app3 = new Vue({
    el: '#app3',
    data: {
        show: true
    },
    methods: {
        hide: function () {
            this.show = false;
        }
    }
});

效果：

在 button 按钮上，使用 v-on:click 给该元素绑定了一个点击事件。

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

表达式也可以是一个内联语句：

html：

<div id="app4">
    <p v-if="show">显示</p>
    <button v-on:click="show=false">点击隐藏</button>
</div>

js：

var app4 = new Vue({
    el: '#app4',
    data: {
        show: true
    }
});

效果与上例相同。

如果要绑定的事件必须处理复杂的业务逻辑，那么建议在 methods 里声明方法来实现，因为这样可读性更好也方便维护。

3、调用 methods 中定义的方法

Vue.js 代理了 methods 中定义的方法，所以我们可以像访问 Vue 数据那样来调用方法。

js：

var app5 = new Vue({
    el: '#app5',
    data: {
    },
    methods:{
        init:function (val) {
            console.log(val);
        }
    },
    mounted:function () {
        this.init('初始化操作');
    }
});
app5.init("初始化页面");

效果：

4、指令缩写

指令缩写也称为语法糖，它指的是：在不影响功能的前提下，添加某种方法实现同样的效果，从而方便程序开发。

v-bind 和 v-on 指令都提供了缩写。

比如之前的例子可以缩写为：

html：

<div id="app2">
    <a :href="url">人工智能画作拍卖 作品签名是数学方程式</a>
    <p></p>
    <img :src="imgUrl" width="50%" height="50%">
</div>
<div id="app3">
    <p v-if="show">显示</p>
    <button @click="hide">点击隐藏</button>
</div>

建议使用缩写形式，这样代码更简洁哦O(∩_∩)O~

更多web前端开发知识，请查阅 HTML中文网 ！！

以上就是vue.js中指令的作用是什么？的详细内容，更多请关注0133技术站其它相关文章！