VUE學習筆記（二）

VUE學習筆記（一）

四、Vue對象總結

Vue.js通過加載js，實作對頁面的快速渲染。vue封裝的js該如何使用？就必須了解MVVM雙向資料綁定模式。Vue将視圖層和資料層分離，通過MVVM建立視圖層和資料層的連接配接。其中，插值表達式是一種連接配接方式，可以通過插值表達式以多種方式，快速的從資料層擷取資料并展示在視圖層上。資料層Vue對象，也是由很多部分組成，比如之前介紹的el，data，methods等，以及之後要介紹的mount，computed等。

五、Vue的分支 v-if

5.1 v-if

Vue中的分支語句v-if非常好了解，邏輯跟Java中的if-else相同。v-if語句塊包含以下内容：

v-if

v-else

v-else-if

接下來以一個簡單例子即可了解：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p v-if="flag">
                今天天氣很舒服！
            </p>
            <p v-else-if="rich">
                今天天氣很燥熱！晚上要去放松一下！
            </p>
            <p v-else="rich">
                晚上隻能自嗨！
            </p>
        </div>
        
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag:false,
                rich:false
            },
            methods:{    
            }
        });
    </script>
</html>

從這個例子可以看出，vue對象中的data提供了分支的條件。根據條件，如果是true，則v-if的内容就會顯示，反之不顯示。

5.2 v-show

v-if和v-show之間有着看似相同的效果，但優化上卻有差別。先看下面這個例子：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
            <p v-show="rich">
                有錢！
            </p>
            <p v-if="rich">
                有錢！
            </p>
            <button type="button" @click="rich=!rich">今晚彩票開獎</button>
        </div>
        
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        
        new Vue({
            
            el:'#app',
            data:{
                flag:false,
                rich:false
            },
            methods:{
                
            }
        });
        
        
    </script>
</html>

通過點選“今晚彩票開獎”按鈕，能切換rich的值，此時發現，v-if和v-show的顯示狀态都會來回切換。看起來是一樣的，但通過檢視控制台代碼發現，v-show實際會将p标簽的css樣式的display屬性設為none來達到隐藏的效果。

而v-if是直接在頁面上添加和删除p标簽來達到效果，是以v-show在反複切換的應用場景下，效率比v-if更高。

六、Vue的循環 v-for

Vue中的循環關鍵字并沒有Java的那麼多，隻有v-for，但用法上有多種。接下來我們來逐一介紹。

6.1 普通的for循環

我們需要定義資料源，然後通過v-for來周遊資料源，再使用內插補點表達式輸出資料。

<body>

<div id="app">
    <ul>
        <li v-for="a in args">{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

在這個例子中，資料源提供了一個數組。視圖層通過v-for來循環輸出多個li标簽，非常簡單。

6.2 帶着索引的for

<body>

<div id="app">
    <ul>
        <li v-for=" (a,i)  in  args" :key='i'>{{i}}{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>

此時的i就是每次循環的循環變量，從0開始一直到元素個數-1

6.3 周遊一個對象中的資訊： v、k、i

<body>

<div id="app">
    <ul>
        <li v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
                student:{
                username:'小魚',
                age:20,
                girl:'如花'
            }
        }
    });

</script>

v、k、i 這幾個字元可以自己定義，分别表示每次循環内容的值、鍵、序号。

v: 循環中每條資料的值小魚、20、如花

k: 循環中每天資料的鍵 username、age、girl

i: 循環的序号，從0開始

頁面效果如下：
VUE學習筆記（二）

6.4 周遊一個對象數組：嵌套的for循環

<body>

<div id="app">
    <ul>
        <li v-for=" student in students">
            <span v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</span>
        </li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
                students:[
                {
                    name:'xiaoming',
                    age:20
                },
                {
                    name:'xiaowang',
                    age:21
                }
            ]
        }
    });
</script>

可以清楚的看到，此時資料源是一個student數組，通過兩層v-for循環，外層周遊數組中的每個student對象，内層v-for周遊每個對象的v、k、i。

七、Vue的屬性綁定

Vue提供了多個關鍵字，能快速的将資料對象中的值綁定在視圖層中。

7.1 v-model

通過v-model将标簽的value值與vue對象中的data屬性值進行綁定。

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="title">
            {{title}}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                title:"hello vue"
            }    
        })
    </script>
</html>

此時input标簽中加入了“v-model='title'”，表示input的value值與vue對象中的title屬性綁定，當在input輸入框中輸入内容會實時修改title的值。于是{{title}}插值表達式能實時輸出input輸入框内的值。


VUE學習筆記（二）

7.2 v-bind

我們知道插值表達式是不能寫在html的标簽的屬性内的，那如果一定要用vue中的屬性作為html标簽的屬性的内容，就可以通過v-bind進行屬性綁定。

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="link"></a>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                link:'http://www.baidu.com'
            }
        })
    </script>
</html>

這樣，a标簽内的href屬性就可以使用vue對象中的屬性值。

注意： v-bind也可以簡寫，使用冒号“:”來代替。

<a v-bind:href='link'></a>  ==>  <a :href='link'>

八、Vue的事件綁定

關于事件，要把握好三個步驟：設參、傳參和接參。

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            sum={{sum}}<br/>
            {{sum>10?'總數大于10':'總數不大于10'}}<br/>
            <button type="button" @click="increase(2)">增加</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                sum:0
            },
            methods:{
                increase:function(s){
                    this.sum+=s
                }
            }
        })
    </script>
</html>

從這裡例子中：

設參：

<button type="button" @click="increase(2)">增加</button>

傳參：

increase:function(s)

接參：

this.sum+=s

接下來我們來看一下VUE中如何進行事件綁定。

8.1 v-on

通過配合具體的事件名，來綁定vue中定義的函數

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-on:click="changeMajor"  />
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                major:'java'
            },
            methods:{
                sayHi:function(){
                    alert("HELLO VUE!");
                },
                changeMajor:function(){
                    console.log("change Title")
                }
            }
    </script>
</html>

此時，該按鈕，在點選時将會調用Vue對象中定義的changeMajor方法。

注意： v-on也可以簡寫，使用"@"替代。

<input type="text" @click="changeMajor"  />

8.2 事件修飾符

可以使用Vue中定義好的事件修飾符，快速達到效果。檢視以下例子：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <p @mousemove="mm">
                x:{{x}}
                y:{{y}}
                <span @mousemove.stop>滑鼠移動到此即停止</span>
            </p>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                x:0,
                y:0
            },
            methods:{
                mm:function(event){
                    this.x = event.clientX;
                    this.y = event.clientY;
                },
                stopm:function(event){
                    event.stopPropagation();
                }    
            }
        })
    </script>
</html>

當滑鼠經過P标簽區域内時，區域内就會顯示X和Y軸的坐标，如果經過P标簽内的Span标簽内時，此時會調用事件屬性mousemove.stop預定的效果，滑鼠移動的效果将會被取消，X和Y不再顯示資訊。

8.3計算屬性：computed

8.3.1 什麼是計算屬性

計算屬性的重點突出在屬性兩個字上（屬性是名詞），首先它是個屬性其次這個屬性有計算的能力（計算是動詞），這裡的計算就是個函數；簡單點說，它就是一個能夠将計算結果緩存起來的屬性（将行為轉化成了靜态的屬性），僅此而已；

8.3.2 計算屬性與方法的差別

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局篇 計算屬性</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>

<div id="vue">
    <p>調用目前時間的方法：{{currentTime1()}}</p>
    <p>目前時間的計算屬性：{{currentTime2}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

[說明]

methods：定義方法，調用方法使用 currentTime1()，需要帶括号

computed：定義計算屬性，調用屬性使用 currentTime2，不需要帶括号；this.message 是為了能夠讓 currentTime2 觀察到資料變化而變化

注意：methods 和 computed 裡不能重名

8.3.3 測試效果

仔細看圖中說明，觀察其中的差異

8.3.4 結論

調用方法時，每次都需要進行計算，既然有計算過程則必定産生系統開銷，那如果這個結果是不經常變化的呢？此時就可以考慮将這個結果緩存起來，采用計算屬性可以很友善的做到這一點；計算屬性的主要特性就是為了将不經常變化的計算結果進行緩存，以節約我們的系統開銷

VUE學習筆記（二）

VUE學習筆記（一）

四、Vue對象總結

五、Vue的分支 v-if

5.1 v-if

5.2 v-show

六、Vue的循環 v-for

6.1 普通的for循環

6.2 帶着索引的for

6.3 周遊一個對象中的資訊： v、k、i

6.4 周遊一個對象數組：嵌套的for循環

七、Vue的屬性綁定

7.1 v-model

7.2 v-bind

八、Vue的事件綁定

8.1 v-on

8.2 事件修飾符

8.3計算屬性：computed

8.3.1 什麼是計算屬性

8.3.2 計算屬性與方法的差別

8.3.3 測試效果

8.3.4 結論

繼續閱讀

Java String.format方法的簡單使用

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

neo4j之cypher使用文檔

适用于JavaScript的ECMAScript 2020規範向前發展

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

JS生成uuid的四種方法

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

layui多任務上傳添加進度條

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method