Vue实例的生命周期结构图

xiaoxiao2021-02-28 55

Vue实例暴露的接口

而Vue提供了几个暴露的接口：

接口（假设实例为vm）

效果

vm.$data

是vm的data属性

vm.$el

是vm的el属性所指向的dom结点

vm.$watch

示例：

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

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

更多的可以查看

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

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

$mount()手动挂载

当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；

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

<div id= "app"> {{a}} < /div> <button οnclick="test()">挂载</button> <script> var obj = { a: 1} var vm = new Vue({ data: obj }) function test() { vm.$mount( "#app"); }

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

当点击按钮后，变成了1

用Vue的v-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 >

转载请注明原文地址: https://www.6miu.com/read-2630925.html

技术

最新回复(0)