2020/9/15 vue学习笔记——模板语法：指令

模板语法：指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<div class="app">
	<p v-if="seen">现在你看到我了</p>
</div>

var data={
        msg:"hello World!!",
        seen:true,
        };

var vm=new Vue({
        el:".app",
        data:data,
});

上述例子可知表达式的值为true，执行结果如下：
现在把seen的值改为false，执行结果如下：

页面中什么也看不到，由此验证了指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

指令也可以有参数
一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

   <div class="app">
      <a v-bind:href="url">百度</a>
    </div>

var data={
        url:"http://www.baidu.com"
    };

var vm=new Vue({
        el:".app",
        data:data,
});

这里重点关注<a v-bind:href="url" v-on:click.prevent="a">百度</a>，指令的参数为：href，值为："url"
执行结果如下：

点击百度跳转页面到百度：

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。 下面以.prevent（用来阻止默认事件）修饰符为例：

<div class="app">
      <a v-bind:href="url" v-on:click.prevent="a">百度</a>
      //这里阻止了点击事件的发生，从而点击“百度不能发生跳转”
</div>

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。
v-bind 缩写

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

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

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

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>