vue

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两条数据
"""