Vue學習筆記(二)-Vue指令的學習

插值表達式

正常情況我們在頁面取值都是通過 {{ data }}來取值

<div id="app">
	<p>{{ msg }}</p>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'123'
        }
    })
</script>

頁面顯示效果

Vue學習筆記(二)-Vue指令的學習

Vue指令之v-cloak

在使用插值表達式的時候，如果将項目釋出到伺服器上，出現網速慢的情況，浏覽器不能及時接收到vue.js，這個時候會出現閃爍現象，即{{ data }}這個符号會出現在網頁上，等到浏覽器接收完資料後，才會将{{ data }}替換成真正的資料。如下圖：

Vue學習筆記(二)-Vue指令的學習

解決這個問題，可以使用v-cloak指令解決：

<style>
    [v-cloak]{
        display: none;
    }
</style>

<div id="app">
	<p v-cloak>{{ msg }}</p>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg:'123'
        }
    })
</script>

Vue指令之v-text和v-html

v-text：預設v-text沒有閃爍問題，于插值表達式不同的是v-text會覆寫元素中原本的内容，而插值表達式隻會替換自己的占位符，不會把整個元素的内容清空。
v-html：于v-text不同的是，v-html會識别輸出html标簽，而v-text會将内容完整的輸出不識别标簽。

<div id="app">
	<div v-cloak>{{ msg2 }}</div>
	<div v-text="msg2"></div>
	<div v-html="msg2"></div>
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            msg2:'<h1>我是一個h1</h1>'
        }
    })
</script>

效果如下圖：

Vue學習筆記(二)-Vue指令的學習

Vue指令之v-bind

v-bind 是一個vue中提供的用于綁定屬性的指令
v-bing: 指令可以被簡寫為 :要綁定的屬性
v-bind 中，可以寫合法的表達式

<div id="app">
	<input type="button" value="按鈕1" v-bind:title="mytitle + '123'">
	<input type="button" value="按鈕2" :title="mytitle + '123'">
</div>

<script>
    new Vue({
        el:'#app',
        data:{
            mytitle:'這是自己定義的一個title'
        }
    })
</script>

效果圖下圖：

Vue學習筆記(二)-Vue指令的學習

Vue指令之v-on和事件修飾符

Vue中提供了v-on:事件綁定機制，縮寫為@

<div id="app">
    <input type="button" value="按鈕" v-on:click="show">
    <input type="button" value="按鈕" @click="show">
</div>

<script>
    new Vue({
        el:'#app',
        methods:{ //這個methods屬性中定義了目前Vue執行個體中所有可用的方法
            show: function(){
                alert('Hello');
            }
        }
    })
</script>

效果如下圖：

Vue學習筆記(二)-Vue指令的學習

事件修飾符

.stop 阻止冒泡
.prevent 阻止預設事件
.capture 添加事件監聽器的使用事件捕獲模式
.self 隻目前事件在該元素本身（比如不是子元素）觸發時觸發回調
.once 事件隻觸發一次

.stop和.self的差別是：.self隻會阻止自己身上的冒泡行為并不會真正的阻止冒泡行為的觸發。

示例代碼：

<!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>
    <script src="./lib/vue.js"></script>
    <style>
        .inner{
            height: 150px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用.stop阻止冒泡 -->
        <!-- <div class="inner" @click="div1Handler">
            <input type="button" value="戳他" @click.stop="btnHandler">
        </div> -->

        <!-- 使用 .prevent 阻止預設行為 -->
        <!-- <a href="http://www.baidu.com" target="_blank" rel="external nofollow"  @click.prevent="linkClick">有問題，先去百度</a> -->

        <!-- 使用 .capture 實作捕獲觸發的機制 -->
        <!-- <div class="inner" @click.capture="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div> -->

        <!-- 使用 .self 實作隻有點選目前元素時候，才會觸發事件處理函數 -->
        <!-- <div class="inner" @click.self="div1Handler">
            <input type="button" value="戳他" @click="btnHandler">
        </div> -->

        <!-- 使用 .once 隻觸發一次事件處理函數 -->
        <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a>

        <!-- .self 隻會阻止自己身上冒泡行為的觸發，并不會真正阻止冒泡行為 -->
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
            },
            methods:{ 
                div1Handler(){
                    console.log('這是觸發了 inner div 的點選事件')
                },
                btnHandler(){
                    console.log('這是出發了 button 的點選事件')
                },
                linkClick(){
                    console.log('這是觸發了連接配接的點選事件')
                }
            }
        });
    </script>
</body>
</html>

跑馬燈效果實作

分析：

給開啟跑馬燈效果的按鈕綁定一個時間 v-on或@
在按鈕的時間處理函數中，寫相關的業務邏輯代碼：拿到msg字元串，然後調用字元串的substring來進行字元串的截取操作，把第一個字元串截取下來，放到最後一個位置即可；
為了實作點選一下按鈕，自動截取的功能，需要把上一個步驟的代碼，放到一個定時器中去；

<!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>
    <!-- 1.導入Vue包 -->
    <script src="./lib/vue.js"></script>
</head>
<body>
    <!-- 2.建立一個要控制的區域 -->
    <div id="app">
    <div>{{ msg }}</div>
    <input type="button" value="浪起來" @click="lang">
    <input type="button" value="低調" @click="stop">
    </div>
    <script>
        //注意在vm執行個體中，如果想要擷取data上的資料，或者想要調用methods中的方法，必須通過this.資料屬性名或者this.方法名進行通路，這裡的this就表示我們new出來的vm執行個體對象
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'猥瑣發育，别浪~~~~！',
                intervalId:null //在data上定義一個定時器id
            },
            methods:{
                lang(){
                    if(this.intervalId!=null)return;
                    this.intervalId = setInterval(()=>{
                        //擷取到頭的第一個字元
                        var start = this.msg.substring(0,1);
                        //擷取到後面的所有字元
                        var end = this.msg.substring(1);
                        //重新拼接得到新的字元串并指派給this.msg
                        this.msg = end + start;
                        //注意：vm執行個體，會監聽自己身上data中所有資料的改變，隻要資料一發生變化，就會自動把最新的資料，從data上同步到頁面
                    },400)
                },
                stop(){
                    clearInterval(this.intervalId);
                    //每當清除了intervalId之後重新指派null
                    this.intervalId=null;
                }
            }
        })
    </script>
</body>
</html>

Vue指令之v-model和雙向資料綁定

v-bind 隻能實作資料的單向資料綁定，從 M 自動綁定到 V，無法實作資料的雙向綁定
使用 v-model 指令，可以實作表單元素和Model中資料的雙向資料綁定
注意：v-model 隻能運用在表單元素中使用

示例代碼：

<div id="app">
    <h4>{{ msg }}</h4>
    <input type="text" v-model="msg">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'大家都是好孩子，愛敲代碼，愛學習，愛思考，簡直是完美，沒瑕疵！'
        },
        methods:{ 
        }
    });
</script>

效果：

Vue學習筆記(二)-Vue指令的學習

簡易電腦案例

<div id="app">
    <input type="text" v-model="n1">
    <select v-model="opt">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>

    <input type="text" v-model="n2">

    <input type="button" value="=" @click="calc">

    <input type="text" v-model="result">
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            n1: 0,
            n2: 0,
            result: 0,
            opt: '+'
        },
        methods:{ 
            calc(){ //電腦算數的方法
                //邏輯：
                switch(this.opt){
                    case '+':
                        this.result = parseInt(this.n1) + parseInt(this.n2);
                        break;
                    case '-':
                        this.result = parseInt(this.n1) - parseInt(this.n2);
                        break;
                    case '*':
                        this.result = parseInt(this.n1) * parseInt(this.n2);
                        break;
                    case '/':
                        this.result = parseInt(this.n1) / parseInt(this.n2);
                        break;
                }
                // var cadeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                // this.result = eval(cadeStr);
            }
        }
    });
</script>

在Vue中使用樣式

使用class樣式

數組

數組中使用三元表達式

數組中嵌套對象

直接使用對象

樣例代碼：

<style>
   .red{
        color:red;
    }
    .thin{
        font-weight: 200;
    }
    .italic{
        font-style: italic;
    }
    .active{
        letter-spacing: 0.5em;
    }
</style>
<div id="app">
    <!-- <h1 class="red thin">這是一個很大很大的一個H1，大到你無法想象！！！</h1> -->

    <!-- 第一種使用方式，直接傳遞一個數組，注意：這裡的class需要用 v-bind做資料綁定 -->
    <!-- <h1 :class="['thin','italic']">這是一個很大很大的一個H1，大到你無法想象！！！</h1> -->

    <!-- 在數組中使用三元表達式 -->
    <!-- <h1 :class="['thin','italic',flag?'active':'']">這是一個很大很大的一個H1，大到你無法想象！！！</h1> -->

    <!-- 在數組中使用對象來代替三元表達式，來提高代碼的可讀性 -->
    <!-- <h1 :class="['thin','italic',{'active':flag}]">這是一個很大很大的一個H1，大到你無法想象！！！</h1> -->

    <!-- 在為 class 使用 v-bind 綁定對象的時候，對象的屬性是類名，由于對象的屬性可帶引号,也可以不帶引号；屬性的值是一個辨別符 -->
    <h1 :class="calssObj">這是一個很大很大的一個H1，大到你無法想象！！！</h1>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true,
            calssObj:{'red':true,'thin':true,active:true,italic:true}
        },
        methods:{ 
        }
    });
</script>

使用内聯樣式

直接在元素上通過 :style 的樣式，書寫樣式對象

将樣式對象，定義到 data 中，并直接引用到 :style 中

//在data上的定義樣式
data:{
	h1StyleObj:{color:'red','font-size':'40px','font-weight':'200'}
}
//在元素中，通過屬性綁定的樣式，将樣式對象應用到元素中
<h1 :style="h1StyleObj">這是一個H1</h1>

在 :style中通過數組，引用多個 data 上的樣式對象

//在data上定義樣式
data{
	h1StyleObj:{color:'red',''font-size':'40px','font-weight':'200'},
	h1StyleObj2:{font-style:'italic'}
}
//在元素中，通過屬性綁定的形式，将樣式對象應用到元素中
<h1 :style="[h1StyleObj,h1StyleObj2]">這是一個H1</h1>

Vue指令之v-for和key屬性

疊代數組

<ul>
	<li v-for="(item,i) in list">索引：{{ i }} --- 姓名：{{ item.name }} ---年齡：{{ item.age }}</li>
</ul>

疊代對象中的屬性

<!-- 周遊對象身上的屬性 -->
<div v-for="(val,key,i) in userInfo">{{ val }} --- {{ key }} --- {{ i }}</div>

疊代數字

** 2.2.0+的版本裡，當在元件中使用v-for時，key現在是必須的。**

當vue.js用v-for正在更新以渲染過的元素清單時，它預設用“就她複用”政策。如果資料項的順序被改變，Vue将不是移動DOM元素比對資料項的順序，而是簡單複用此處每個元素，并且確定它在特定索引下顯示已被渲染的每個元素。

為了給Vue一個提示，以便它能跟蹤每個節點的身份，進而重用和重新排序現有元素，你需要為每一項提供一個唯一key屬性。

Vue指令之v-if和v-show

一般來說，v-if有更高的切換消耗而v-show有更高的渲染消耗，是以，如果需要頻繁切換v-show較好，如果運作時條件不大可能改變v-if較好。

<div id="app">
    <input type="button" value="toggle" @click="flag=!flag">
    <!-- v-if 的特點：每次都會重新删除或建立元素 -->
    <!-- v-show 的特點：每次不會重新進行DOM的删除和建立操作，隻是切換了元素的 display:none 樣式 -->

    <!-- v-if 有較高的切換性能消耗 -->
    <!-- v-show 有較高的初始渲染消耗 -->

    <!-- 如果元素涉及到頻繁的切換，最好不要使用 v-if ，推薦使用v-show -->
    <!-- 如果元素可能永遠不會被顯示出來被使用者看到，則推薦使用v-if -->
    <h3 v-if="flag">這是用v-if控制的元素</h3>
    <h3 v-show="flag">這是用v-show控制的元素</h3>
</div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            flag:true
        },
        methods:{ 
        }
    });
</script>

Vue學習筆記(二)-Vue指令的學習

插值表達式

Vue指令之v-cloak

Vue指令之v-text和v-html

Vue指令之v-bind

Vue指令之v-on和事件修飾符

跑馬燈效果實作

Vue指令之v-model和雙向資料綁定

簡易電腦案例

在Vue中使用樣式

Vue指令之v-for和key屬性

Vue指令之v-if和v-show

繼續閱讀

基于Springboot+VUE+Mysql的大學生校園疫情防控管理系統

左耳朵耗子：程式員如何拿到年薪60萬的崗位？

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

[轉]如何成長為一名全棧工程師全棧工程師

underscore模闆功能的使用和學習

vue3 transitionvue3 transition元件和vue2 transition元件

CSS之折疊菜單

web開發之前後端渲染

Vue $emit 子元件向父元件傳遞參數

vue學習筆記day12 vue的生命周期

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目