Vue2.0入門系列——組件和生命週期
一、文件目錄結構html
Vue.js官網下載vue
Vue2.0組件定義，自行編寫測試
二、編寫文件this
以下，spa
三、總體思路component
定義子組件——註冊組件——模板編寫——引用模板——實例化htm
訪問方式：直接訪問html文件。blog
源代碼：生命週期
<!DOCTYPE html>ip
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0組件屬性</title>
<script src="./vue.js"></script>
<script>
var Home={//一、定義子組件
template:'#aaa' //四、套用模板
};
Vue.component('home-test',Home); //二、註冊組件
window.onload=function(){
new Vue({
el:'#box',
data:{
msg: 'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<template id="aaa">
<!--三、template模板，下面只容許只有一個標籤屬性-->
<div>
<h3>我是第一個組件</h3>
<strong>加粗標籤屬性</strong>
</div>
</template>
<div id="box">
<!--五、子組件實例化，引用-->
<home-test></home-test>
{{ msg }}
</div>
</body>
</html>
自此，組件屬性介紹完成。
四、組件聲明週期介紹
beforeCreate 組件實例剛剛被建立,屬性都沒有
created 實例已經建立完成，屬性已經綁定
beforeMount 模板編譯以前
mounted 模板編譯以後
beforeUpdate 組件更新以前
updated 組件更新完畢
beforeDestroy 組件銷燬前
destroyed 組件銷燬後
五、源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0生命週期</title>
<script src="./vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
msg: 'welcome vue2.0'
},
methods: {
update(){this.msg='數據已更新'},
destroy(){this.$destroy();}
},
beforeCreate(){console.log('組件實例剛剛被建立');},
created(){console.log('實例已經建立完成');},
beforeMount(){console.log('模板編譯以前');},
mounted(){console.log('模板編譯以後');},
beforeUpdate(){console.log('組件更新以前');},
updated(){console.log('組件更新以後');},
beforeDestroy(){console.log('組件銷燬以前');},
destroyed(){console.log('組件銷燬以後');}
});
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="更新數據" @click="update">
<input type="button" value="銷燬數據" @click="destroy">
{{ msg }}
</div>
</body>
</html>
界面訪問測試，查看console輸出。
自此，vue生命週期介紹完畢。
- 1. vue入門教程系列二組件的生命週期
- 2. vue2.0生命週期
- 3. Vue2.0生命週期
- 4. 探究Vue2.0生命週期
- 5. 淺談vue2.0生命週期
- 6. Vue2.0七——生命週期
- 7. vue2.0 之 生命週期
- 8. Vue2.0學習——生命週期
- 9. 詳解Vue2.0生命週期
- 10. Vue2.0生命週期和鉤子函數
- 更多相關文章...
- • Rust 生命週期 - RUST 教程
- • SVN 生命週期 - SVN 教程
- • YAML 入門教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
- 1. vue入門教程系列二組件的生命週期
- 2. vue2.0生命週期
- 3. Vue2.0生命週期
- 4. 探究Vue2.0生命週期
- 5. 淺談vue2.0生命週期
- 6. Vue2.0七——生命週期
- 7. vue2.0 之 生命週期
- 8. Vue2.0學習——生命週期
- 9. 詳解Vue2.0生命週期
- 10. Vue2.0生命週期和鉤子函數