简单了解Vue的自定义组件与生命周期
生活随笔
收集整理的這篇文章主要介紹了
简单了解Vue的自定义组件与生命周期
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Vue的自定義組件
定義格式
Vue.component(組件名稱, {
props:組件的屬性,
data: 組件的數據函數,
template: 組件解析的標簽模板
})
代碼解析(詳細解釋在注解中)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>自定義組件</title><script src="vue/vue.js"></script> </head> <body><div id="div"><!--實際解析在html中是這樣的<button style="color: red;">我的按鈕</button> --><my-button></my-button><!-- 實際解析 <div><div>張三</div> <div>18</div> <div>男</div> <div>蒼老師</div> <div></div></div>--><student myname="張三" age = "18" gender="男"></student></div> </body> <script>// 自定義標簽Vue.component("my-button",{// 屬性props:[""],// 數據函數data: function(){return{msg:"我的按鈕"}},//解析標簽模板template:"<button style='color:red'>{{msg}}</button>"});//定義學生標簽//使用這個標簽能夠用div現實學生姓名,年齡,性別//實現的內容是用戶同屬性傳遞的Vue.component("student",{//屬性數據,在使用student屬性的時候值會傳遞到這里來props: ["myname","age","gender"],//數據函數data: function(){},//模板元素只能有一個標簽元素,但是可以有多個子元素/*模板中的數據:1.props中2.data*/template: `<div><div>{{myname}}</div><div>{{age}}</div><div>{{gender}}</div><div>{{bzr}}</div><div>`,data :function(){return {bzr: "蒼老師",// data與props重名,優先使用props用戶傳遞的myname: "波老師"};}});new Vue({el:"#div"}); </script> </html>瀏覽器解析
Vue的生命周期(鉤子函數)
圖片來源vue官網
以下代碼從Vue官網粘貼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>生命周期</title><script src="vue/vue.js"></script> </head> <body><div id="app">{{message}}</div> </body> <script>let vm = new Vue({el: '#app',data: {message: 'Vue的生命周期'},beforeCreate: function() {console.group('------beforeCreate創建前狀態------');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //undefined console.log("%c%s", "color:red", "message: " + this.message);//undefined},created: function() {console.group('------created創建完畢狀態------');console.log("%c%s", "color:red", "el : " + this.$el); //undefinedconsole.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化},beforeMount: function() {console.group('------beforeMount掛載前狀態------');console.log("%c%s", "color:red", "el : " + (this.$el)); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化 console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 },mounted: function() {console.group('------mounted 掛載結束狀態------');console.log("%c%s", "color:red", "el : " + this.$el); //已被初始化console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 },beforeUpdate: function() {console.group('beforeUpdate 更新前狀態===============》');let dom = document.getElementById("app").innerHTML;console.log(dom);console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},updated: function() {console.group('updated 更新完成狀態===============》');let dom = document.getElementById("app").innerHTML;console.log(dom);console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},beforeDestroy: function() {console.group('beforeDestroy 銷毀前狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);},destroyed: function() {console.group('destroyed 銷毀完成狀態===============》');console.log("%c%s", "color:red", "el : " + this.$el);console.log(this.$el);console.log("%c%s", "color:red", "data : " + this.$data);console.log("%c%s", "color:red", "message: " + this.message);}});// 銷毀Vue對象vm.$destroy();vm.message = "hehe"; // 銷毀后 Vue 實例會解綁所有內容// 設置data中message數據值// vm.message = "good..."; </script> </html>瀏覽器控制臺查看生命周期
總結
以上是生活随笔為你收集整理的简单了解Vue的自定义组件与生命周期的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue的常用指令(v-html {{}}
- 下一篇： 简单了解Vue的异步请求,axios-0