Vuejs --03 模板语法
一、插值
1、文本
<span>{{msg}}</span> //mustache语法
<span v-once>{{msg}}</span> //一次性插值，当数据改变时，不会响应式更新2、纯HTML 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容插值。
<div v-html="rawHtml"></div>3、特性
3.1 mustache 语法不能作用在HTML特性上（也就是只能数据赋值，不能属性赋值，属性赋值用v-bind指令）
3.2 v-bind指令同样适用布尔类型：如果求值结果是 falsy 的值，则该特性将会被删除
4、适用JavaScript表达式
{{num + 1}}
{{num > 0 ? num++ : num}}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>//以下报错：
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
二、指令
1、是带v-前缀的特殊属性，预期是单个JavaScript表达式。指令的职责：当表达式值发生改变时，将其产生的连带影响，响应式地作用于DOM
2、参数：可以是HTML属性，事件名等
<a v-bind:href="url"></a>
<a v-on:click="btnEvent"></a> 3、修饰符 修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>三、过滤器
1、解释：上一个过滤器的输出成为下一个过滤器的输入，然后再次过滤 eg. {{ msg | capitalize }} --> 将输入的字符串转换成大写字母的过滤器。
2、Vuejs允许自定义过滤器，用于一些常见的文本格式化，可以用在两个地方：mustache、v-bind表达式。 过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示
<!-- in mustaches -->
{{ message | capitalize }} // message 结果是 capitalize 的输入
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
<script>
new Vue({
// ...
filters: {
capitalize: function(value) { //value，是上一个过滤器的输出得出的结果，先成为此过滤器的输入，即value=message
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>3、过滤器可以串联
{{ message | filterA | filterB }}4、过滤器可以接受参数（因为过滤器是JavaScript函数）
{{ message | filterA('arg1', arg2) }}四、缩写
<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>腾讯云开发者
