表单指令
普通
变量代表value值
<div id="app">
<form action="">
<!--三个v1双向绑定，同时变化-->
<input type="text" name="user" v-model="v1">
<input type="text" name="age" v-model="v1">
{{ v1 }}
</form>
</div>
<script>
new Vue({
el:'#app',
data:{
v1:'123' // v1的默认值
}
})
</script>
单选框
变量为多个单选框中的某一个value值
<div id="app">
<form action="">
<input type="radio" name="sex" value="male" v-model="v1">
<input type="radio" name="sex" value="female" v-model="v1">
{{ v1 }}
</form>
<script>
new Vue({
el:'#app',
data:{
v1:'male' // 默认值
}
})
</script>
单一复选框
变量为布尔，代表是否选中
<form action="">
卖身契：同意 <input type="checkbox" name="agree" v-model="v3">
{{ v3 }}
</form>
<script>
new Vue({
el:'#app',
data:{
v3: false, // 默认值，可以传除true/false以外的值，但是在选择后还是会变为true/false;
}
})
</script>
多复选框
变量为数组，存放选中的选项的value
<form action="">
爱好：<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 }}
</form>
<script>
new Vue({
el:'#app',
data:{
v4: ['male', 'female'], // 默认值，实际顺序按照选择的先后
}
})
</script>
条件指令
<style>
[v-cloak] { display: none; }
.box {
200px;
height: 200px;
}
.r {background-color: red}
.b {background-color: blue}
.g {background-color: green}
.active {
background-color: deeppink;
}
</style>
<div id="app" v-cloak>
<!--条件指令：
v-show="布尔变量" 隐藏时，采用display:none进行渲染
v-if="布尔变量" 隐藏时，不再页面中渲染(保证不渲染的数据泄露)
-----------------------------
v-if | v-else-if | v-else
-->
<!--当is_show为false时，第一个div不能在检查中看到，第二个看不到-->
<div class="box r" v-show="is_show"></div>
<div class="box b" v-if="is_show"></div>
<hr>
<div class="wrap">
<div>
<!--绑定点击事件：给page赋不同的值-->
<button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
<button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
<button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
</div>
<div class="box r" v-if="page === 'r_page'"></div>
<div class="box b" v-else-if="page === 'b_page'"></div>
<div class="box g" v-else></div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
is_show: false,
page: 'r_page' // page的默认值，即默认选中第一个按钮
}
})
</script>
循环指令
for循环的对象可以是字符串、数组或自定义对象；
当for循环对象是字符串或数组时，可以拿到两个参数，(value,index)
当for循环对象是自定义对象时，可以拿到三个参数，(value,key,index)
<div id="app">
<!--循环指令：
v-for="ele in string|array|obj"
-->
<span>{{ info }}</span>
<hr>
<i v-for="c in info">{{ c }} </i>
<hr>
<i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
<hr>
<div v-for="e in stus">{{ e }}</div>
<hr>
<div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
<hr>
<div v-for="v in people">{{ v }}</div>
<hr>
<div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
<hr>
<div v-for="tea in teas">
<span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
info: 'good good study',
stus: ['Bob', 'Tom', 'Jerry'],
people: {
name: '猴子',
age: 36.7,
sex: '女',
},
teas: [
{
name: 'jason',
age: 73,
sex: '男',
},
{
name: 'egon',
age: 74,
sex: '男',
},
{
name: 'owen',
age: 17.5,
sex: '男',
}
]
}
})
</script>
前端数据库
缓存数据库sessionStorage和本地数据库localStorage
sessionStorage只是暂时存储，当网页关闭后，数据就消失；localStorage是永久存储数据在浏览器上。
可以在网页检查的application上查看
分隔符（了解）
<div id='app'>
${ msg }
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}'] // 渠道之间的变量名（字符串）
})
</script>
过滤器
<div id="app">
<div id="app">
<!--
总结：
1、在filters成员中定义过滤器方法
2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
3、过滤的结果可以再进行下一次过滤(过滤的串联)
-->
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
</div>
<script>
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+50;
},
f3 (num) {
return num * num;
}
}
})
</script>
计算属性
<div id="app">
<input type="text" v-model="a">
<input type="text" v-model="b">
<div>
{{ c }} <!--根据用户输入的a和b实时拼接-->
</div>
</div>
<script>
// 一个变量依赖于多个变量
new Vue({
el: "#app",
data: {
a: "",
b: "",
},
computed: { // 方法内部出现的变量会被监听，变量变化会调用方法
c: function() {
// this代表该vue实例
return this.a + this.b;
}
}
})
// 方法属性必须在页面中渲染，才会启用绑定的方法，方法属性的值就是绑定方法的返回值
</script>
监听属性
<div id="app">
<input type="text" v-model="ab">
<div>
{{ a }}
{{ b }}
</div>
</div>
<script>
// 多个变量依赖于一个变量
new Vue({
el: "#app",
data: { //监听的属性需要在data中声明，
ab: "",
a: "",
b: "",
},
watch: { // 监听的方法名就是方法名
ab: function(n,o) { // n是被监听属性当前的值，o是被监听属性上一次的值；被监听的属性变化会触发方法
// 逻辑根据需求而定
this.a = this.ab[0];
this.b = this.ab[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;
}
}
}