自我总结54
表单指令
<body>
<div id="app">
<!-- 表单指令： v-model="变量" 变量值与表单标签的value相关
v-model可以实现数据的双向绑定：v-model绑定的变量值可以影响表单标签的值，反过来单标签的值也可以影响变量的值
普通：变量就代表value值
单选框：变量为多个单选框中的某一个value值
单一复选框：变量为布尔，代表是否选中
多复选框：变量为数组，存放选中的选项value
-->
<form action="">
<!--重点-->
<input type="text" name="usr" id="usr" placeholder="请输入账号" v-model="v1">
<input type="text" v-model="v1">
{{ v1 }}
<hr>
<!--1.单选框-->
男：<input type="radio" name="sex" value="male" v-model="v2">
女：<input type="radio" name="sex" value="female" v-model="v2">
{{ v2 }}
<hr>
<!--2.单一复选框-->
卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
<hr>
<!--3.多复选框-->
爱好：<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 }}
<hr>
<button type="submit">提交</button>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
v1: '123',
v2: 'male',
v3: false,
v4: ['male', 'female']
}
})
</script>
条件指令
v-show='布尔变量' 隐藏时，采用display
v-if='布尔变量' 不渲染
v-if | v-else-if | v-else
前者条件成立，就不管之后分支，当所有条件都不成功，才执行v-else分支
循环指令
<!--循环指令：
v-for="ele in string|array|obj"
-->
<!-- 列表渲染是循环,需要赋值变量(字符串)给key,使用key需要v-bind:处理 -->
<ul>
<li v-for="n in list">{{ n }}</li>
</ul>
v-for="(v, i) in str|arr"
<!-- (v:值 i:索引) v-for变量 数组 []时,接收两个值时,第一个为元素值,第二个为元素索引 -->
<ul>
<li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
</ul>
v-for="(v, k, i) in dic"
<!-- (v:值 k:键 i:索引) v-for变量 对象 {}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
<ul>
<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
</ul>
sessionStorage | localStorage
sessionStorage：生命周期同所属标签(标签关闭被销毁)
localStorage：永久保存
localStorage.key = value
localStorage.clear()
分隔符
delimiters: ['{{', '}}'] // 修改插值表达式符号
过滤器
{{ n1, n2 | f1(30) | f2 }}
filters: {
// 传入所有要过滤的条件，返回值就是过滤的结果
f1(n1,n2,n3) {return 过滤结果},
f2(f1的res) {return 过滤结果},
}
在filter成员中定义过滤器方法
可以对多个值进行过滤，过滤时还可以额外传入 辅助参数
过滤的结果可以再进行下一次过滤（过滤的串联）
计算属性
computed计算属性可以声明 方法属性（方法属性一定不能在data中重复声明）
方法属性 必须在页面渲染，才能启动绑定的方法，方法属性的值就是绑定方法的返回值
绑定的方法中出现的所有变量都会被监听，任何一个变化发生值更新都会重新发出绑定方式，从而更新方法属性的值
<body>
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<button>{{ result }}</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
n1: '',
n2: '',
},
computed: {
result () {
// 一个方法属性值依赖于多个变量
n1 = +this.n1;
n2 = +this.n2;
return n1 + n2;
}
}
})
</script>
监听属性
监听的属性需要在data中声明，监听方法不需要返回值
监听的方法名就是监听的属性名，该属性值发生更新时就会回调监听方法
监听方法有两个回调参数：当前值，上一次值
<body>
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '未知',
last_name: '未知',
},
watch: {
// n是监听的属性当前值，o是其上一次的值，监听的属性值每次更新都会回调监听方法
full_name(n, o) {
name_arr = n.split('');
this.first_name = name_arr[0];
this.last_name = name_arr[1];
},
}
})
</script>
冒泡排序
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;
}
}
}
