Vue基础知识

模板语法

文本插值（text interpolation）

最基本的数据绑定形式，使用“Mustache”语法即{{...}}

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

{{}}中的值会被替换为相应组件实例中msg属性的值，且会同步地更新

原始HTML

<p>Message:<span v-html="msg"></span></p>

这里的v-html被称为指令

Attribute绑定

双大括号不能在HTML Attributes中使用，因此想要响应式地绑定属性应该使用v-bind指令

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

v-bind可简写为

<div :id="dynamicId"></div>

布尔型Attribute

依据布尔值决定属性是否应该存在于该元素之上

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

 动态绑定多个值

假设有这样一个包含多个属性的js对象

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

通过不带参数的 v-bind，你可以将它们绑定到单个元素上

<div v-bind="objectOfAttrs"></div>

使用JavaScript表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>

在vue模板中js表达式可以被应用于如下场景：

（1）在文本插值中（2）在Vue指令的属性值中

 注意：每个绑定仅支持单一表达式

例：如下用法都是无效的

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}
<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

可在绑定的表达式中使用一个组件暴露的方法

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

 指令Directives

一个指令的任务是在其表达式的值变化时响应地更新DOM

 例：v-if会基于seen的布尔值来动态移除/插入该p元素

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

参数Arguments

某些指令需要“参数”，如v-bind响应式更新html属性

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

再如v-on监听DOM事件（@是v-on:的缩写）

<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>

动态参数

在指令参数上可以使用JS表达式，需包含在[ ]内

<!--注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

即如果组件实例中有一个属性attributeName且值为“href”，则这个绑定等价于v-bind:href="url"

同样还可以将一个函数绑定到动态变化的事件名称上

<a v-on:[eventName]="doSomething"> ... </a>
<!-- 简写 -->
<a @[eventName]="doSomething">

当evenntName的值为“focus”时，该绑定等价于v-on:focus="doSomething"

注：动态参数值的限制

（1）动态参数表达式不能使用如空格和引号这种在HTML属性名中不合法的字符，如

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

那么当我们需要传入一个较为复杂的动态参数时，可以使用计算属性

（2）当使用DOM内嵌模板（直接写在HTML文件里的模板）时，名称要避免使用大写字母，因为浏览器会强制转换为小写，如：

<a :[someAttr]="value"> ... </a>

这里的:[someAttr]将被解析为:[someattr]

修饰符Modifiers

以点开头的特殊后缀，表明指令需要以一些特殊方式被绑定

如下面的例子中 .prevent 告诉v-on指令对触发的事件调用event.preventDefault()

<form @submit.prevent="onSubmit">...</form>