创建 Vue 实例
开发一个 Vue 应用，首先要通过 new Vue 创建一个根 Vue 实例。通常这个实例要与 HTML 中的元素关联。
示例：
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
数据和方法
使用 new Vue() 创建 Vue 实例时，需要传入一个参数对象。
这个对象最主要的属性有三个：
el-- element 的缩写，用来指定 HTML 元素的 id 属性值，将 Vue 实例和 HTML 元素关联起来。data-- data 的值是一个对象，该对象中的所有属性（property）会被加入到 Vue 的 响应式系统 中。当这些属性的值发生变化时，对应的视图中的数据也会被更新。methods- methods 的值也是一个对象，通常把用来处理事件的函数放在这个对象中。
通过 Vue 实例变量可以直接访问 data 对象和 methods 对象的属性。
示例：
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
除了用户（开发人员）传入的 data 和 methods 对象，Vue 实例还提供了一些有用的属性和方法。这些属性和方法以 $ 为前缀，以便跟用户定义的属性区分开来。
示例：
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
生命周期
Vue 生命周期是指 Vue 实例从创建到销毁都要经历一系列的不同阶段，如下图所示：
在 Vue 实例的生命周期中，Vue 提供了一些钩子函数（如上图所示），通过这些钩子函数开发人员可以在不同的阶段添加自己的代码。
示例：利用 created 函数添加代码，让其在实例创建之后执行：
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于