vue基础三

发表于 | 分类于

vue模板语法

文本

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

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

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

纯HTML

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

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

这个 div 的内容将会被替换成为属性值 rawHtml，直接作为 HTML —— 数据绑定会被忽略

属性

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

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

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

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

使用 JavaScript 表达式

对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持

1
2
3
4
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析

指令

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

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

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

元素

参数

v-bind 指令被用来响应地更新 HTML 属性：

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

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

v-on 指令，它用于监听 DOM 事件

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

过滤器

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

1
2
3
4
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

缩写

v-bind 缩写

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

v-on 缩写

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