Gauss Zhou

# 数据和模板渲染

# 模板语法

# 插值

  1. 文本

数据绑定最常见的形式就是使用“Mustache”语法，即双大括号，例如：

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

使用v-once指令，可以执行一次性插值，当数据改变时，插值处的内容不会更新。

<span v-once>这个将不会改变: {{ msg }}</span>
  1. 原始 HTML

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

var vm = new Vue({
el: "#app",
data: {
rawHtml: "<this should be red>HTML</<this should be red>",
},
});

<template>
  <p>Using mustaches: {{ rawHtml }}</p>
  <p>
    Using v-html directive:
    <span v-html="rawHtml"></span>
  </p>
</template>

Using mustaches: <this should be red>HTML</<this should be red>
Using v-html directive: HTML

注意，清只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值，因为它很容易导致 XSS 攻击。

  1. Attribute

双大括号的 Mustache 语法不能作用在 HTML 属性上，遇到这种情况应该使用v-bind指令

<template>
  <button v-bind:disabled="isButtonDisabled">Button</button>
</template>
  1. 使用 JavaScript 表达式

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

<template>
  <div>
    {{ number + 1 }}
    {{ ok ? "YES" : "NO" }}
    <div v-bind:id="'list-' + id"></div>
    {{ message.split("").reverse().join("") }} //颠倒字符串
  </div>
</template>

# 指令

指令是带有v-前缀的特殊 attribute，指令 attribute 的值预期是单个 JavaScript 表达式，例如

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

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

  1. 参数

    一些指令能够接受一个“参数”，在指令名称之后以冒号表示，例如

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

    这里通过 v-bind 指令将参数——HTML 标签的 href 属性和表达式 url 的值绑定

  2. 动态参数

    可以用方括号括起来的 JavaScript 表达式作为参数，具体参数跟随表达式的值变化

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

  3. 修饰符

# 缩写

  1. v-bind 缩写 :
  2. v-on 缩写 @

# 计算属性和侦听器

# 计算属性

模板内的表达式非常便利，但是设计初衷是用于简单计算的，当面对复杂逻辑的时候，应当使用计算属性。

  1. 基础例子
<div id="example">
  <p>Original message:"{{message}}"</p>
  <p>Computed reversed message:"{{reversedMessage}}"</p>
</div>

var vm = new Vue({
  el: "#example",
  data: {
    message: "hello"
  },
  computed: {
    reversedMessage: function () {
      return this.message.aplit("").reverse().jion("");
    }
  }
});
  1. 计算属性缓存 VS 方法

我们可以将统一函数定义为一个方法而不是一个计算属性。两种方式的最终结果却是是完全相同的。然而，不同的计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新请求

  1. 计算属性 VS 侦听属性

Vue 提供了一种更通用的方式 watch 来观察和响应 Vue 实例上的数据变动：侦听属性，但是当你有一些数据需要随着其他数据变动儿变动时，你很容易滥用 watch

  1. 计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

# 侦听器

​虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。

# 数据绑定

# Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们，不过字符串拼接麻烦且易错，因此在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

# 绑定 HTML Class

  1. 对象语法

我们可以传给 v-bind:class 一个对象，以动态的切换 class

<div v-bind:class="{active:isActive,current:isCurrent}"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性isActive的truthiness，v-bind 可以与普通的 class 属性共存

  1. 数组语法

我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

<div v-bind:class="[activeClass, errorClass]"></div>
  1. 用在组件上

当在一个自定义组件上使用 class 属性是，这些 class 将被添加到该组件的根元素上，这个元素上已经存在的 class 不会被覆盖。

Vue.component("my-component", {
  template: '<p class="foo bar">Hi</p>'
});

<my-component class="baz boo"></my-component>

# 绑定内联样式

  1. 对象语法
<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    // 这里使用正常的js来描述style
    color: 'red',
    fontSize: '13px'
  }
}
  1. 数组语法

v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>
  1. 自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀 (opens new window)的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

  1. 多重值

从 2.3.0 开始可以为 style 绑定的属性提供一个包含多个值得数组，常用与提供多个带前缀的值，这样只会渲染数组中最后一个被浏览器支持的值

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

模板语法
插值
指令
缩写
计算属性和侦听器
计算属性
侦听器
数据绑定
Class 与 Style 绑定
绑定 HTML Class
绑定内联样式