Vue学习笔记（三） - 数据绑定

发表于

插值

最基础的形式：文本插值（将数据解析为纯文本）

Mustache 语法（双大括号）

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

单次插值（不会变化）

<span>This will never change: {{* msg }}</span>
* 要和 { 贴紧，不能有空格

输出 HTML

三括号

<div> {{{ raw_html }}} </div>

注意：

  • 数据绑定将被忽略。
  • 需要复用模版片段，应使用 partials。
  • 动态渲染 HTML 非常危险，易受 XSS 攻击。
  • 只对可信内容插值，永不用于用户提交的内容

表达式

JavaScript 表达式

支持全功能的 JavaScript 表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

但只能支持表达式，赋值语句、条件语句都不可以用
*表达式只在所属的 Vue 实例的作用域内计算

过滤器

一个 JavaScript 函数，用来对表达式的值进行过滤。以“|”隔开。
可以串联：

{{ message | filterA | filterB }}

可以接收参数：

{{ message | filterA 'arg1' arg2 }}

ps. 过滤器的变量 arguments 中，第一个参数为表达式的值，第二个为如上的’arg1’，第三则是 arg2。

指令

形如 v-*，其值限定为绑定表达式。职责是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。
指令在解析后，不会出现在最终渲染的标记中。

参数

部分指令可以在其名称后面带一个参数，以“:”隔开
传入参数可以让指令根据不同参数的情况来采取不同的行为。如：

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

在这里 v-bind 指令将 href 和表达式 url 进行绑定，其实也等于 href=，只不过后者最后也会内部转换为 v-bind 形式。

又如:

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

on 用来监听事件，:后面的“click”就是监听的事件名称。

修饰符

以“.”隔开，跟在指令后面，用来表示指令应当以特殊方式绑定。

缩写

v- 前缀是一个标识，但 Vue.js 为两个常用指令提供了特别的缩写

v-bind

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

v-on

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