Vue.js学习记录——三

插值

文本

数据绑定采用双大括号形式<span>Message:{{message}}</span>

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

通过使用v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新,但是需要注意这样是否会影响该节点上的其他数据：

<span v-once>{{message}}</span>

原始HTML

双大括号代表文本，里边的html标签不会被识别，会直接输出在网页上，为了输出html代码就需要使用v-html

例如：

<p>
    直接使用大括号{{message}}
</p>
<p>使用v-html指令: <span v-html="message"></span></p>

运行结果：

[外链图片转存失败(img-Izt8oEFM-1562728240682)(F:\Vue学习记录\img\TIM截图20190709170033.png)]

特性

Mustache不能用作html特性上，这个时候就可以使用v-bind指令

对于布尔特性 (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

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

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 <button> 元素中。

JavaScript表达式

迄今为止，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'Yes' : 'No' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id "></div>

每个表达式都会被作为JavaScript被解析。每个绑定只能包含单个表达式。

指令

指令时一些带有v-前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 例外）

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

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

参数

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

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

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

另一个例子是 v-on 指令，它用于监听 DOM 事件：

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

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

动态参数

• 从2.6版本开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数：

  <a v-bind:[attributeName] = "url">.....</a>
  

  这里的attributeName会被作为一个JavaScript表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的Vue实例有一个data属性attributeName，值为"href"，那么这个绑定将等价于v-bind:href。

  同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

  <a v-on:[eventName]="doSomething"> ... </a>
  

  同样地，当 eventName 的值为 "focus" 时，v-on:[eventName] 将等价于 v-on:focus。

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，例如空格和引号，放在 HTML 特性名里是无效的。同样，在 DOM 中使用模板时你需要回避大写键名。

例如，下面的代码是无效的：

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

另外，如果你在 DOM 中使用模板 (直接在一个 HTML 文件里撰写模板)，需要留意浏览器会把特性名全部强制转为小写：

<!-- 在 DOM 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

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

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

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的特性。当你在使用 Vue.js 为现有标签添加动态行为 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序时，v-前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

• v-bind缩写

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

• v-on缩写

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

…

- v-on缩写

```html
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>