'''
复习
'''
"""
1、vue框架的优势
中文API
单一面应用 - 提升移动端app运行速度
数据的双向绑定 - 变量全局通用
数据驱动 - 只用考虑数据,不需要在意DOM结构
虚拟DOM - 缓存机制
2、vue如何在页面中引入
1)通过script标签引入vue.js环境
2)创建vue实例
3)通过el进行挂载
new Vue({
el: '#app', // css3选择器,唯一,html、body不能作为挂载点,一个页面可以有多个实例对应多个挂载点
})
3、插值表达式
{{ 变量以及变量的简单运算 }}
{{ ((num * 10) + 'string').split('')[0] }}
4、文本指令
{{ }} | v-text | v-html | v-once
5、方法指令
v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
@click='btnClick'
btnClick(ev) {}
@click='btnClick(1, 2, $event)'
btnClick(n1, n2, ev) {}
btnClick(...args) {}
6、属性指令
v-bind:属性="变量" | :属性="变量"
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量,c1和f1变量分别控制字体颜色和大小
7、js补充
function可以作为类,内部会有this
箭头函数内部没有this
{}里面出现的函数称之为方法: 方法名(){}
function Fn(name){this.name = name}
let f1 = new Fn('Bob')
let f2 = ()=>{}
{
f3(){}
}
"""
“”
总结内容
“”
"""
1、表单指令:
v-model="变量" 变量与value有关
普通:变量就代表value值
单选框:变量为多个单选框中的某一个value值
单一复选框:变量为布尔,代表是否选中
多复选框:变量为数组,存放选中的选项value
2、条件指令:
v-show: display:none
v-if: 不渲染
v-if | v-else-if | v-else
3、循环指令:
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
4、sessionStorage | localStorage
5、分隔符:delimiters: ['{{', '}}'],
6、过滤器:
{{ n1, n2 | f1(30) | f2 }}
filters: {
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
}
7、计算属性:
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
8、监听属性:
watch: {
full_name(n, o) {
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
9、冒泡排序:
for (let i=0; i<arr.length-1; i++) { // 趟数
for (let j=0; j<arr.length-1-i; j++) { // 比较次数
// 处理条件即可
if (arr[j]参数 > stus[j + 1]参数) {
let temp = stus[j];
stus[j] = stus[j + 1];
stus[j + 1] = temp;
}
}
}
"""
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两条数据
'''