【vue】模板语法( v-系列/{{}} )

[Kelichao]

模板语法

在元素中间嵌入时用{{ }}，在属性中使用时需要用v-bind

使用的是Mustache双大括号语法

• 普通文本

<!--普通渲染写法 -->
<span>Message: {{ msg }}</span>
<!-- 一次性渲染-->
<span v-once>Message: {{ msg }}</span>

• 纯HTML

<div v-html="rawHtml"></div>
<!--展示字符串-->
<div v-html="'你好'"></div>

• 属性
  Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令

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

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

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

• 可以使用js表达式

{{ number + 1 }}// +1
{{ ok ? 'YES' : 'NO' }}// 三元表达式
{{ message.split('').reverse().join('') }}// 执行连缀的JS语法
<div v-bind:id="'list-' + id"></div>// 在绑定数据的输出值之前加上list字符串

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

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式

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

• 参数

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

<!-- v-bind 指令被用来响应地更新 HTML 属性：-->
<a v-bind:href="url"></a>

 <!-- v-on 指令，它用于监听 DOM 事件：-->

• 修饰符

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

<!-- v-on 指令对于触发的事件调用 event.preventDefault() -->
<form v-on:submit.prevent="onSubmit"></form>

• 过滤器

过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示，过滤器的作用可以是比如本来是20->￥20.00。相当于格式化数据。

{{数据字段 | 过滤器名称}}
{{ message | capitalize }}
// 可以串联
{{ message | filterA | filterB }}
// 可以接受参数
{{ message | filterA('arg1', arg2) }}

• 缩写

v-bind缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>