vue系统学习1-内部指令
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>