表单指令：
v-model="变量" 变量与value有关
普通：变量就代表value值
单选框：变量是多个单选框中的某一个value值
单一复选框：变量是数组，存放选中的选项value
条件指令
v-show:display:none
v-if:不渲染
v-if | v-else-if | v-else
前者条件成立，就不执行后面的分支语句，当所有条件都不成功，才执行v-else分支语句
循环指令
v-for="(v,i) in str | arr"
v-for="(v,k,i) in dic"
v：值 k：键 i：索引
sessionStorage | localStorage
前端数据库
sessionStorage：临时存储,生命周期同标签标签关闭被销毁
localStorage.key = value
localStorage.clear()
localStorage：永久存储，数据保存在内存中
分隔符
delimiters：['{{','}}']
过滤器
{{n1,n2 | f1(30) | f2}}
filters:{
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
}
计算属性
result必须渲染；绑定的方法内部出现的变量更新方法被调用；方法返回值就是result的值
computed：{
result() {
//一个方法属性值依赖于多个变量
return this.n1+this.n2;
}
}
监听属性
监听属性属性更新方法被调用；方法参数为被监听属性当前值，上一个值，多个变量依赖于一个变量
watch:{
full_name(n,o){
this.first_name = n.split('')[0]
this.last_name = n.split('')[1]
}
}
冒泡排序
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
知识点总结：
表单指令
v-model可以实现数据的双向绑定：v-model绑定的变量值可以影响表单标签的值，反过来单标签的值也可以影响变量的值
重点
<input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }}
单选框
男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}
单一复选框
卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
多复选框
爱好：<br>
男：<input type="checkbox" name="hobbies" value="male" v-model="v4">
女：<input type="checkbox" name="hobbies" value="female" v-model="v4">
哇塞：<input type="checkbox" name="hobbies" value="other" v-model="v4">
{{ v4 }}
对应data里面的数据
data: {
v1: '123',
v2: 'male',
v3: false,
v4: ['male', 'female']
}
条件指令
[v-cloak] 条件指令后面跟{display:none;}
v-show="布尔变量" 隐藏时，采用display：none进行渲染
v-if="布尔变量" 隐藏时，不在页面中渲染(保证不渲染的数据泄露)
循环指令实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>todo list 案例</title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="comment">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
comment: '',
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
},
methods: {
send_msg() {
// 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
// this.msgs.push(this.comment);
// 数组操作最全方法：splice(begin_index, count, ...args)
// this.msgs.splice(0, 2);
if (!this.comment) {
alert('请输入内容');
return false;
}
this.msgs.push(this.comment);
this.comment = '';
localStorage.msgs = JSON.stringify(this.msgs);
},
delete_msg(index) {
this.msgs.splice(index, 1);
localStorage.msgs = JSON.stringify(this.msgs);
}
}
})
</script>
<script>
// 前台数据库
// localStorage: 永久存储
// sessionStorage：临时存储(所属页面标签被关闭后，清空)
// 存
// localStorage.n1 = 10;
// sessionStorage.n2 = 20;
// 取
// console.log(localStorage.n1);
// console.log(sessionStorage.n2);
// 数组等类型需要先序列化成JSON
// localStorage.arr = JSON.stringify([1, 2, 3]);
// console.log(JSON.parse(localStorage.arr));
// 清空数据库
// localStorage.clear();
</script>
</html>
过滤器总结：
1、在filters成员中定义过滤器方法
2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
3、过滤的结果可以再进行下一个过滤（过滤的串联）
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
new Vue({
el: '#app',
data: {
num: 10,
a: 10,
b: 20,
},
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1 (num) {
console.log(num);
return num * 10;
},
f2 (a, b, c, d) {
console.log(a, b, c, d);
return a + b + c + d;
},
f3 (num) {
return num * num;
}
}
})
计算属性总结
1、computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）
2、方法属性 必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
3、绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新出发绑定方法
一般来解决的问题：一个变量值依赖于多个变量
data: {
n1: '',
n2: '',
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
监听事件总结
1、监听的属性需要在data中声明，监听方法不需要返回值
2、监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
3、监听方法有两个回调参数：当前值，上一个值
解决的问题：多个变量值依赖于一个变量值
冒泡排序模板
for (let i = 0; i < arr.length - 1; i++) { // 外层循环控制趟数
for (let j = 0; j < arr.length - 1 - i; j++) { // 内存循环控制比较次数
if (arr[j] > arr[j + 1]) {
let temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
今日日考：
-
简述一下vue框架的优点
中文API 单一面应用 - 提升移动端app运行速度 数据的双向绑定 - 变量全局通用 数据驱动 - 只用考虑数据，不需要在意DOM结构 虚拟DOM - 缓存机制 -
vue实例通过什么与页面结构建立关联？有哪些要注意的点
el:进行挂载 css3选择器，唯一，html、body不能作为挂载点，一个页面可以有多个实例对应多个挂载点 new Vue({ el: '#app', }) -
写出文本，属性与事件指令
1、{{ }}
2、v-text ：不能解析html语法的文本，会原样输出
3、v-html ：能解析html语法的文本
4、 v-once：处理的标签的内容只能被解析一次
:title="t1"
:class="c1" | :class="[c1, c2]" | :class="{c1: true}"
:style="s1" | :style="{color: c1, fontSize: f1}"
s1是字典变量，c1和f1变量分别控制字体颜色和大小
v-on：事件名=“方法变量”
简写：@事件名=“方法变量”
事件变量，不添加（），默认会传事件对象：$event
事件变量，添加（），代表自定义传参，系统不再传入事件对象，可以手动传入事件对象
<p @click="f8($event, '第一个')">{{ info }}</p>