美文网首页
vue系统学习1-内部指令

vue系统学习1-内部指令

作者: 杨肆月 | 来源:发表于2018-08-27 10:34 被阅读38次

    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>

    相关文章

      网友评论

          本文标题:vue系统学习1-内部指令

          本文链接:https://www.haomeiwen.com/subject/dwebiftx.html