1、表单指令
v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用
2、斗篷指令
作用：斗篷指令解决页面闪烁
用法：
// 方法一
// 方法二
3、条件指令
条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
用法：
<p v-if="v1 === '1'">if分支</p>
<p v-else-if="v1 === '2'">elif分支1</p>
<p v-else-if="v1 === '3'">elif分支2</p>
<p v-else>else分支</p>
4、循环指令
循环指令v-for如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构
用法：
<div>
<p v-for="(v, k, i) in people">{{ i }}-{{ k }}:{{ v }}</p>
</div>
data: {
people: {
name: '兔子',
color: '粉白',
price: 6.66,
}
5、分隔符成员
了解：delimiters实例成员解决插值表达式符号冲突
6、计算属性
计算属性(方法属性)在computed中声明，方法内部变量会被监听，值来源于方法返回值
<div id="app">
<input type="text" v-model="v1">
+
<input type="text" v-model="v2">
=
<button>{{ res }}</button>
</div>
new Vue({
el: '#app',
data: {
v1: '',
v2: '',
// res: '结果',
},
// 1、computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义(省略data中的)
// 2、方法属性的值来源于绑定的方法的返回值
// 3、方法属性必须在页面中渲染后，绑定的方法才会被启用(调用)
// 4、方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定的方法，重新更新一下方法属性的值
// 5、方法属性值不能手动设置，必须通过绑定的方法进行设置
computed: {
res () {
console.log('该方法被调用了');
return this.v1 && this.v2 ? +this.v1 + +this.v2 : '结果';
}
}
})
7、属性的监听
监听watch可以设置数据的监听方法，在监听属性更新时，完成特定逻辑
用法：
姓名：
姓：{{ first_name }}
名：{{ last_name }}
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: '',
},
watch: {
// 1、watch中给已有的属性设置监听方法
// 2、监听的属性值一旦发生更新，就会调用监听方法，在方法中完成相应逻辑
// 3、监听方法不需要返回值(返回值只有主动结束方法的作用)
full_name() {
if (this.full_name.length === 2) {
k_v_arr = this.full_name.split('');
this.first_name = k_v_arr[0];
this.last_name = k_v_arr[1];
}
}
8、Vue组件（重点）
组件的概念，组件就是vue实例(对象)
用法：
/**
- 1、组件：由html、css、js三部分组成的独立单位，可以类似于变量，重复使用
- 2、组件其实就是vue实例(对象)，一个组件就是一个vue实例(对象)
- 3、new Vue()产生的也是实例(对象)，所以也是组件，我们称之为 根组件
-
一个页面建议只出现一个根组件（项目开发模式下，一个项目建议只出现一个根组件） - 4、组件的html页面结构有 template 实例成员提供
-
template提供的html结构是用来构虚拟DOM -
真实DOM最终会被虚拟DOM替换 -
根组件一般不提供template，就由挂载点el来提供构建虚拟DOM的页面结构，根组件如果提供了template，还需要设置挂载点作为替换占位 -
template模板有且只有一个根标签
*/
let c1 = '';
new Vue({
el: '#app',
data: {
msg: '12345',
c1: 'red'
},
template: <div id="app"> <p :style="{color: c1}">{{ msg }}</p> <p @click="clickAction">{{ msg }}</p> </div> ,
methods: {
clickAction() {
console.log(this.msg)
}
}
})
9、Vue子组件（重点）
创建、注册、使用子组件的三部曲
用法：
// 1、定义组件
// 2、注册组件
// 3、使用组件
// 如何定义子组件：组件就是一个普通对象，内部采用vue语法结构，被vue注册解释后，就会成为vue组件
let myTag = {
template: <div> <h3>子组件</h3> <p>我是自定义的子组件</p> </div> ,
};
// 了解：全局组件，不要注册就可以直接使用
Vue.component('tag', {
template: <div> <h3>全局组件</h3> <p>我是自定义的全局组件</p> </div> ,
});
new Vue({
el: '#app',
components: {
// 'my-tag': myTag,
// myTag: myTag,
myTag,
}
})
今日作业
A作业（必做）
"""
1、按照上方 知识点总结 模块，总结今天所学知识点；
2、先有一下成绩单数据
scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },
]
用table表格标签渲染以上数据，表格第一列是学生总分排序，最后一列是学生总分；
3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。
"""
B作业（选做）
"""
1、还是采用上方相同的数据，添加筛选规则：
i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科
ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据
"""