Vue.js 3.x高效前端开发（视频教学版）最新章节_李小威著

3.5　指令

指令（Directives）是带有“v-”前缀的特殊特性。指令特性的值预期是单个JavaScript表达式（v-for是例外情况）。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

例如下面代码中，v-if指令将根据表达式布尔值（boole）的真假来插入或移除<p>元素。

    <p v-if="boole">现在你可以看到我了</p>

1. 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind指令可以用于响应式地更新HTML特性：

    <a v-bind:href="url">...</a>

在这里href是参数，告知v-bind指令将该元素的href特性与表达式url的值绑定。

v-on指令用于监听DOM事件，例如下面代码：

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

其中参数click是监听的事件名，在后面章节中将会详细介绍v-on指令的具体用法。

2. 动态参数

从Vue 2.6.0版本开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数：

    <a v-bind:[attributeName]="url"> ... </a>

这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，在Vue实例的data选项有一个attributeName属性，其值为“href”，那么这个绑定等价于v-bind:href。

同样地，可以使用动态参数为一个动态的事件名绑定处理函数：

    <a v-on:[eventName]="doSomething"> ... </a>

在这段代码中，当eventName的值为“click”时，v-on:[eventName]将等价于v-on:click。

下面看一个示例，其中用v-bind绑定动态参数attr，v-on绑定事件的动态参数things。

【例3.9】动态参数（源代码\ch03\3.9.html）。

    <div id="app">
       <p><a v-bind:[attr]="url">百度链接</a></p>
       <p><button v-on:[things]="doSomething">单击事件</button></p>
     </div>
    <!--引入vue文件-->
    <script src="https://unpkg.com/vue@next"></script>
    <script>
        //创建一个应用程序实例
       const vm= Vue.createApp({
            //该函数返回数据对象
            data(){
              return{
                  attr: 'href',
                  things: 'click',
                  url: 'baidu.com'
               }
            },
             //在选项对象的methods属性中定义方法
            methods: {
                doSomething: function() {
                    alert('触发了单击事件！')
                }
            }
           //在指定的DOM元素上装载应用程序实例的根组件
         }).mount('#app');
    </script>

在谷歌浏览器中运行程序，在页面中单击“单击事件”按钮，弹出“触发了单击事件！”，结果如图3-12所示。

图3-12　动态参数

对动态参数的值的约束：动态参数预期会求出一个字符串，异常情况下值为null。这个特殊的null值可以被显性地用于移除绑定。任何其他非字符串类型的值都将会触发一个警告。

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在HTML属性名里是无效的。例如：

    <!--这会触发一个编译警告-->
    <a v-bind:['foo' + bar]="value">...</a>

所以不要使用带空格或引号的表达式，或者用计算属性替代这种复杂表达式。

3. 事件修饰符

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

    <form v-on:submit.prevent="onSubmit">...</form>

3.5 指令

3.5　指令