Vue.js 系列 - Vue 实例
Posted 辣鸡OvO
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js 系列 - Vue 实例相关的知识，希望对你有一定的参考价值。
Yesterday:
创建一个 Vue 实例，代码如下：
var vm = new Vue({
// 选项
})对 javascript 有一点了解的都知道，这就是把一个普通的类进行实例化，这样我们才能进行使用。
在昨天的 Hello World 中，就使用了这么一个实例。
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="utf-8"> <title>Hello World</title> <script src="vue.js"></script>
</head>
<body> <div id="app"> {{ msg }}
</div> <script> var app = new Vue({ el: '#app', data: { msg: 'Hello World' } })
</script>
</body>
</html>实例内部的 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 的都知道只是把一个类实例化，然后使用。
关注持续更新
以上是关于Vue.js 系列 - Vue 实例的主要内容，如果未能解决你的问题，请参考以下文章