构造器
html
<div id="app8">
{{message}}
</div>
js
//创建一个可复用的组件构建器
var MyComponent = Vue.extend({
data:function () {
return {
message:"ddddddd"
}
}
})
//实例化
var myComponentInstance = new MyComponent();
//绑定到id为app8的DOM节点上
myComponentInstance.$mount('#app8');
属性与方法
var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a === data.a // -> true
// 设置属性也会影响到原始数据
vm.a = 2
data.a // -> 2
// ... 反之亦然
data.a = 3
vm.a // -> 3
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 (newVal, oldVal) {
// 这个回调将在 `vm.a` 改变后调用
})
生命周期
引用官网的生命周期图
下面来个例子:
html
<div id="app2">
<span v-bind:title="message">2、v-bin绑定title</span>
</div>
js
var app2 = new Vue({
el: "#app2",
data: {
message: '页面加载于 ' + new Date()
},
beforeCreate:function () {
console.log('beforeCreate a is: ' + this.message)
},
created:function () {
console.log('created a is: ' + this.message)
},
beforeMount:function () {
console.log('beforeMount a is: ' + this.message)
},
mounted:function () {
console.log('mounted a is: ' + this.message)
},
beforeUpdate:function () {
console.log('beforeUpdate a is: ' + this.message)
},
updated:function () {
console.log('updated a is: ' + this.message)
},
activated:function () {
console.log('activated a is: ' + this.message)
},
deactivated:function () {
console.log('deactivated a is: ' + this.message)
},
beforeDestroy:function () {
console.log('beforeDestroy a is: ' + this.message)
},
destroyed:function () {
console.log('destroyed a is: ' + this.message)
}
});
setTimeout('app2.message="setTimeout 3秒后更换message的值,绑定的title会对应的改变"', 3000);
app2.$watch('message', function (newVal, oldVal) {
console.log("swatch到message改变");
alert("\"2、v-bin绑定title\"绑定的title改变了");
alert("从:"+oldVal+",变成:"+newVal);
})
控制台结果
beforeCreate a is: undefined
helloVue.js:24 created a is: 页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)
helloVue.js:27 beforeMount a is: 页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)
helloVue.js:30 mounted a is: 页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间)
helloVue.js:33 beforeUpdate a is: setTimeout 3秒后更换message的值,绑定的title会对应的改变
helloVue.js:53 swatch到message改变
helloVue.js:54 "2、v-bin绑定title"绑定的title改变了
helloVue.js:55 从:页面加载于 Wed Jul 12 2017 15:55:51 GMT+0800 (中国标准时间),变成:setTimeout 3秒后更换message的值,绑定的title会对应的改变
helloVue.js:36 updated a is: setTimeout 3秒后更换message的值,绑定的title会对应的改变
在created事件后,message的值才在Vue实例中创建。
在beforUpdate事件时,Vue实例中的message已经被改变。
在swatch监听到Vue实例中的message改变了之后再修改DOM的内容。
更新完DOM的内容后执行updated函数。