Vue.js - Vue 实例

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

创建一个 Vue 实例,代码如下:

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

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

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




    
    Hello World
    


    
{{ msg }}

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

文档链接:

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

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

“ el ” 选项:

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

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

“ data ” 选项:

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

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

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

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

你可能感兴趣的:(Vue.js - Vue 实例)