笔记
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('')
}
}
计算属性，方法，侦听器https://www.jianshu.com/p/0e8b1d449f3d
调试
1.销毁
