Vue.js - Vue 实例

Yesterday: https://www.jianshu.com/p/20a4ad2199e3

创建一个 Vue 实例，代码如下：

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

对 JavaScript 有一点了解的都知道，这就是把一个普通的类进行实例化，这样我们才能进行使用。

在昨天的 Hello World 中，就使用了这么一个实例。

    
    
    


    

        {{ msg }}
    

    

实例内部的 el、data 都是一些早已定义好的固定选项，每个选项有各自的方法和功能。肯定不仅仅只有这两个选项那么少的啦。可以参考 Vue API 文档。

文档链接：

https://cn.vuejs.org/v2/api/

今天就说一下昨天 Hello World 实例里面的 el 、data 选项的用法。

“ el ” 选项：

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

说得通俗一点，就是 JavaScript 的 id、class、html 标签 选择器。选中的标签跟它内部的标签会变成一个挂载器，就是那个标签里面可以使用 Vue 实例 里面的一些特殊方法。在挂载器外面的标签无法使用 Vue 实例 里面的方法。

“ data ” 选项：

我就不引用文档里的话了，其实就是定义变量，把变量都放到 data 花括号的里面，可以是任意类型。

data: {
    msg: "text",    // 字符串
    num: 123,       // 数字
    list: [],       // 列表
    obj: {          // 对象
        
    }
}

data 选项中的数据可以在挂载器中使用，如何使用，在后面的例子中很容易就可以看出来。可以暂时参考昨天的 Hello World ，可以用双花括号 {{}} 加载相应的数据。后面讲的指令也会用到 data 里面的数据。

Vue 实例就先讲这么多，其实也没啥好说的，会一点 JavaScript 的都知道只是把一个类实例化，然后使用。