Vue模板语法总结

文本

数据绑定最常见的方式就是使用“Mustache”语法(两个大括号{{ }})的文本插值

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

Mustache标签将会被替代为对应数据对象msg的值,无论何时,绑定的数据对象上msg属性发生变化,插入处的内容都会更新。

通过v-once指令,执行一次性的插入,当数据改变时,插入处的值不会更新。但他会影响其他标签元素的数据绑定:

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

使用javascript表达式

对于所有的数据绑定,vue都提供了完全的javascript表达式的支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在Vue实例数据作用域下作为javascript被解析。

有个限制就是每个绑定都只能包含单个表达式。所以下面的例子都不会生效

<div id="app">
<!-- 支持三目运算符 -->
{{ 1 > 2 ?'真':'假' }} <!--
不支持变量声明
{{ var a = 10}} 不支持if{{ if(ok) { return "哈哈" }}}
-->
<!--
但是三目运算可以访问用户的全局变量
-->
{{ ok ? '哈哈' : "呵呵s"}} </div>
const app = new Vue({
el:"#app",
data:{
ok:true,
}
})

由于模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如Math和Date。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论)。

指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式的作用于DOM

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

这里v-if指令将根据seen的值真假来插入/移除元素。

参数

一些指令能够接受一个参数,在指令名称之后以冒号表示,例如,v-bind指令可以用于响应式地更新HTML特性。

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

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

另一个例子是v-on,它用于监听DOM事件

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

在这里参数是监听的事件名.

缩写

v-bind的缩写是一个冒号(

上一篇:Controller类的方法上的RequestMapping一定要写在Controller类里吗?


下一篇:Get it,你离几何达人不远了!