模板语法

Posted 2020-09-09 小拽A

1.模板语法

1.1Vue.js 使用了基于 html 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

1.2.在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2.插值

2.1.插文本：

　　数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：

　　　　<span>Message: {{ msg }}</span>

　　通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

　　　　<span v-once>This will never change: {{ msg }}</span>

2.3.插标签

　　双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

　　　　<div v-html="rawHtml"></div>

3.属性

3.1.v-bind指令

　　　　<div v-bind:id="dynamicId"></div>

　　这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

　　　　<button v-bind:disabled="someDynamicCondition">Button</button>

3.2.javascript的支持

　　　　{{ number + 1 }}

 

　　　　{{ ok ? ‘YES‘ : ‘NO‘ }}

 

　　　　{{ message.split(‘‘).reverse().join(‘‘) }}

 

　　　　<div v-bind:id="‘list-‘ + id"></div>

　　这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。（流程控制语句不会生效）

　　<!-- 这是语句，不是表达式 -->

　　　　{{ var a = 1 }}

 

　　<!-- 流控制也不会生效，请使用三元表达式 -->

　　　　{{ if (ok) { return message } }}

4.指令：

　　指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

4.1 v-if：

　　　　<p v-if="seen">Now you see me</p>

　　这里， v-if 指令将根据表达式 seen 的值的真假来移除/插入 <p> 元素。

4.2.指令的参数：

　　一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性

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

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

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

　　在这里参数是监听的事件名。我们也会更详细地讨论事件处理。

4.3.修饰符：修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

　　.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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

4.4过滤器

　　Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示：

　　{{ message | capitalize }}

 

　　<!-- in v-bind -->

　　<div v-bind:id="rawId | formatId"></div>

 过滤器函数总接受表达式的值作为第一个参数。

　　new Vue({

　　　　filters: {

　　　　capitalize: function (value) {

　　　　　　if (!value) return ‘‘

　　　　　　value = value.toString()

　　　　　　return value.charAt(0).toUpperCase() + value.slice(1)

　　　　　　}

　　　　}

　　})

 过滤器可以串联：

　　{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

　　{{ message | filterA(‘arg1‘, arg2) }}

这里，字符串 ‘arg1‘ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

5.缩写

5.1.v-bind缩写

<!-- 完整语法 -->

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

<!-- 缩写 -->

<a :href="url"></a>

 

5.2v-on缩写：

<!-- 完整语法 -->

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

<!-- 缩写 -->

<a @click="doSomething"></a>

 

总结：

1.插入值

 插入文本、插入结构

2.属性

 绑定值给模板、对ja表达式的支持，但是不支持流程控制语句

3.指令

 指令参数、指令修饰符、指令修饰符

4语法缩写