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>

//以下报错：

{{ 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>