課堂講義
1、Vue 高級使用
1.1、自定義組件
-
學完了 Element 組件后，我們會發現組件其實就是自定義的標簽，例如<el-button>就是對<button>的封裝
-
本質上，組件是帶有一個名字且可復用的 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=https://www.cnblogs.com/859630097com/p/"vue/vue.js"></script>
</head>
<body>
<div id="div">
<my-button></my-button>
</div>
</body>
<script>
Vue.component("my-button",{
// 屬性
props:["style"],
// 資料函式
data: function(){
return{
msg:"我的按鈕"
}
},
//決議標簽模板
template:"<button style='color:red'>{{msg}}</button>"
});
?
new Vue({
el:"#div"
});
</script>
</html>
1.2、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=https://www.cnblogs.com/859630097com/p/"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); //undefined
console.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); //undefined
console.log("%c%s", "color:red", "data : " + this.$data); //已被初始化
console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount掛載前狀態------');