vue_02
表单指令:
<form action="">
<!--表单指令：v-model="变量"-->
<!--双向绑定：一个地方修改值，所有地方的数据都会被更新-->
<div>
<input type="text" v-model="info" name="usr">
<input type="password" v-model="info" name="pwd">
<p>{{ info | infoFilter }}</p>
</div>
<div>
<!--单选框：v-model="变量存放的是某个单选框的value值，代表该选框选中"-->
男<input type="radio" name="sex" value="male" v-model="sex_val">
女<input type="radio" name="sex" value="female" v-model="sex_val">
</div>
<div>
<!--单独的复选框：v-model="true|false代表该选框是否选中"-->
是否同意<input v-model="cb_val" value="yes" type="checkbox" name="agree">
</div>
<div>
<!--群复选框：v-model="存放选中选框value的数组"-->
<!--cbs_valrug如果传空数组会一个都不选,如果数组对应里面的value会勾选-->
<!--cbs_valrug如果传true|false,里面的能容就表示要么全选要么都不选->
条件指令:
v-if:隐藏时不渲染,隐藏时在内存中建立缓存，可以通过key属性设置缓存的键()
v-show:隐藏时用display:none渲染 ()
<div class="box red" v-if="ture|flase" key="box_red"></div>
<div class="box blue" v-show="ture|flase"></div>
接收的值只能是ture|flase,如果是0则是flase,如果是1则是ture
key属性可以对于在内存中名字进行设置,且f12你看不到key这个属性
v-if|v-elif|v-else:
注意点:
if如果生效就不往下走同理elif也一样
else前面不生效即使他设置了flase他依旧会生效
所有else一般不做任何值设置他都是true
循环指令：
三元表达式： 判断内容 ? 满足返回的值 : 不满足返回的值
or 逻辑判断： var a = msg || '没有消息'
v- for :
#第一种
<div v-for="item in items"></div>
#第二种
<div v-for="(item, index) in items"></div>
#第三种
<div v-for="(val, key) in object"></div>
#第四种
<div v-for="(val, name, index) in object"></div>
(优化字典查询效率)：正对于对象为字典,如果是普通的列表数组类型的index为空
前端数据库:
前端页面缓存（浏览器）：
localStorage.key名称:key值:永久缓存但是可以手动删除
sessionStorage.key名称:key值:临时缓存关闭页面或者关闭浏览器重新打开就会消失
三元表达式： localStorage.msgs 缓存数据
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
存:
localStorage.n1 = 10;
sessionStorage.n2 = 20;
localStorage.msgs = JSON.stringify(this.msgs)
取:
console.log(localStorage.n1);
console.log(sessionStorage.n2);
数组等类型需要先序列化成JSON
localStorage.arr = JSON.stringify([1, 2, 3]);
console.log(JSON.parse(localStorage.arr));
清空数据库:
localStorage.clear();
js 数组操作：
unshift | push 首尾增
shift | pop 首尾删
数组操作最全方法：splice(begin_index, count, ...args)：
begin_index: 开始操作的索引
count : 操作几位
...args(*args) : 更改后的内容
this.msgs.splice(0, 2); 删除
分隔符：
-- delimiters 解决语法冲突
修改插值表达式符号！！
<div id="app">
[[ msg }}
</div>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
// 修改插值表达式符号
delimiters: ['[[', '}}'], 两边符号用'符号' 差值的内容`, `来表示
})
</script>
过滤器:
filters : 传入所有过滤的条件，返回过滤的结果
{{ num| f1 | f2 | f3 }}
filters : {
f1(num) {
return num * num
}
}
计算属性：
methods: methods属性里面的方法会在数据发生变化的时候，只要引用了此里面分方法，方法就会自动执行。这个属性没有依赖缓存
computed: 计算属性该属性里面的方法必须要有return返回值，这个返回值就是（value值）
总结：
1) 计算后属性不需要在data中重复定义
2) 计算后属性必须渲染后，绑定的方法才会生效这里指就是定义后的变量名在上面html中显示
3) 计算后属性绑定的方法中的任意变量值更新，方法都会被调用
4) 计算后属性为只读属性(不可写)
data: {
n1: '',
n2: '',
// result: 0, #不需要在data中重复定义
},
computed: {
result () {
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
监听属性:
1.获取data里面的某个变量
$data.msg也可以简写成msg
2.获取data全部内容
$data
3.获取vue中vue挂钩的对象
$el
4.获取除data以外的属性
$options.Vue中的属性名称(如arr等等)
watch : 监听的是data属性里面的数据，当这个数据发生变化时，将自动执行这个函数
watch:{
data中的变量( n, 0){
当data中变量发生的时候会执行这里的逻辑函数
}
}
总结：
1) 监听绑定的对象，该属性可以get、set
2) 监听的对象一旦发生值更新，绑定的方法就会被调用
3) n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法
监听的对象是已定于的属性data中定义或者全局中如$route比较常用是路由传参反正就是this能够通过.出来的属性
vue编译不生效，闪烁
1.在标签内添加 v-pre
script src="vue.js"></script>
<div>
<p v-pre>{{msg}}</p> //网页中显示{{msg}}
<p >{{msg}}</p> //网页中显示66
</div>
<script>
new Vue({
el:'div',
data:{
msg:'66'
},
})
</script>
2.斗篷： 利用v-cloak在加载vue完成后他会消失
<style>
[v-cloak]{display:none}
<</style>
<div>
<p v-cloak>{{msg}}</p>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'div',
data:{
msg:'66'
},
})
</script>
冒泡排序:
通过与相邻元素比较的方式每次将一个数交换位置
python 版：
lst = [3, 6, 9, 1, 8, 7, 2, 5, 4, 0]
print("排序前: %s\r\n" %lst)
for i in range(len(lst)-1):
print("第%s轮" % (i+1)) # 外层循环控制趟数
for j in range(len(lst)-i-1): #内层循环控制比较次数
# 如果前大后小，则交换位置
if lst[j] > lst[j+1]:
lst[j],lst[j+1] = lst[j+1],lst[j]
print(" 第%s次 [%s]:%s,[%s]:%s比较 互换 %s" % (j+1,j,lst[j+1],j+1,lst[j],lst))
else:
print(" 第%s次 [%s]:%s,[%s]:%s比较 不变 %s" % (j+1,j,lst[j],j+1,lst[j+1],lst))
print("\r\n排序后: %s" % lst)
js 版：
let arr = [3,4,5,1,2]
console.log(arr)
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);
