VUE12.17
表单指令
v-model="变量" 变量与value有关
普通：变量就代表value值
单选框：变量为多个单选框中的某一个value值
单一复选框：变量为布尔，代表是否选中
多复选框：变量为数组，存放选中的选项value
<div id="app">
<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>
------------------------------------------------------------
<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:none
v-if: 不渲染
v-if | v-else-if | v-else
<div id="app">
<!-- v-if: 值为false时，在页面上不渲染，并且隐藏标签中的信息-->
<p v-if="false">if</p>
<!-- v-show： 值为false时，在页面上是用display:none 渲染隐藏的，但是仍然存在当前页面的结构中 -->
<p v-show="false">show</p>
<!--上分支成立时，所有的下分支都会被屏蔽，v-else只有在上分支全部为假时才会显示，所以v-else不需要条件-->
<p v-if="1">if</p>
<p v-else-if="0">elif</p>
<p v-else-if="0">elif</p>
<p v-else>else</p>
</div>
条件指令实例
<style>
.box {
width: 200px;
height: 200px;
}
.r {background-color: red}
.g {background-color: green}
.b {background-color: black}
.action{background-color: pink}
</style>
<div id="app">
<!-- 给定button的单击事件并传入参数，并且给button绑定{}属性指令：判断当前c变量的值来确定选中按钮的高亮-->
<button @click="change('red')" :class="{ action:c === 'red' }">红</button>
<button @click="change('green')" :class="{ action:c === 'green' }">绿</button>
<button @click="change('black')" :class="{ action:c === 'black' }">黑</button>
<br>
<!-- 利用v-if家族来判断变量c的值来确定是否显示该标签 -->
<div class="box r" v-if="c === 'red'"></div>
<div class="box g" v-else-if="c === 'green'"></div>
<div class="box b" v-else></div>
</div>
<script>
new Vue({
el: '#app',
data:{
// localStorage是浏览器永久的数据库，可以将c变量存储在其中记录最后一次点击状态。
// 判断localStorage中是否有变量c，有的话则使用里面的c，没有就用默认值red
c: localStorage.c ? localStorage.c : 'red',
},
methods:{
change(color){
this.c = color;
// 将最后一次的点击状态保存在localStorage中，方便下一次打开时找到变量c的值
localStorage.c = color;
}
}
})
</script>
循环指令
v-for="(v, i) in str|arr"
v-for="(v, k, i) in dic"
<div id="app">
<!--循环指令：v-for="成员 in 容器"-->
<!--循环数组:数组里可以是任意数据类型的数据-->
<p v-for="v in lis">{{ v }}</p>
<!--循环的成员可以为两个参数，第一个为value值，第二个为index索引-->
<p v-for="(v,i) in lis">{{ i }}:{{ v }}</p>
<!--实例：在每两个循环成员之间加一个|，不包括首尾-->
<p>
<span v-for="(v,i) in lis">
<span v-if="i != 0"> | </span>
{{ v }}
</span>
</p>
<!--循环对象时：只接收一个参数只循环对象的值-->
<p v-for="u in user">
{{ u }}
</p>
<!--循环对象时：接收两个参数循环对象的值和键-->
<p v-for="(u,k) in user">
{{ k }}:{{ u }}
</p>
<!--循环对象时：接收三个参数循环对象的值、键和索引-->
<p v-for="(u,k,i) in user">
{{ i }}--{{ k }}:{{ u }}
</p>
<!--循环遍历列表套对象，显示出每个对象的键与值，并且在每两个对象之间添加分割线-->
<div v-for="(stu,i) in students">
<hr v-if="i != 0">
<p v-for="(v,k) in stu">
{{ k }}:{{ v }}
</p>
</div>
</div>
循环指令案例
<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>
<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)
// splice() 三个参数：开始索引、操作长度、操作的结果的集合
// 比如最后一个参数不行就是删除，全为0就是删除首个
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>
分隔符
用来修改插值表达式的符号
new Vue({
el: '#app',
data: {
num: 100
},
delimiters: ['{[', ']}'],
})
过滤器
- 在filts成员中定义过滤器方法
- 可以对多个值进行过滤，过滤时还可以额外传入辅助参数
- 过滤的结果可以再进行下一次过滤
<body>
<div id="app">
<p>{{ num | f1 }}</p>
<p>{{ a, b | f2(30, 40) | f3 }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<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;
},
f3 (num) {
return num * num;
}
}
})
</script>
计算属性
- computed中定义的是方法属性，data中定义的也是属性，所以不需要重复定义属性，可以省略data里的
- 方法属性的值来源于绑定的方法的返回值，类似于python中的property装饰器，将方法封装成数据属性
- 方法属性必须在页面中渲染后，绑定的方法才会被调用
- 方法中出现的所有变量都会被监听，任何变量发生值更新都会调用一次绑定方法，重新更新方法属性的值
- 方法属性值不能手动设置，必须通过绑定的方法进行设置
- js属于弱类型语言，将字符串转换为整型可以在字符串前加'+'即可，前提是该字符串可以转换为整型
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
监听属性
- watch中给已有的属性设置监听方法
- 监听的属性值一旦发生改变，就会调用该监听方法，进行逻辑处理
- 监听方法不需要返回值，return只有主动结束该方法的作用
computed: {
result() {
// 一个方法属性值依赖于多个变量
return this.n1 + this.n2;
}
}
冒泡排序
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 tmp = arr[j]
arr[j]=arr[j+1]
arr[j+1]=tmp
}
}
}
