搜索
您的当前位置:首页正文

2017/09/13 VUE模板语法

来源:知库网

一. 模板语法

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

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

二.插值方法

1. 文本插值

使用“Mustache”语法 (双大括号) 的文本插值

Message: {{ msg }}

无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。

2. 通过v-once指令,只进行一次插值,当数据值改变值,插值出的内容不会改变,但这会影响到该节点上的所有数据绑定

<span v-once>这个将不会改变: {{ msg }} </ span>

3. 原始HTML

双大括号输出的是扑通文本,不能输出HTML标签,为了输出原始HTML标签,使用v-html指令

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

div标签将会替换为属性值rawHtml,直接作为HTML, 他会忽略属性值里的数据绑定

4. Mustache语法不能作用在html标签的特性上,可以使用v-bind指令

<button v-bind;disabled="isButtondisabled">BUTTON</button>

5. 使用JavaScript表达式

Vue.js 都提供了完全的 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 } }}      // 流控制,使用三元运算

三. 指令

指令 (Directives) 是带有v-前缀的特殊属性。指令属性的值预期是单个 JavaScript 表达式(v-for是例外情况,稍后我们再讨论)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。回顾我们在介绍中看到的例子:

<p v-if="seen">现在看到我啦</p>

将根据seen传入的值判断p标签的插入和删除

1. 参数

一些指令能够接收一个参数(v-bind /  v-on)

指令冒号后面的就是参数,v-bind后面的参数可以用于响应式的更行HTML标签的属性

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

将href 属性与url数据进行动态绑定

v-on 用于绑定DOM监听事件

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

2. 修饰符

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

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

Top