1、v-if与v-show区别
v-if: 按需加载dom,可以减轻服务器的压力。
v-show:dom已加载好,调整css dispaly属性,可以使客户端操作更加流畅。
2、v-for循环 排序
在computed里新声明了一个对象sortItems,如果不重新声明会污染原来的数据源,这是Vue不允许的,所以你要重新声明一个对象
1)普通数组排序
<ul>
<li v-for="item in sortItems">{{item}}</li>
</ul>
new Vue({
el: '#app',
data: {
items: [54, 32, 12, 23, 11, 45, 2]
},
computed: {
sortItems() {
return this.items.sort()
}
},
methods: {
sortNumber(a,b) {
return a-b;//升序,b-a为降序
}
}
})
=>js的sort()原理
http://imweb.io/topic/565cf7253ad940357eb99881
https://hufangyun.com/2017/sort-array/
sort的内部实现
源码https://github.com/v8/v8/blob/master/src/js/array.js#L1653
Google Chrome 对 sort 做了特殊处理
// In-place QuickSort algorithm.
// For short (length <= 10) arrays, insertion sort is used for efficiency.
对于长度 <= 10 的数组使用的是插入排序(稳定排序算法) ,>10 的数组使用的是快速排序。快速排序是不稳定的排序算法。
插入排序算法:
例子:
5, 8, 3, 6, 9, 2, 1
[5, 8], 3, 6, 9, 2, 1
[3, 5, 8], 6, 9, 2, 1
[3, 5, 6, 8], 9, 2, 1
[3, 5, 6, 8, 9], 2, 1
[2, 3, 5, 6, 8, 9], 1
[1, 2, 3, 5, 6, 8, 9]
2)对象数组(根据某个属性)排序
<ul>
<li v-for="item in sortStudents">{{item}}</li>
</ul>
new Vue({
el: '#app',
data: {
students: [{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:21},{name:'King',age:45}]
},
computed: {
sortStudens() {
return this.items.sort()
}
},
methods: {
sortNumber(a,b) {
return a-b;//升序,b-a为降序
}
}
})
3、v-text和v-html
常规用{{}} 与 用v-text=“” 都能输出data值
v-text解决的问题:当我们网速很慢或者javascript出错时,会暴露我们的{{xxx}}
v-html可以输出html标签,但是需要注意的是:在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用。
4、v-on也可以写成@
5、v-model ※※※
双向数据绑定,通常都是运用在表单组件中
修饰符:
.lazy 在change时而非input时再更新数据
.number 自动将用户的输入值转为数值类型(文本框的数字会默认转变成字符串)
.trim 去掉用户输入的首尾空格
可以用在input(text、checkbox、radio)、textarea上
1)用在input(type="checkbox")上
//html
<input type="checkbox" id="cat" value="cat" v-model="animals">
<label for="cat">cat</label>
<input type="checkbox" id="dog" value="dog" v-model="animals">
<label for="dog">dog</label>
<input type="checkbox" id="fish" value="fish" v-model="animals">
<label for="fish">fish</label>
<input type="checkbox" id="bird" value="bird" v-model="animals">
<label for="bird">bird</label>
<p>{{animals}}</p>
(显示所有选中的value)
//js
data: {
animals: []
}
2)用在input(type="radio")上
//html
<input type="radio" id="cat" value="cat" v-model="animals">
<label for="cat">cat</label>
<input type="radio" id="dog" value="dog" v-model="animals">
<label for="dog">dog</label>
<input type="radio" id="fish" value="fish" v-model="animals">
<label for="fish">fish</label>
<input type="radio" id="bird" value="bird" v-model="animals">
<label for="bird">bird</label>
<p>{{animals}}</p>
(显示单个选中的value)
//js
data: {
animals: ''
}
6、v-bind 简写成:
绑定
html标签属性值:比如img的src、a的href
css属性值
1)直接绑定class
:class="className"
:class="[className1,className2]"
2)条件绑定class
简单判断
:class="{className: isTrue}"
三元运算符
:class="isTrue?className1:className2"
3)直接绑定style
:style="{color:red}"
4)用对象绑定
:style="styleObj"
data: {
styleObj: {color:red}
}
7、v-pre & v-cloak & v-once
v-pre
<div v-pre>{{msg}}</div>
直接显示{{msg}}
v-cloak
在vue渲染完指定dom后才显示
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
v-once
在第一次DOM时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程。
<div v-once>第一次绑定的值:{{message}}</div>
<div><input type="text" v-model="message"></div>
网友评论