Vue.js入门与商城开发实战
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.8　Vue.js指令总结

Vue.js的常用指令如表2-1所示。

表2-1　Vue.js指令概览

2.8.1　基础用法

指令（directive）是Vue.js模板中最常用的一项功能，带有前缀v-，在前面我们已经介绍了一些指令，比如v-html、v-once、v-bind等。指令的主要职责是，当其表达式的值改变时，相应地将某些行为应用到DOM上；我们可以将指令看作特殊的html特性。

下面，我们通过if指令来判断某些内容是否显示。

1）我们在data代码块中定义两个布尔型变量：xianshi：true和buxianshi：false。

2）我们在html视图代码块中结合变量和v-if指令。代码如下：

<!--属性的值xianshi为true，则下面段落显示-->
<p v-if="xianshi">使用了if指令，显示内容</p>

<!--属性的值buxianshi为false，则下面段落不显示-->
<p v-if="buxianshi">使用了if指令，这里的内容不显示</p>

完整示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中的指令</title>
    <!--加载本地Vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">

         <!--属性的值xianshi为true，则下面段落显示-->
         <p v-if="xianshi">使用了if指令，显示内容</p>

         <!--属性的值buxianshi为false，则下面段落不显示-->
         <p v-if="buxianshi">使用了if指令，这里的内容不显示</p>

    </div>
    
    <script>
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            xianshi:true, 
            //定义布尔型变量，不能添加双引号或者单引号；
            //后面还有数据，则这里定义完毕后面需要跟上逗号“，”
            buxianshi:false
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    })
    </script>
</body>
</html>

效果如图2-6所示。

图2-6　Vue.js中的指令基础用法

2.8.2　指令参数

参数在指令后以冒号指明。对于html的属性来讲，冒号后面跟的是html原来的属性。

下面我们在示例中使用后面跟参数的v-bind指令来演示网址的打开、图片的下载、点击事件的调用。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue.js中的指令</title>
    <!--加载本地vue.js的框架-->
    <script src="vue2.2.2.min.js"></script>
</head>
<body>
    <!--定义div代码块的id的值，这里定义的值为app，后面Vue会使用该值-->
    <div id="app">

        <!--打开一个到淘宝的页面，网址通过参数的形式传递-->
        <a v-bind:href="wangzhi" v-bind:target="target">去淘宝网</a><br>

        <!--加载一个图片，图片的地址通过参数传递-->
        <img v-bind:src="tupiandizhi" width="50"></img><br>

        <!--按钮的点击事件通过参数传递来执行-->
        <button v-on:click="mybt01()">使用Vue.js语法的按钮</button>
    
        <hr>
        <!--下面是原生JavaScript调用点击事件-->
        <button onclick="mybt01()" >原生js调用点击事件</button>    
    </div>
    
    <script>
    //下面是Vue.js的代码块-开始
    new Vue({
        el: '#app',//app为前面div代码块的id的值，通过“#”绑定
        //data区域定义属性的值
        data: {
            wangzhi: 'http://www.taobao.com',//定义网址
            //后面还有数据，则这里定义完毕后面需要跟上逗号“，”
            tupiandizhi:'img/v.png',//定义图片地址
            target:'_blank'    //链接在新窗口打开      
            //后面没有数据，则这里定义完毕后面不需要跟上逗号“，”
        }
    }) //Vue.js的代码块-结束
    
      //下面是定义原生JavaScript的函数，在vue.js中可以调用
    function mybt01()
    {
        alert("你好，黄菊华老师！")//弹出提示框
    }    
    </script>
</body>
</html>

效果如图2-7和图2-8所示。

图2-7　页面运行的默认效果图

图2-8　点击按钮后，弹出提示框

在上面的示例中，href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

上面的示例中，v-on指令用于监听DOM事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

2.8.3　指令缩写

Vue.js为两个最为常用的指令v-bind和v-on提供了特别的缩写形式，示例代码如下：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

2.8.4　修饰符

修饰符是以半角句号“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault（）。示例代码如下：

<form v-on:submit.prevent="onSubmit"></form>
上一章目录下一章