Vue.js（version 2）的时代已到来，前端攻城狮你准备好了吗？-------- 一、

本文链接：https://blog.csdn.net/DavidFFFFFF/article/details/74561130

轻量化的前端UI框架—–Vue.js

本文拿vue对比其他前端框架，介绍它的强大之处，我会列出相应的实例供大家参考，具体功能可以参考官方API：

Virtual DOM(虚拟DOM)
组件化应用

Vue 专注于创造前端的富应用。不同于早期的JavaScript框架“功能齐全”，Vue只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。

虚拟DOM

所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM，DOM树的虚拟表现。它的诞生是基于这么一个概念：改变真实的DOM状态远比改变一个JavaScript对象的花销要大得多。

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。之后这些差别会应用在真实的DOM上。
那么vue是怎么操作虚拟DOM的呢？是的，他是通过Vue实例;

Vue实例

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的：

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

在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

一、选项——数据

1. data

 类型： object | Function
 限制：组件的定义只接受 function。

举个栗子：

<script>
    var data = { a: 1 }
    // 直接创建一个实例
    var vm = new Vue({
      data: data
    })
    vm.a // -> 1
    vm.$data === data // -> true
    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({
      data: function () {//限制（组件的定义只接受 function）
        return { a: 1 }
      }
    })
</script>

2. props

 类型： Array<string> | Object

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。

举个栗子：

<script>
    // 简单语法
    Vue.component('props-demo-simple', {
      props: ['size', 'myMessage']
    })
    // 对象语法，提供校验
    Vue.component('props-demo-advanced', {
      props: {
        // 只检测类型
        height: Number,
        // 检测类型 + 其他验证
        age: {
          type: Number,
          default: 0,
          required: true,
          validator: function (value) {
            return value >= 0
          }
        }
      }
    })
</script>

3. computed

 类型： { [key: string]: Function | { get: Function, set: Function } }

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
举个栗子：

<script>
    var vm = new Vue({
      data: { a: 1 },
      computed: {
        // 仅读取，值只须为函数
        aDouble: function () {
          return this.a * 2
        },
        // 读取和设置
        aPlus: {
          get: function () {
            return this.a + 1
          },
          set: function (v) {
            this.a = v - 1
          }
        }
      }
    })
        vm.aPlus   // -> 2 未传参数，所以进入aPlus的get方法
        console.log(vm.aPlus); // -> 2
        vm.aPlus = 3  //传参数 v=3，所以进入aPlus的set方法
        console.log(vm.a); // -> 2
        vm.a       // -> 2
        console.log(vm.a); // -> 2
        vm.aDouble // -> 4
        console.log(vm.aDouble); // -> 4
</script>

计算属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。注意，如果实例范畴之外的依赖 (比如非响应式的 not reactive) 是不会触发计算属性更新的。

4. methods

    类型： { [key: string]: Function }

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
举个栗子：

<script>
    var vm = new Vue({
      data: { a: 1 },
      methods: {
        plus: function () {
          this.a++
        }
      }
    })
    vm.plus()
    vm.a // 2
</script>

5. watch

    类型：{ [key: string]: string | Function | Object }

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

<script>
        var vm = new Vue({
      data: {
        a: 1,
        b: 2,
        c: 3
      },
      watch: {
        a: function (val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 深度 watcher
        c: {
          handler: function (val, oldVal) { /* ... */ },
          deep: true
        }
      }
    })
    vm.a = 2 // -> new: 2, old: 1
</script>

二、选项——DOM

1. el

  类型：string | HTMLElement
  限制： 只在由 new 创建的实例中遵守。

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。

在实例挂载之后，元素可以用 vm.$el 访问。

如果这个选项在实例化时有作用，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。

2. template

  类型：string

一个字符串模板作为 Vue 实例的标识使用。模板将会替换挂载的元素。挂载元素的内容都将被忽略，除非模板的内容有分发 slot。

如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用

3. render

  类型：(createElement: () => VNode) => VNode

字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。render 函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

如果组件是一个函数组件，Render 函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

三、选项——生命周期钩子

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子
，这就给我们提供了执行自定义逻辑的机会。例如，created 这个钩子在实例被创建之后被调用：

<script>
        var vm = new Vue({
          data: {
            a: 1
          },
          created: function () {
            // `this` 指向 vm 实例
            console.log('a is: ' + this.a)
          }
        })
        // -> "a is: 1"
</script>