官网文档：
http://cn.vuejs.org/guide/instance.html
课程大纲：
构造器 Constructor
属性与方法 Properties_and_Methods
实例生命周期 Instance_Lifecycle
- 构造器
每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例（root Vue instance）：
// 记住 new Vue() 就是根实例,这就是规则
var vm = new Vue({
// 选项
})
一个Vue实例其实正是一个MVVM模式中所描述的ViewModel, 因此在文档中经常会使用vm这个变量。
构造器与实例：
构造器（Constructor）：
是用来设定对象的property或者呼叫method，以让未来物件能够正确运作。
实例（Instance）：
是构造器new 以后的物件。
构造器，一般就是一个构造函数，用于创建实例对象。比如一个类的构造函数，用于创建对象。
在实例化Vue对象时候，需要传入一个选项对象，它可以包含数据，模板，挂载元素，方法，生命周期钩子等选项。全部的选项可以在API文档中查看。
可以扩展Vue构造器，从而用预定义选项创建可复用的组件构造器。
var MyComponent = Vue.extend({
// 扩展选项
})
所有的MyComponent实例都可以将预定义的扩展选项被创建，
var my_component_instance = new MyComponent()
构造器扩展
Vue.extend()
Vue.extend({
template: '<div>vue组件实例</div>'
})
Vue实例 与 Vue组件的关系
目前只需要明白所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。
还有一些，比如设计目的，Vue是设计与App的启动，而组件是Vue实例的扩展。
Vue实例会代替其data对象里面所有的属性
var data = {a : 1}
var vm = new Vue({
el: '#app',
data: data
})
vm.a === data.a === vm.$data.a
注意：只有这些被代理的属性是响应的。
如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
Vue实例的实例属性与方法
除了这些数据属性，Vue实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀$，以便与代理的数据属性区分。
var data = {a : 1}
var vm = new Vue({
el: '#app',
data: data
})
vm.$el === document.getElementById('app') // 这里不是jQuery不是`#app`哈
vm.$data === data
$watch()是一个实例方法，监听着 vue data的变化，一旦有变化，都会启动
vm.$watch()
eg：
var data = {a : 1}
var vm = new Vue({
el: '#app',
data: data
})
vm.$watch('a', function (new_value, old_value) {
console.log('old:'+old_value + ' new:'+new_value) // 当a有改变，就会在console中打印。
})
实例的生命周期
Vue实例在创建时候有一些列初始化步骤，比如：它需要建立数据观察，编译模板，创建必要的数据绑定。
在此过程中，它也将调用一些生命周期钩子，给自己定义逻辑提供运行机会。
例如：
var vm = new Vue({
el: '#app',
data: {
a:1
},
created: function () {
console.log('a is: ' + this.a)
}
})
vue实例在创建完成之后，那么就会执行created方法。
Vue实例的生命周期：
图片.png
注意：这个图片是vue.js1.0的，ready都被换为了mounted在vue2.0中。
红色框住的是生命周期函数。
经验
示例：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuejs-test01</title>
<link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
App.vue:
<template>
<div id="app">
<!-- 图片 -->
<div id="bag">{{ helth }}</div>
<!-- 进度情况 -->
<div id="bag-helth">
<div :style="{ width:helth + '%' }"></div>
</div>
<!-- 控制按钮 -->
<div id="control">
<button @click="punch" v-show="!ended">click</button>
<button @click="restart">restart</button>
</div>
</div>
</template>
注意：index.html和App.vue中都有<div id="app">。他们是重复的。
-
index.html中需要有<script src="/dist/build.js"></script>，不能缺少：
并且npm run dev才能显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vuejs-test01</title>
<link href="./src/assets/styles/style.css" type="text/css" rel="stylesheet" >
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
2.App.vue 在项目中也是组件，不直接是Vue实例：
所以 data 应该是返回的函数：
<script>
export default {
data: function() {
return {
helth: 100,
ended: false,
}
},
...
3.index.html和App.vue中都有<div id="app">。他们是重复的。
我们这李可以看出render函数的作用：
index.html：
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
main.js:
el: '#app',
render: h => h(App), // 渲染DOM完成之后,将App模板渲染，覆盖掉此el的DOM节点
})
App.vue：
<template>
<div id="app">
<!-- 图片 -->
<div id="bag">{{ helth }}</div>
<!-- 进度情况 -->
<div id="bag-helth">
<div :style="{ width:helth + '%' }"></div>
</div>
<!-- 控制按钮 -->
<div id="control">
<button @click="punch" v-show="!ended">click</button>
<button @click="restart">restart</button>
</div>
</div>
</template>
我们可以看到index.html和App.vue的模板的最顶层的id都是app。
网友评论