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>