Yesterday: https://www.jianshu.com/p/20a4ad2199e3
创建一个 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 文档。
文档链接：
今天就说一下昨天 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 的都知道只是把一个类实例化，然后使用。
网友评论