Vue基础
表单指令
语法：
- v-model="变量"，变量与value值有关
- 与input框value值紧密相连
- 指的是输入框和变量绑定在一起，变量变，浏览器上的值也变，浏览器输入框的值变，变量的值也变。
<div id="app">
<form action="">
<p>input框数据双向绑定</p>
<p>请输入：<input type="text" v-model="v1"></p>
<p>请输入：<input type="password" v-model="v1"></p>
<p>输入的值是：{{ v1 }}</p>
<hr>
<br>
<p>input框单选数据双向绑定</p>
<span>男：<input type="radio" v-model="v2" value="nan"><span>
<span>女：<input type="radio" v-model="v2" value="nv"><span>
<p>选择的值是：{{ v2 }}</p>
<hr>
<br>
<p>input框单一复选框选数据双向绑定</p>
<p><input type="checkbox" v-model="v3">阅读条款并同意协议</p>
<p>选择的值是：{{ v3 }}</p>
<hr>
<br>
<p>input框多选复选框数据双向绑定</p>
<p>爱好：</p>
<span>篮球：<input type="checkbox" value="篮球" v-model="v4"><span>
<span>乒乓球：<input type="checkbox" value="乒乓球" v-model="v4"></span>
<span>上网：<input type="checkbox" value="上网" v-model="v4"></span>
<p>选择的值是：{{ v4 }}</p>
<hr>
<br>
<button type="submit">提交</button>
</form>
</div>
条件指令
- v-show="布尔值变量" 如果为false，会加display:none属性
- v-if="布尔值变量" 如果为false，不会渲染此标签
- v-if | v-else-if | v-else
<div class="box r" v-show="is_show"></div>
<div class="box b" v-if="is_if"></div>
<div>
<div>
<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 v-if="page === 'r_page'" class="box r"></div>
<div v-else-if="page === 'b_page'" class="box b" ></div>
<div v-else class="box g"></div>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
is_show:true,
is_if:true,
page:'r_page',
}
})
循环指令
<p v-for="v,i in str">
{{ i }}-{{ v }}
</p>
<hr>
<!-- 按key循环出每个key的值， -->
<p v-for="v in dic">
{{ v }}
</p>
<hr>
<!-- 按key循环出每个key的值，可增加其他如 显示key -->
<p v-for="v,k in dic">
{{ k }}-{{ v }}
</p>
<hr>
循环指令使用小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<input type="text" v-model="msg">
<button type="button" @click="send_msg">留言</button>
<ul>
<li v-for="v,i in content" @click="delete_msg(i)">{{ i }}-{{ v }}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el:'#app',
data:{
msg:'',
// 利用三元表达式获取前端浏览器的数据库的数据。
content:localStorage.msg ? JSON.parse(localStorage.msg) : [],
},
methods:{
send_msg(){
// 判断用户是否输入内容
if (!this.msg){
alert('请输入内容')
// 如果进入判断了就停止运行下面的代码
return false;
}
// 将用户输入的内容添加到数组对象中，
// for循环只要对content数组对象for循环展示即可。
this.content.push(this.msg)
// 用户输入 完毕之后清空输入框。
this.msg = ""
// 保存到前端浏览器数据库中
localStorage.msg = JSON.stringify(this.content)
},
delete_msg(i){
console.log(i)
// 数组操作方法
// splice 三个参数说明：从什么索引开始，操作几个，是否删除
this.content.splice(i,1)
localStorage.msg = JSON.stringify(this.content)
}
}
})
</script>
</body>
</html>
前端数据库
前端数据库：
// 前台数据库
// 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();
分隔符（了解）
修改插值表达式的符号
delimiters:['[{','}]']
<div id="app">
{{ msg }}
[{ msg }]
</div>
<script>
let app = new Vue({
el:'#app',
data:{
msg:'msg',
},
// 修改插值表达式的符号
delimiters:['[{','}]']
})
</script>
过滤器
关键字：
filters:{函数}
<div id='app'>
<p>
{{ num | f1 }}
</p>
<p>
{{ a,b | f2(10,20) | f3 }}
</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
num:1,
a:10,
b:20,
},
// 传入所有需要过滤的条件，使用flters关键字定义过滤器
filters:{
// 如果多接收参数 则没有值
f1(num,a,b){
console.log(num,a,b);
return num * 10;
},
// 如果在{{}} 中调用函数的时候传入多余的参数，则接收多余的参数
f2(a,b,c,d){
console.log(a,b,c,d);
return a + b + c + d;
},
// 可以对过滤的结果进行再次过滤（过滤串联）
f3(num) {
return num * num
}
}
})
</script>
计算属性
关键字:computed
主要用于一个方法的属性值依赖于多个变量，处理多个变量的作用
<div id="app">
<input type="number" min="0" max="100" v-model="n1">
+
<input type="number" min="0" max="100" v-model="n2">
=
<input type="button">{{ result }}
</div>
<script>
let app = new Vue({
el:'#app',
data:{
n1:'',
n2:''
},
computed:{
result(){
console.log('被调用了');
n1 = +this.n1;
n2 = +this.n2;
return n1 +n2;
}
}
})
</script>
监听属性
关键字：watch
处理统一个变量，与计算属性相反
<div id="app">
<p>姓名：<input type="text" v-model="full_name"></p>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
<script>
let app = new Vue({
el:'#app',
data:{
full_name:'',
first_name:'未知',
last_name:'未知'
},
watch:{
full_name(n,o){
// 可以接收两个参数
// 第一个是当前的输入的值，第二个是上一次输入的值
name_arr = n.split('');
console.log(name_arr[0])
this.first_name = name_arr[0];
this.last_name = name_arr[1];
}
}
})
</script>
冒泡排序
<script>
let a = [4,2,5,7,2,3]
// 4.2.5.6.7.8
// 推导步骤
// 2,4,5,7,2,3
// 2,4,5,2,7,3
// 2,4,5,2,3,7
// 2,4,2,5,3,7
// 2,4,2,3,5,7
// 2,2,4,3,5,7
// 2,2,3,4,5,7
for (let i=0;i<a.length-1;i++){
for (j=0;j<a.length-1-i;j++){
if (a[j] > a[j+1]){
let tmp = a[j]
a[j] = a[j+1]
a[j+1] = tmp
}
}
}
console.log(a)
</script>
