组件化编码流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
1).一个组件在用：放在组件自身即可。
2). 一些组件在用：放在他们共同的父组件上（状态提升）。
(3).实现交互：从绑定事件开始。
props适用于：
(1).父组件 ==> 子组件 通信
(2).子组件 ==> 父组件 通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
// 可以实现勾选改变对象内的done值, 这是违规操作, 因为vue默认不是深层监视
<input type="checkbox" v-model="todo.done" />
数据传递( 父 → 子)v-bind还可以向子组件传递数据.方法........., 子组件用props` 数组接收
动态的增删一个元素内的属性
<input type="text" checked>
1
动态↓↓↓
<input type="checkbox" checked>
获取输入框数据的两个方法
1.用函数事件参数
<input type="text" placeholder="请输入你的任务名称，按回车键确认"
@keyup.enter="add"/>
1
2
methods: {
add(e) {
console.log(e.target.value);
},
