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>

 

热门相关:最强狂兵   仗剑高歌   薄先生,情不由己   最强装逼打脸系统   横行霸道