筆記
1.定義變量（{}）；最后有分號
//var a=new Vue({ })需要寫入括號
//el：元素未加 #
//大寫Vue
組件
//方法——調用全局組件-
“大寫”——組件名字（需要分開，所以合理大寫）
，——逗號
template：“”——模板，中全部小寫，分隔開來
Vue.component("TodoItem", {
template:"<li >todo item </li>"
}）
2.子組件，變量大寫分隔
var ToDolist = {
props: ['content'],
template: "<li>{{content}}</li>"
}
引用使用-
<todo-item v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete">
</todo-item>
3.簡寫
<div v-text="name"></div> 等價于 插值{{}}
<div v-html="name"></div>?
??
v-on：click=“”等價于@
‘v-bind’等價于 ：
<to-dolist v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleDelete">
</to-dolist>
2.組件
子組件-逐步驗證-防止出錯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="GB2312">
<title>ToDoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.7/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="Tvalue" />
<button v-on:click="handleBtnClick">子組件-提交</button>
<ul>
<to-dolist v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleDelete">
</to-dolist>
</ul>
</div>
<script>
//子組件
var ToDolist = {
props: ['content','index'],
//handleZClick需要單引號
template: "<li @click='handleZClick'>{{content}}</li>",
methods: {
handleZClick: function () {
alert('子組件-"被點擊"成功');
this.$emit("delete", this.index)//向外觸發delete事件
//this.$emit('delete', this.index)//這個也是正確的‘’符號
}
}
}
//主組件
var a = new Vue({
el: '#app',
components: {
ToDolist: ToDolist
},
data: {
Tvalue: '',
list:[],
},
methods: {
handleBtnClick: function () {
alert('已經點擊');
this.list.push(this.Tvalue);
alert('你輸入的 ' + this.Tvalue + '文本已清空');
this.Tvalue = '';
},
handleDelete: function (index) {
alert("子組件--“handleDelete”事件監聽成功");
alert('點擊事件-序號是：' + index);
this.list.splice(index,1)//該序號，刪除一行
alert('刪除事件-序號：' + index+'成功！');
//alert("子組件--“handleDelete”事件【刪除清空】成功");
//this.list = [];//this.list =一個空數組，全部清空了
}
}
})
</script>
</body>
</html>
3.生命周期詳解vue生命周期
https://segmentfault.com/a/1190000011381906
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue生命周期學習</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var 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)
},
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掛載前狀態------');
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 更新前狀態===============》');
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 更新完成狀態===============》');
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)
}
})
</script>
</html>
4.函數
倒序字符串
computed: {
// 計算屬性的 getter
reversedMessage: function () {
// this 指向 vm 實例
return this.message.split('').reverse().join('')
}
}
計算屬性，方法，偵聽器http://www.lxweimin.com/p/0e8b1d449f3d
調試
1.銷毀
??
