VUE的总结(1)

头像
李钢铁
    阅读 9 分钟
    21

    这里用到的代码：https://github.com/liyang1234...

    jQuery和VUE的比较

    jQuery中包含了大量的Dom操作，无论怎么操作，都要先找到Dom对象，对它进行操作。频繁操作Dom会导致网页的重绘和重排，比如remove一个节点，当然就要重建Dom树，也肯定对性能有影响。VUE中有虚拟DOM,它的作用就是，在内存里面通过js去模仿Dom树这样的一个数据结构。当网页中有东西变化时，并不是同步到真实Dom上，而是把这个状态和内存中的虚拟Dom进行比较，仅仅把发生变化的东西放在真实Dom上。这就是VUE比jQuery性能更好的地方。

    输出HelloWorld

    下载vue.js传送门：https://cn.vuejs.org/v2/guide...

    clipboard.png
    开发版vue.js,是未压缩过的，生产版是vue.min.js,是被压缩过的。
    开发版
    clipboard.png

    生产版
    clipboard.png

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
             //表示挂载元素 表明元素在上面id是app的div里面才好使，放在外面没有用，只当做字符串去解析
            data: {
                msg: 'Hello World'
            }
        });
    </script>
</body>
</html>

    运行截图：
    clipboard.png

    console.log(vm);一下得到的是一个Object
    clipboard.png

    vm.$el得到挂载元素
    clipboard.png

    如果想获取内容
    vm.$data.msg或者vm.msg
    clipboard.png

    如果想要给msg赋值、改变值
    vm.msg = "123456";在回车的瞬间，网页中内容也瞬间改变成123456，原因是data相当于Model层中的一个变量，当data改变时，通过ViewModel中的data Bindings传递到View层，所以VUE框架是数据驱动的。

    clipboard.png

    clipboard.png

    v-指令

    VUE官网API传送门：https://cn.vuejs.org/v2/api/

    v-if指令

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <span v-if="true">你好，我是李洋</span>

    </div>
    <script src="vue.min.js"></script>

    <script>
        new Vue({
            el: '#app',
        });
    </script>
</body>
</html>

    v-if是true的时候显示内容，false的时候什么也不显示

    clipboard.png

    clipboard.png

    他这里是在DOM结构中被删除了

        <div id="app">
        <span v-if="isClick">你好，我是李洋</span>
    </div>
    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isClick: false
            }
        });
    </script>

    当vm.isClick = true的时候
    clipboard.png

    v-if后面也可以写表达式
    <span v-if="isClick == 1?true:false">你好，我是李洋</span>
    输入vm.isClick=0时，
    clipboard.png

    v-else-if指令

        <div>
        <span v-if="letter == 'A'">A</span>
        <span v-else-if="letter == 'B'">B</span>
        <span v-else="letter == 'C'">C</span>
    </div>
    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el: '#app',
            data: {
                isClick: 1,
                letter: "A"
            }
        });
    </script>

    clipboard.png
    回车之后

    clipboard.png

    随便输入个其他内容，回车输出C
    clipboard.png

    v-show指令

    <div>
    <span v-show="isShow">SHOW</span>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isClick: 1,
            letter: "A",
            isShow: true
        }
    });
</script>

    vm.isShow=false之后，内容消失，但是v-show是在样式当中自动设置了displayLnone;空间上还是占位置的。
    clipboard.png

    所以当频繁显示true,false的时候使用v-show，因为若使用v-if会不断的增删DOM树，形象性能。

    也可以用 !isShow

    <span v-show="isShow">SHOW</span>
<span v-show="!isShow">NOT SHOW</span>

    clipboard.png

    v-for指令遍历数组

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="com in companies">{{com}}</li>
        </ul>
    </div>

    <script src="vue.min.js"></script>

    <script>
        let vm = new Vue({
            el :'#app',
            data: {
                companies: ['百度','阿里巴巴','腾讯','滴滴','小米']
            }
        });
    </script>
</body>
</html>

    clipboard.png

    push进去一个
    clipboard.png

    如果还想输出数组下标 双花括号中的变量名字是随便起的
    <li v-for="(com, index) in companies">{{com}}--{{index}}</li>
    clipboard.png

    表达式非常灵活，可以算术运算
    <li v-for="(com, index) in companies">{{com}}--{{index+1}}</li>

    clipboard.png

    v-for指令遍历对象

    <div>
<ul>//遍历对象的时候有三个参数，值，键，索引 **双花括号中的变量名字是随便起的，这样只是比较语义化**
        <li v-for="(val,key,index) in object">{{val}}--{{key}}--{{index+1}}</li>
    </ul>
</div>

<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el :'#app',
        data: {
            companies: ['百度','阿里巴巴','腾讯','滴滴','小米'],
            object: {
                name: 'liyang',
                age: 22,
                company: 'Baidu'
            }
        }
    });
</script>

    v-for指令遍历数组中的对象，类似json对象格式

    <div>
    <ul>
        <li v-for="obj in arr">
            {{obj}}
        </li>
    </ul>
</div>

<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el :'#app',
        data: {
            companies: ['百度','阿里巴巴','腾讯','滴滴','小米'],
            object: {
                name: 'liyang',
                age: 22,
                company: 'Baidu'
            },
            arr: [{
                name: 'liyang',
                age: 22,
                company: 'Baidu'
            },{
                name: 'qqq',
                age: 23,
                company: 'Alibaba'
            },{
                name: 'www',
                age: 24,
                company: 'Tencent'
            }]
        }
    });
</script>

    获取数组中的每一个对象，运行效果：
    clipboard.png

    获取对象中的某个信息
    {{obj.name}}
    clipboard.png

    获取对象中的所有信息

    <ul>
    <li v-for="obj in arr">
         <div v-for="(val,key) in obj">{{val}}--{{key}}</div>
         <!-- {{obj}} -->
    </li>
</ul>

    clipboard.png

    如果想得到按照年龄大小排序的结果

    <ul>
    <li v-for="obj in arrSort">
         <div v-for="(val,key) in obj">{{val}}--{{key}}</div>
          <!-- {{obj}} -->
    </li>
</ul>
computed: {
            arrSort() {
                return this.arr.sort(function (a, b) {
                    return a.age - b.age;
                });
            }
        }

    这里就很困惑哦，为啥a.age-b.age返回这个值就是升序排序了
    去查了一下

     var numArr = [13,22,43,9,34,223,98];
    numArr.sort(function(a,b) {
        return a - b;//升序
    });
    console.log(numArr);

    clipboard.png

      var numArr = [13,22,43,9,34,223,98];
    numArr.sort(function(a,b) {
        return b - a;//降序
    });
    console.log(numArr);

    clipboard.png

    原因：其实这个函数相当于一个委托(或许说谓词函数更为贴切一些)，因为要对数组排序，必然要涉及到两个数组成员的比较，这个函数为你提供一种选择，以改变默认的大小比较规则，排序结果根据这个规则进行比较(函数返回值小于0认为是第一个元素小于第二个元素，等于0是两个元素相等，大于0是第一个元素大于第二个元素)。简单的改变这个函数，你就可以实现倒序排序。也可以对一个具有多个属性的对象进行排序。

    v-text指令

    v-text指令相当于先解析双花括号，再解析里面的内容，解决页面加载有双花括号会闪烁的问题。
<div id="app">
    <span v-text="msg"></span>
    <span v-html="msg"></span>
</div>
<script src="vue.min.js"></script>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            msg: '<h3>I am Liyang</h3>'
        }
    });
</script>

    clipboard.png
    v-html不建议使用，会注掉一些标签，引起安全性问题

    vue.js
    李钢铁
    830 声望47 粉丝

    简单粗暴

    « 上一篇
    flex几种多列布局
    下一篇 »
    VUE的总结(2)

    引用和评论

    推荐阅读
    头像
    picture-in-picture

    李钢铁阅读 3.5k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    Vue.js-方法与事件

    寒青赞 6阅读 3.3k

    头像
    Vue使用mixins

    一念赞 4阅读 2.7k

    头像
    这个前端神器，竟让滴滴、美团都爱不释手？！

    白水赞 4阅读 562评论 1

    头像
    使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

    注销赞 1阅读 1.7k评论 1

    头像
    推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

    激动个球赞 1阅读 979

    0 条评论
    得票最新