1、文件目錄結構
Vue.js官網下載
Vue2.0組件定義，自行編寫
2、編寫文件
如下，
3、整體思路
定義子組件——注冊組件——模板編寫——引用模板——實例化
訪問方式：直接訪問html文件。
源代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue2.0組件屬性</title>
<script src="./vue.js"></script>
<script>
var Home={//1、定義子組件
template:'#aaa' //4、套用模板
};
Vue.component('home-test',Home); //2、注冊組件
window.onload=function(){
new Vue({
el:'#box',
data:{
msg: 'welcome vue2.0'
}
});
};
</script>
</head>
<body>
<template id="aaa">
<!--3、template模板，下面只允許只有一個標簽屬性-->
<div>
<h3>我是第一個組件</h3>
<strong>加粗標簽屬性</strong>
</div>
</template>
<div id="box">
<!--5、子組件實例化，引用-->
<home-test></home-test>
{{ msg }}
</div>
</body>
</html>
自此，組件屬性介紹完成。
4、組件聲明周期介紹
beforeCreate 組件實例剛剛被創建,屬性都沒有
created 實例已經創建完成，屬性已經綁定
beforeMount 模板編譯之前
mounted 模板編譯之后
beforeUpdate 組件更新之前
updated 組件更新完畢
beforeDestroy 組件銷毀前
destroyed 組件銷毀后
5、源代碼
<!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生命周期介紹完畢。