基础

介绍

是什么

• 是一套用于构建用户界面的渐进式框架

声明式渲染

{{ message }}


var app = new Vue({
  el: ‘#app‘,
  data: {
    message: ‘Hello Vue!‘
  }
})

vue 实例

var vm = new Vue({
  // 选项
})

• 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

数据与方法

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
// 改变 vm.a 或者 data.a 都会使视图发生响应
vm.a == data.a // => true

• 注意：只有当实例被创建时 data 中存在的属性才是响应式的。所以之后才使用的属性一开始它为空或不存在，那么仅需要设置一些初始值即可。
• 这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。
• 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。eg: $el、$data、$watch 等。

实例生命周期钩子

• 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch(‘a‘, newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例 

模板语法

• Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

文本

• 使用“Mustache”语法 (双大括号) 的文本插值
• 通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

这个将不会改变: {{ msg }}

原始 HTML（不要使用，仅供了解）

• 注：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

特性

• Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令。
• 在布尔特性的情况下，它们的存在即暗示为 true，v-bind 工作起来略有不同，如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 特性甚至不会被包含在渲染出来的 元素中。

Button

使用 JavaScript 表达式

• 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
• 注意：每个绑定都只能包含单个表达式。

{{ var a = 1 }}


{{ if (ok) { return message } }}

• 注意：模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

参数

• 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。eg:v-bind 与 v-on

修饰符

• 修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

...

缩写

• v-bind (:) 与 v-on (@)

计算属性和侦听器

计算属性

• 在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，你都应当使用计算属性。

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

计算属性缓存 VS 方法（缓存）

• 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
• 每当触发重新渲染时，调用方法将总会再次执行函数。

计算属性 VS 侦听属性

• 不要滥用 watch，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

计算属性的 setter

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

  // 现在再运行 vm.fullName = ‘John Doe‘ 时，setter 会被调用，vm.firstName // 和 vm.lastName 也会相应地被更新。
  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]
      }
    }
  }
  // ...

   

侦听器

• 当需要在数据变化时执行异步或开销较大的操作时。（比如 watch 选项允许执行异步操作）

class 绑定

• 字符串拼接麻烦且易错，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

对象语法

• 注意：v-bind:class 指令也可以与普通的 class 属性共存

// 对象模式


// 放到 data 属性中


// 绑定一个返回对象的计算属性

数组语法

// 在数组语法中也可使用对象语法


data: {
  activeClass: ‘active‘,
  errorClass: ‘text-danger‘,
  isActive: true
}

用在组件上

• 当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。对于带数据绑定 class 也同样适用。

style 绑定

对象语法

• CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

条件渲染

v-if


在