一、安装

<script> 标签引入

直接下载并用 <script> 标签引入，Vue 会被注册为全局变量
和 React 需要引入两个 <script> 标签相比，它少一个引入，只需引入一个

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>

2. npm 安装、脚手架安装

yarn add vue

Vue 官方 CLI：https://github.com/vuejs/vue-cli

yarn global add @vue-cli
vue create my-app
yarn serve

3. 不同构建版本的解读

Vue.js 整体上可以分成两种版本：完整版 和 运行时版

• 完整版：同时包含编译器和运行时
• 运行时版: 用来创建 Vue 实例、渲染并处理虚拟 DOM 等代码。（除去了编译器的一切代码）

完整版 VS 运行时版

// 需要编译器
new Vue({
    template:'<div>{{hi}}</div>'
})
// 不需要编译器
new Vue({
    render(h){
        return h('div',this.hi)
    }
})

运行时版本比完整版体积小大约 30%

二、介绍

1. Vue 是什么？

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

一个 Vue 类库学习 GitHub：https://github.com/vuejs/awesome-vue#libraries—plugins
一个 Vue 教学视频：https://scrimba.com/learn/vuedocs
一个小 demo 示例了解核心概念

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>Hello Word</h1>
        <ul>
            <li v-for="product in products">
                <input type="number" v-model.number="product.quantity">
                {{product.name}}
                <span v-if="product.quantity === 0">- OUT OF STOCK</span>
                <button @click="product.quantity += 1">Add</button>
            </li>
        </ul>
        <h2>Total Inventory: {{totalProducts}}</h2>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                products:[]
            },
            computed:{
                totalProducts(){
                    return this.products.reduce((sum,product)=>{
                        return sum + product.quantity
                    },0)
                }
            },
            created(){
                setTimeout(()=>{
                    const products = [
                        {id:1,quantity:1,name:'compass'},
                        {id:2,quantity:0,name:'Jacket'},
                        {id:3,quantity:5,name:'Hiking Socks'},
                        {id:4,quantity:2,name:'Suntan Lotion'},
                    ]
                    this.products = products
                })
            }
        })
    </script>
</body>
</html>

2. 声明式渲染

Vue.js 的核心是采用简介的模板语法来声明式地将数据渲染进 DOM 的系统

• 不再与 HTML 直接交互
• 所有东西都是响应式的，修改 app.message 的值，下例的相应地更新
• 一个 Vue 应用会将其挂载到一个 DOM 元素上然后对其完全控制
• div#app 是我们的入口

v-bind attribute 叫做指令。指令带有前缀 v-，以表示他们是 Vue 提供的特殊 attribute

• 下例中，该指令的意思是“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”

  <div id="app">
  <span>{{ message }}</span>
  <span v-bind:title="message2">鼠标悬停几秒钟查看此处动态绑定的提示信息</span>
  </div>

  var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    message2:'页面加载于' + new Data().toLocaleString()
  }
  })

3. 条件与循环

v-if 指令可以控制一个元素是否显示
v-for 指令可以绑定数组的数据来渲染一个项目列表

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
  <ol>
      <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true,
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

4. 处理用户输入

用 v-on 指令添加一个事件监听器让用户和应用进行交互，通过它调用在 Vue 实例中定义的方法
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
    <p>{{ message2 }}</p>
  <input v-model="message2">
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!',
    message2: 'Hello Vue!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

5. 组件化应用结构

组件系统是 Vue 的另一个重要概念，是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

• 几乎任何类型的应用洁面都可以抽象为一个组件树
• 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

在 Vue 中注册组件

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})
var app = new Vue(...)

构建组件模板并使用该组件

<ol>
  <todo-item></todo-item>
</ol>

在一个大型应用中，有必要将整个应用程序划分为组件，以使开发更易管理，下面是一个假象例子

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

6. Vue组件与自定义元素

Vue 组件非常类似于自定义元素，它是 Web 组件规范的一部分，Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is attribute。但是，它们有关键性的差别

1. Web Component 规范已经完全并通过，但未被所有浏览器原生实现，而 Vue 组件不需要任何 polyfill
2. Vue 组件提供了一些重要功能，最突出的是跨组件数据流、自定义事件通信及构建工具集成

三、Vue 实例

1. 创建一个 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的

• 创建一个 Vue 实例时，可以传入一个选项对象
• 一个 Vue 应用有一个通过 new Vue 创建的跟元素实例，以及可选的嵌套的、可复用的组件树组成

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

  // 一个 todo 应用的组建树可以是这样的
  根实例
  └─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

2. 数据和方法

当一个 Vue 实例被创建时，它将 data 对象中的所有 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

• 当这些数据改变时，视图会进行重渲染
• 值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的
• 唯一的例外是使用 Object.freeze()，这回阻止修改现有的 property，也意味这响应系统无法再追踪变化
• 除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a == data.a // => true
vm.a = 2
data.a // => 2
data.a = 3
vm.a // => 3

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

3. 实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

• 下面示例 created 钩子可以用来在一个实例被创建之后执行代码。
• 还有一些其他的钩子，如 mounted、updated 和 destroyed。
• 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
• 不要在选项 property 或回调函数上使用箭头函数，因为箭头函数没有 this，而选项中依赖 this，比如
  • created: () => console.log(this.a)
  • vm.$watch('a', newValue => this.myMethod())

    new Vue({
    data: {
    a: 1
    },
    created: function () {
    console.log('a is: ' + this.a)
    }
    })
    // => "a is: 1"

4. 生命周期图示

四、模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1. 插值

文本

• 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值
• 通过使用 v-once 指令，也能执行一次性的插值

  <span>Message: {{ msg }}</span>
  <span v-once>这个将不会改变: {{ msg }}</span>

原始 HTML

• 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
• 站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击

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

Attribute

• Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令
• 对于布尔 attribute (它们只要存在就意味着值为 true)
• 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

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

使用 JavaScript 表达式

• 对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持
• 模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量

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

2. 指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式

• v-for 是例外情况
• 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

参数

• 一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute
• 另一个例子是 v-on 指令，它用于监听 DOM 事件：

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

动态参数

• 从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
• 下面示例中，attributeName 和 eventName 会被作为一个 JavaScript 表达式进行动态求值
• 动态参数预期会求出一个字符串，异常情况下值为 null
• 动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的 ```html … …

…

修饰符
- 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
- 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
```html
<form v-on:submit.prevent="onSubmit">...</form>

3. 缩写

Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写

• 它们看起来可能与普通的 HTML 略有不同
• 但 : 与 @ 对于 attribute 名来说都是合法字符，在所有支持 Vue 的浏览器都能被正确地解析 ```html …

…

<a name="ra3GU"></a>
## 五、计算属性和侦听器
<a name="IdNBo"></a>
### 1. 计算属性
我们声明了一个计算属性 reversedMessage，并将函数将用作 property vm.reversedMessage 的 getter 函数
- 我们可以像绑定普通 property 一样在模板中绑定计算属性
- 计算属性的 getter 函数是没有副作用 (side effect) 的，这使它更易于测试和理解
```html
<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.split('').reverse().join('')
    }
  }
})

2. 计算属性缓存 vs 方法

通过在表达式中调用方法可以达到同样的效果，然后 Vue 做了对计算属性做了一个功能，就是缓存

• 计算属性是基于它们的响应式依赖进行缓存的
• 只在相关响应式依赖发生改变时它们才会重新求值
• 相比之下，每当触发重新渲染时，调用方法将总会再次执行函数，性能开销会更大

<p>Reversed message: "{{ reversedMessage() }}"</p>

methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

3. 计算属性 vs 侦听属性

Vue 提供了侦听属性来观察和响应 Vue 实例上的数据变动，但有一些数据需要随着其他数据变动而变动时，计算属性会是更好的做法

• 下面是他们之间的对比

  <div id="demo">{{ fullName }}</div>

  var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
  })

  ```javascript

var vm = new Vue({ el: ‘#demo’, data: { firstName: ‘Foo’, lastName: ‘Bar’ }, computed: { fullName: function () { return this.firstName + ‘ ‘ + this.lastName } } })

<a name="6b6v7"></a>
### 4. 计算属性的 setter
计算属性默认只有 setter，不过在需要时也可以提供一个 setter
- 运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新
```javascript
// ...
computed: {
  fullName: {
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

5. 侦听器

当需要在数据变化时执行异步或开销较大的操作时，使用 watch 这个方式是最有用的

• 下面是一个示例，使用 watch 选项允许我们执行异步操作（访问一个 API），限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。
• 除了 watch 选项外，还可以使用命令式的 vm.$watch ```html

  Ask a yes/no question:

  {{ answer }}

<a name="zzp51"></a>
## 六、Class 与 Style 绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求，可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。<br />在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组
<a name="iPdTU"></a>
### 1. 绑定 HTML Class
对象语法
```html
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
<div v-bind:class="classObject"></div>

数组语法

• 可以使用三元表达式
• 在数组项中，还可以使用对象语法 ```html

Hi

Vue is awesome!

Oh no 😢

Hello!

• {{ item.message }}

• {{ parentMessage }} - {{ index }} - {{ item.message }}

• {{ value }}