VUE的总结(1)

时间 2019-11-10

标签 vue 总结繁體版

原文原文链接

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

jQuery和VUE的比较

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

输出HelloWorld

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

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

生产版
json

<!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>

运行截图：
api

console.log(vm);一下获得的是一个Object
数组

vm.$el获得挂载元素
安全

若是想获取内容
vm.$data.msg或者vm.msg
数据结构

若是想要给msg赋值、改变值
vm.msg = "123456";在回车的瞬间，网页中内容也瞬间改变成123456，缘由是data至关于Model层中的一个变量，当data改变时，经过ViewModel中的data Bindings传递到View层，因此VUE框架是数据驱动的。app

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的时候什么也不显示

他这里是在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的时候

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

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>

回车以后

随便输入个其余内容，回车输出C

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;空间上仍是占位置的。

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

也能够用 !isShow

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

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>

push进去一个

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

表达式很是灵活，能够算术运算
<li v-for="(com, index) in companies">{{com}}--{{index+1}}</li>

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>

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

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

获取对象中的全部信息

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

若是想获得按照年龄大小排序的结果

<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);

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

缘由：其实这个函数至关于一个委托(或许说谓词函数更为贴切一些)，由于要对数组排序，必然要涉及到两个数组成员的比较，这个函数为你提供一种选择，以改变默认的大小比较规则，排序结果根据这个规则进行比较(函数返回值小于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>

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