首页 > 代码库 > 模板语法

模板语法

2024-09-14 05:06:36   216人阅读

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="http://www.mamicode.com/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 = http://www.mamicode.com/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=http://www.mamicode.com/"url"></a>
<!-- 缩写 -->
<a :href=http://www.mamicode.com/"url"></a>
 
5.2v-on缩写：
<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
 
总结：
1.插入值
 插入文本、插入结构
2.属性
 绑定值给模板、对ja表达式的支持，但是不支持流程控制语句
3.指令
 指令参数、指令修饰符、指令修饰符
4语法缩写

模板语法


联系
我们