Vue.js基础自学笔记-模板语法

这一篇的学习内容都是模板语法相关的东西，边看API边自己总结，感觉这样记得更清楚一些吧^-^，今天小脑袋瓜也得加油

一、指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式。当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

1.参数

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

• v-bind：响应式的更新HTML特性
• v-on：响应式的监听DOM事件
• ...

2.动态参数 

【2.6.0新增】

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

此处方括号括起来的attributeName会作为指令的参数，作为一个js表达式动态求值，最终结果作为参数来使用。例如，vue实例里面的data属性attributeName的值为"href"，那么，这个绑定就等价于 v-bind:href

再如：

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

这里的eventName如果是focus，那么这也就等价于v-on:focus

【注意】动态参数预期应该是一个字符串类型的值，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。另外，如果在DOM中使用模板的话，需要留意浏览器会强制的将属性名的字母一律改为小写。

3.修饰符

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

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

二、缩写

v- 就相当于一个vue的视觉提示，用来识别模板中Vue的特定的特性，当使用Vue.js为标签添加动态行为时，v- 前缀显得很有用处，但是对于频繁用到的一些特性，使用起来就可能略显繁琐了，所以Vue为v-bind和v-on两个常用指令提供了简写

• v-bind:

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

•  v-on:

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

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