Vue实例的生命周期结构图

6 篇文章 0 订阅


Vue实例暴露的接口

Vue提供了几个暴露的接口:

接口(假设实例为vm

效果

vm.$data

vmdata属性

vm.$el

vmel属性所指向的dom结点

vm.$watch

示例:

vm.$watch(“a”,function(newVal, oldVal){})

data里的a变化时,会触发回调函数

更多的可以查看

http://cn.vuejs.org/api/

搜索 $ 作为关键词来查看。



$mount()手动挂载

Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;

假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载。例如:

  1. <div id= "app">
  2. {{a}}
  3. < /div>
  4. <button οnclick="test()">挂载</button>
  5. <script>
  6. var obj = { a: 1}
  7. var vm = new Vue({
  8. data: obj
  9. })
  10. function test() {
  11. vm.$mount( "#app");
  12. }

初始,显示的是{{a}}

当点击按钮后,变成了1



Vuev-for写一个表格

<!DOCTYPE html >
< html >

< head >
< meta charset= "utf-8" />
< meta http-equiv= "X-UA-Compatible" content= "IE=edge" >
< title >Page Title </ title >
< meta name= "viewport" content= "width=device-width, initial-scale=1" >
< script src= "https://cdn.bootcss.com/vue/2.2.2/vue.min.js" > < / script >
</ head >
< body >
< div id= "app" >
< button onclick= "load()" >点击挂载表格 </ button >
</ div >
< style >
table {
border-collapse: collapse;
border-spacing: 0;
border-left: 1px solid #888;
border-top: 1px solid #888;
background: #efefef;
}
th, td {
border-right: 1px solid #888;
border-bottom: 1px solid #888;
padding: 5px 15px;
}
th {
font-weight: bold;
background: #ccc;
}
< / style >
< script >
var obj = {
grid: [
{ id: "ID", name: "名字", description: "描述", clickButton: "点击事件"},
{ id: "1", name: "a", description: "amorous", clickButton: "点击弹窗"},
{ id: "2", name: "b", description: "beautiful", clickButton: "点击弹窗"},
{ id: "3", name: "c", description: "clever", clickButton: "点击弹窗"},
{ id: "4", name: "d", description: "delicious", clickButton: "点击弹窗"},
]
}
var vm = new Vue({
data: obj,
template: '<table><tr v-for="(row,index) in grid">' +
'<td>{{row.id}}</td>' +
'<td>{{row.name}}</td>' +
'<td>{{row.description}}</td>' +
'<td><button v-on:click="alert(index)">{{row.clickButton}}</button></td>' +
'</tr></table>',
methods: {
alert : function ( index) {
alert( "该行是第" + index + "行")
}
}
})
function load() {
vm. $mount( "#app");
}
< / script >
</ body >
</ html >
 

视图:




<!DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< script type= "text/javascript" src= "../assets/js/vue.js" > < / script >
< title >构造器的声明周期 </ title >
</ head >
< body >
< h1 >构造器的声明周期 </ h1 >
< hr >
< div id= "app" >
{{message}}
< p >< button @ click= "jia" >加分 </ button ></ p >
</ div >
< button onclick= "app.$destroy()" >销毁 </ button >

< script type= "text/javascript" >
var app= new Vue({
el: '#app',
data:{
message: 1
},
methods:{
jia : function(){
this. message ++;
}
},
beforeCreate : function(){
console. log( '1-beforeCreate 初始化之后');
},
created : function(){
console. log( '2-created 创建完成');
},
beforeMount : function(){
console. log( '3-beforeMount 挂载之前');
},
mounted : function(){
console. log( '4-mounted 被创建');
},
beforeUpdate : function(){
console. log( '5-beforeUpdate 数据更新前');
},
updated : function(){
console. log( '6-updated 被更新后');
},
activated : function(){
console. log( '7-activated');
},
deactivated : function(){
console. log( '8-deactivated');
},
beforeDestroy : function(){
console. log( '9-beforeDestroy 销毁之前');
},
destroyed : function(){
console. log( '10-destroyed 销毁之后')
}

})
< / script >
</ body >
</ html >


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值