【復習】VueJS之內(nèi)部指令

Vuejs

源碼：https://github.com/zhuangZhou/vuejs

下載Vue.js

官網(wǎng)：http://vuejs.org

live-server使用

live-server是一個簡單的服務(wù)器，具有熱更新

使用npm進行全局安裝

npm install -g live-server

在項目目錄中啟動

liver-server

內(nèi)部指令

v-if & v-else & v-show

1、v-if

v-if 用來判斷是否在加載HTML的DOM，比如模擬用戶登錄

<div v-if="isLogin">你好，XXX</div>
<div v-else>請登錄</div>

在Vue里的data定義isLogin的值，當為true時，顯示“你好，XXX”，當為false時，顯示“請登錄”。

2、v-show

v-show是通過調(diào)整css的display屬性的屬性值，來顯示和隱藏節(jié)點，其實在HTML渲染時，已經(jīng)加載了DOM；

<div v-show="isLogin">哈哈哈</div>

當isLogin為true時，顯示“哈哈哈”，當為false時，隱藏。

3、兩者的區(qū)別

v-if：判斷是否加載，可以減輕服務(wù)器壓力，當需要時在加載

v-show：調(diào)整css dispaly屬性，可以使客戶端操作更加流暢。

v-for

1、 v-for

v-for是用來循環(huán)data中的數(shù)組，來解析重復模板；

2、 基本用法
模板：

<ul>
    <li v-for="(item,index) in list">
       {{index}} - {{item}}
    </li>
</ul>

js:

var vm = new Vue({
    ...
    data(){
        return{
            list: [20, 23, 18, 65, 32, 19, 5, 56, 41]
        }
    }
});

模板中的使用形式是v-for="(item,index) in list" ，其中l(wèi)ist是源數(shù)據(jù)數(shù)組，即js中data的list數(shù)組，item是數(shù)組元素迭代的別名（可以隨便起），index是數(shù)組元素的索引，可以省略寫成v-for="item in list";

3、排序

使用排序，我們需要使用computed屬性，在computed里面，重新聲明一個sortList對象，為什么要重新聲明，是為了不污染源數(shù)據(jù)。

var vm = new Vue({
    ...
    computed:{
        sortList(){
            var list = [];
            for(var i =0;i<this.list.length;i++){
                list.push(this.list[i]);
            }

            return list.sort(sortNumber);
        }
    }
})

function sortNumber(a,b){
    return a-b;
}

4、對象循環(huán)輸出

在實際項目中，我們使用的最多的就是對象的循環(huán)輸出，那如何輸出呢？

首先，在js中定義一個對象數(shù)組：

var vm =  new Vue({
    ...
    data(){
        return{
            person:[
                {
                    name: 'xhz',
                    age: 22
                },
                {
                    name: 'qws',
                    age: 34
                },
                {
                    name: 'asd',
                    age: 12
                },
                {
                    name: 'xdc',
                    age: 23
                }
            ]
        }
    }
})

然后，在模板中輸出

 <ul>
    <li v-for="(p,index) in person">
        {{index+1}} - {{p.name}} - {{p.age}}
    </li>
</ul>

對象的排序函數(shù)：

function sortByKey(arr,key){
    return array.sort(function (a, b) {
        var x = a[key];
        var y = b[key];
        return ((x<y)?-1:((x>y)?1:0));
    })
}

v-text & v-html

前面我們使用插值表達式（即{{XXX}}）在HTML中輸出data，當網(wǎng)速比較慢或者加載javascript出錯時，會出現(xiàn)一個很大的弊端，即暴露我們的{{XXX}}；因此，Vue給我們提供v-text指令來解決這一問題：

<div v-text="text"></div>

當數(shù)據(jù)里需要解析HTML標簽的時候，v-text是無法輸出的，因此，Vue還給我們提供了一個指令：v-html

 <div v-html="html"></div>

需要注意的是：在生產(chǎn)環(huán)境中動態(tài)渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內(nèi)容上使用v-html，永遠不要在用戶提交和可操作的網(wǎng)頁上使用。

v-on

v-on是用來綁定監(jiān)聽事件的，可以監(jiān)聽DOM觸發(fā)的一些javascript代碼；

<button v-on:click="add">add</button>
<button @click="add">add</button>

上面的兩行代碼是一個意思，@click是v-on:click的簡寫；

當然，除了綁定click事件，其他的事件也可以綁定，比如change事件，focu事件，鍵盤事件，下面來說說鍵盤事件：

<input type="text" @key.enter="onKey">

代碼的意思是，當按下"enter"鍵時，觸發(fā)onkey事件；也可以使用鍵值：

<input type="text" @key.13="onKey">

v-model

v-model綁定數(shù)據(jù)源。就是把數(shù)據(jù)綁定在特定的表單元素上，可以很容易的實現(xiàn)雙向數(shù)據(jù)綁定。

1、雙向數(shù)據(jù)綁定

模板：

 <div id="app">
    <p>原始文本信息:{{inputValue}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="inputValue"></p>
</div>

js:

var vm = new Vue({
    ...
    data(){
        return{
            inputValue:'Hello World!'
        }
    }
})

2、 修飾符

  • lazy：取代 imput 監(jiān)聽 change 事件。

  • number：輸入字符串轉(zhuǎn)為數(shù)字。

  • trim：輸入去掉首尾空格。

    <p>v-model.lazy:<input type="text" v-model.lazy="inputValue"></p>
<p>v-model.number:<input type="text" v-model.number="inputValue"></p>
<p>v-model.trim:<input type="text" v-model.trim="inputValue"></p>

3、文本區(qū)域加入數(shù)據(jù)綁定

<textarea rows="10" cols="30" v-model="inputValue"></textarea>

4、多選按鈕綁定一個值

<input type="checkbox" id="checkTrue" v-model="isFlag"><label for="checkTrue">{{isFlag}}</label>

5、多選綁定一個數(shù)組

<p>
    <input type="checkbox" name="zz" id="zz" value="zz" v-model="names">
    <label for="zz">zz</label>
    <input type="checkbox" name="yym" id="yym" value="yym" v-model="names">
    <label for="yym">yym</label>
    <input type="checkbox" name="zxr" id="zxr" value="zxr" v-model="names">
    <label for="zxr">zxr</label>
</p>

6、單選按鈕綁定數(shù)據(jù)

<p>
    <input type="radio" name="1" id="man" value="男" v-model="sex">
    <label for="man">男</label>
    <input type="radio" name="0" id="woman" value="女" v-model="sex">
    <label for="woman">女</label>
</p>

v-bind

v-bind是處理HTML中的標簽屬性的，例如<div></div>就是一個標簽，<img>也是一個標簽，我們綁定<img>上的src進行動態(tài)賦值。

模板：

<h3>綁定圖片地址</h3>
<p>![](imgSrc)</p>
<p>![](imgSrc)</p>

上面兩行代碼是一個意思，v-bind:src是完整語法，:src是簡寫；

js:

var vm = new Vue({
    ...
    data(){
        return{
            imgSrc:"https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",

        }
    }
});

當然，除了綁定圖片地址，還可以綁定<a></a>標簽的href屬性：

<a :href="url"></a>

在工作中我們經(jīng)常使用v-bind來綁定css樣式：

在綁定CSS樣式是，綁定的值必須在vue中的data屬性中進行聲明。

1、直接綁定class樣式

 <p><span :class="className">1、綁定class</span></p>

2、綁定classA并進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。

<p>
    <span :class="{classA:isOK}">2、綁定class判斷</span>
    <input type="checkbox"  id="isOK" v-model="isOK">
    <label for="isOK">isOK:{{isOK}}</label>
</p>

3、綁定class中的數(shù)組

<p><span :class="[classA,classB]">3、綁定class數(shù)組</span></p>

4、綁定class中使用三元表達式判斷

<p><span :class="isOK?classA:classB">4、綁定class三元運算符</span></p>

5、綁定style

<p><span :style="{color:red,fontSize:font}">1、綁定style</span></p>

6、用對象綁定style樣式

 <p><span :style="styleObj">2、對象綁定style</span></p>



var vm = new Vue({
    el: '#app',
    data() {
        return {
            imgSrc: "https://www.baidu.com/img/qixi_pc_f35fe4b00cc1d200aea7cf9f86ae5dae.gif",
            url: 'http://www.baidu.com',
            className:'classA',
            classA:'classA',
            classB:'classB',
            isOK:false,
            red:'green',
            font:'26px',
            styleObj:{
                color:'red',
                fontSize:'30px'
            }
        }
    }
})

v-pre & v-cloak & v-once

1、v-pre

在模板中跳過vue的編譯，直接輸出原始值。就是在標簽中加入v-pre就不會輸出vue中的data值了。

<div v-pre>{{msg}}</div>

這時并不會輸出我們的message值，而是直接在網(wǎng)頁中顯示{{message}}

2、v-cloak

在vue渲染完指定的整個DOM后才進行顯示。它必須和CSS樣式一起使用，

[v-cloak] {
    display: none;
}



<div v-cloak>
    {{ message }}
</div>

3、v-once

在第一次DOM時進行渲染，渲染完成后視為靜態(tài)內(nèi)容，跳出以后的渲染過程。

<div>
    <input type="text" v-model="msg">
    <p v-once>{{msg}}</p>
    <p>{{msg}}</p>
</div>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容，還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,186評論 0贊 29
  • 1.安裝 可以簡單地在頁面引入Vue.js作為獨立版本，Vue即被注冊為全局變量，可以在頁面使用了。 如果希望搭建...
    Awey閱讀 11,309評論 4贊 129
  • 今年的國慶，重新開始炒菜做飯，這是搬家后第一次在鍋臺灶邊炒菜，之前就是熬煮點粥之類的，一是因為工作忙碌，二是嫌麻煩...
    方原閱讀 383評論 0贊 0
  • 大家都知道棗類都蘊含著豐富的營養(yǎng)成分，而今天我們所要說的主角則是不少朋友都熟悉的優(yōu)質(zhì)水果——冬棗。可以說冬棗被大家...
    執(zhí)筆青衫閱讀 971評論 0贊 0
  • （連載）《美夢如璇·第二章·第十一節(jié)》 下 我不是在尋找捷徑，也不是要窺探秘密，只是想，更好的定位自己，定位你在我...
    葉子程閱讀 358評論 2贊 1

友情鏈接更多精彩內(nèi)容