昨日内容复习
1、导入vue环境
在html页面中用script标签导入vue环境
2、创建挂载点
new Vue({ el: "#app" })挂载页面标签，建立关联后控制页面标签
挂载点才有css3选择器语法
挂载点就是vue与页面的关联
挂载点只检索第一个匹配结果
3、插值表达式1
插值表达式{{ }}可以完成基础运算
num | num + 10 | str.split() + "拼接"
4、插值表达式2
插值表达式中的变量有实例成员 data 来提供
{{ msg }}
let msg = '12345'
new Vue({
el: "#app",
data: {
msg,
}
})
5、事件绑定
v-on指令可以给标签绑定事件，事件函数由实例成员 methods 来提供
6、过滤器
插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供
<p id="app" @click="fn">{{ msg | f1(1), 10 | f2(100, 200) }}
let msg = '12345'
new Vue({
el: "#app",
data: {
msg,
},
methods: {
fn(){}
},
filters: {
f1(v1,v2){return v1+v2},
f2(v1,v2,v3,v4){return v1+v2+v3+v4}
}
})
7、面向对象
面向对象js： { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
function Fn(v1, v2){
this.n1 = v1;
this.n2 = v2;
}
let f1 = new Fn(10, 20);
f1.n1
8、文本指令
文本指令：{{ }} | v-text="" | v-html=""
9、事件指令
事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn(\(event, 自定义参数)" @click="fn" | @click="fn()" | @click="fn(10， 20)" | @click="fn(\)event, 10)"
10、属性指令
属性指令：v-bind:属性名="" | :title="变量" | :style="字段变量" |
:class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
:title="var1" | :style="dic1" | :class="var2" | :class="[var3, var4]" |
:class="{box: true|false}"
var2 = 'box' | var2 = 'box circle'
今日学习内容
1、表单指令
v-model完成表单指令，简单的控制value，单选框中的使用，单独复选框的使用以及复选框中的使用
2、斗篷指令
作用：斗篷指令解决页面闪烁
用法：
// 方法一
<style>
[v-cloak] {
display: none;
}
</style>
// 方法二
<div id="app" v-cloak>3、条件指令
条件指令v-if与v-show区别，v-if家族成员以及上分支会成立会屏蔽下分支的工作机制
用法：
<!--条件指令：
v-if="true|false"，为假时，在页面上不渲染，可以隐藏标签中的信息
v-show="true|false"，为假时，在页面中用display:none渲染，虽然没展示，但是任在页面结构中
-->
<!-- v-if是一个家族
v-if
v-else-if
v-else
1、上分支成立，下分支会被屏蔽
2、else分支只要在所有上分支都为假时显示，且不需要条件
-->
<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如何循环渲染字符串、数组、字典，以及需要嵌套循环渲染赋值结构
用法：
<!--循环指令：
v-for=""
语法：
v-for="成员 in 容器"
-->
<!--1、字符串循环渲染: 可以只遍历值，也可以遍历值与索引-->
<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可以设置数据的监听方法，在监听属性更新时，完成特定逻辑
用法：
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<span>{{ first_name }}</span>
</p>
<p>
名：<span>{{ last_name }}</span>
</p>
</div>
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两条数据
"""