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

clipboard.png
開發版vue.js,是未壓縮過的，生產版是vue.min.js,是被壓縮過的。
開發版
clipboard.pnggithub

生產版
clipboard.pngjson

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

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框架是數據驅動的。app

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不建議使用，會注掉一些標籤，引發安全性問題

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程