Analysis of vue instances

The content of this article is to share with you the analysis of Vue instances, including the creation of Vue instances, Vue data responses, Vue instance attributes and life cycle functions.

vueInstance

Target：

1, Learn to create vue instances

2, master vuedataishow to respond’s

3. Understand the properties and methods of the vue instance

4. Understand the various aspects of the life cycle of the vue instance When using hooks, keep in mind the life cycle diagram

Preconditions: Introducedvue.js

1. VueInstance

1.1 Create an instance

Html:<p id=”app”>{{msg}}</p>Script:

var vm = new Vue({

el: ‘#app’,      // 绑定元素

data: {

    //数据

msg: ‘Hello’

},

components: {

    //组件声明

}

// ...还有其他例如计算属性,侦听器,周期钩子等

})

1.2 The component is also avueInstance

1. VueData response

MVVM: model(Model layer,that is data), view(View layer), ViewModel(View Model Layer)

##VMlayer# here ##, replaces the C layer of the traditional MVC model, Implements a bridge between views and data pointing to respond to each other, vue mainly provides the vm layer.The data and views in Vue

respond to each other

, is also datachanges,Page view(view)The corresponding value will also change(Update view), If these values ​​determine the rendering of an array or object,or style,The same will eventually change the view response. The same view changes the corresponding ( Bound to the view)data, data will also respond to changes(Update data).

Use

Object.defineProperty Convert all these properties to getters/setters (So print them out directly The data will also see that each attribute has a setter and setter)

Object.defineProperty 是 ES5 中一个无法 shim (模拟)的特性，所以Vue 不支持 IE8 以及更低版本浏览器。

1. Vue实例的属性(option)

3.1 Data

主要存放数据的地方, 一般也就是会在这里定义数据(这里面的数据都是响应的),很少会在vue实例外面定义(全局)数据.

示例:

...

data: {

msg: ‘hello’,

msgList: [‘h’,’e’,’l’,’l’,’o’]

}

...

使用data:

(在实例内) 直接使用this.dataname 或 this.$data.dataname

实例外: 实例对象名代替this

在模版中使用就用模板语法

3.2 method(方法)

Vue中所有的(普通)方法都放在这里

3.3 其他常用属性

components: { }  //组件

computed: { xx: function( ...;  return ..;)}  //计算属性, 每个计算属性都是一个funciton, 这些function是有返回的.

 watch:  { dataname: function(){...} }   //侦听器, 当watch指定的data发生变化,响应会触发执行相应的function

1. 生命周期钩子函数

Vue实例的生命周期: vue实例整个生命周期包括了实例的,初始化,编译,变化,销毁等

在每个生命周期都会有相应的钩子函数,当生命周期到达的时候就会执行.

生命周期图示:

 

(图侵删)

...// 生命周期钩子函数beforeCreate() {

console.log('组件准备创建')

},

created() {

console.log('组件已经创建')

},

beforeMount() {

console.log('组件准备安装')

},

mounted() {

console.log('组件已经安装')

},

beforeUpdate() {

console.log('组件准备更新')

},

updated() {

console.log('组件已经更新')

},

beforeDestroy() {

console.log('组件准备销毁')

},

destroyed() {

console.log('组件已经销毁')

}

...

 相关推荐：

 简单理解vue中实例属性vm.$els

vue生命周期、vue实例、模板语法

The above is the detailed content of Analysis of vue instances. For more information, please follow other related articles on the PHP Chinese website!