Vue.js指令v-htmlv-cloakv-prev-once-創(chuàng)新互聯(lián)

指令(Directives)是特殊的帶有前綴v-的特性。指令的值限定為綁定表達(dá)式，指令的職責(zé)就是當(dāng)其表達(dá)式的值改變時(shí)把某些特殊的行為應(yīng)用到DOM上

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站制作等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：不銹鋼雕塑等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊譽(yù)！

HTML：

<div id="test01">
    <p v-if="greeting">Hello!</p>
</div>

這里，v-if指令將根據(jù)表達(dá)式greeting值得真假  刪除/插入p元素

JS：

var vm1=new Vue({
    el:'#test01',
    data:{
        greeting:false
    }
});

當(dāng)greeting取值為false時(shí)，查看頁面效果和控制臺(tái)

當(dāng)greeting取值為true時(shí)，查看頁面效果和控制臺(tái)

這里需要注意的是，v-if="greeting"不能用于根元素之上，也就是說必須用于某一元素的子元素之上，否則，控制臺(tái)就會(huì)報(bào)錯(cuò)"[Vue warn]: v-if="greeting" cannot be used on an instance root element."

查看錯(cuò)誤示例：

HTML:

<p v-if="greeting">Hello!</p>

JS:

var vm=new Vue({
    el:'p',
    data:{
        greeting:true
    }
});

控制臺(tái)錯(cuò)誤提示：

有些指令可以在其名稱后面帶一個(gè)”參數(shù)“(Argument)，中間放一個(gè)冒號(hào)隔開。例如：v-bind指令用于響應(yīng)地更新HTML特性

HTML：

<a id="test02" v-bind:href="url">v-bind鏈接</a>

這里href是參數(shù)，它告訴v-bind指令將元素的href特性跟表達(dá)式url的值綁定

JS：

var vm2=new Vue({
    el:'#test02',
    data:{
        url:'http://cn.vuejs.org/'
    }
});

v-on指令用于監(jiān)聽DOM事件

HTML:

<div id="test03" >
    <p>`message`</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JS:

var vm3=new Vue({
    el:'#test03',
    data:{
        message:'顛倒字體順序'
    },
    methods:{
        reverseMessage:function(){
            //console.log(this)  this指代div#test03
            this.message=this.message.split('').reverse().join('')
        }
    }
});

v-model指令實(shí)現(xiàn)雙向數(shù)據(jù)綁定

這個(gè)指令只能用在<input>, <select>,<textarea>這些表單元素上，所謂雙向數(shù)據(jù)綁定，指的就是在JS實(shí)例中的data與其渲染的dom元素上的內(nèi)容保持一致，二者任何一個(gè)被改變，另一個(gè)也會(huì)相應(yīng)的更新為相同的內(nèi)容，這是通過屬性訪問器實(shí)現(xiàn)的。

HTML：

<div id="test04">
    <p>`message`</p>
    <input type="text" v-model="message">
</div>

JS：

var vm4=new Vue({
    el:'#test04',
    data:{
        message:'雙向數(shù)據(jù)綁定'
    }
});

v-for列表渲染，用作循環(huán)遍歷，類似ng中的ng-repeat

HTML：

<div id="test05">
    <ul>
        <li v-for="todo in todos">`todo`.`text`</li>
    </ul>
</div>

JS：

var vm5=new Vue({
    el:'#test05',
    data:{
        todos:[
            {text:'Learn JavaScript'},
            {text:'Learn Vue.js'},
            {text:'Learn Angular.js'}
        ]
    }
});

再來兩個(gè)綜合的例子回顧下以上幾個(gè)指令的用法

HTML：

<div id="zongHe">
    <input type="text" v-model="newTodo" v-on:keyup.enter="addTodo">
    <ul>
        <li v-for="todo in todos">
            <span>`todo`.`text`</span>
            <button v-on:click="removeTodo($index)">X</button>
        </li>
    </ul>
</div>

JS：

var vm=new Vue({
    el:'#zongHe',
    data:{
        newTodo:'',
        todos:[
            {text:'add some todos'}
        ]
    },
    methods:{
        addTodo:function(){
            var text=this.newTodo.trim();
            if(text){
                this.todos.push({text:text}),
                this.newTodo=''
            }
        },
        removeTodo:function(index){
            this.todos.splice(index,1)
        }
    }
});

HTML:

<form id="demo">
    <!-- text -->
    <p>
        <input type="text" v-model="msg">
        `msg`
    </p>
    <!-- checkbox -->
    <p>
        <input type="checkbox" v-model="checked">
        {{checked ? "yes" : "no"}}
    </p>
    <!-- radio buttons -->
    <p>
        <input type="radio" name="picked" value="one" v-model="picked">
        <input type="radio" name="picked" value="two" v-model="picked">
        `picked`
    </p>
    <!-- select -->
    <p>
        <select v-model="selected">
            <option>one</option>
            <option>two</option>
        </select>
        `selected`
    </p>
    <!-- multiple select -->
    <p>
        <select v-model="multiSelect" multiple>
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </select>
        `multiSelect`
    </p>
    <p><pre>data: {{$data | json 2}}</pre></p>
</form>

JS:

var demoVm=new Vue({
    el:'#demo',
    data:{
        msg:'hi!',
        checked:true,
        picked:'one',
        selected:'two',
        multiSelect:['one', 'three']
    }
});

查看頁面截圖效果：

v-text

v-text 指令可以更新元素的文本內(nèi)容，文本內(nèi)容既可以放在 雙大括號(hào)標(biāo)簽里面，也可以通過 v-text 放在標(biāo)簽內(nèi)部。區(qū)別是放在 v-text 里面在頁面加載時(shí)不會(huì)看到 雙大括號(hào) 閃爍

示例代碼：

<div id="app">
    <p>`msg`</p>
    <hr>
    <p v-text="msg"></p>
</div>

<script src="http://cdn.bootcss.com/vue/1.0.26/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'頁面上有雙大括號(hào)閃爍嗎？'
        }
    })
</script>

頁面剛加載時(shí)：（用戶會(huì)看到雙大括號(hào)標(biāo)簽）

頁面加載完畢：

v-html

v-html 指令可以更新元素的innerHTML，也就是說可以解析并執(zhí)行HTML代碼，與{` `}三大括號(hào)標(biāo)簽功能一致。

注意：不建議在網(wǎng)站上直接動(dòng)態(tài)渲染任意HTML 片段，很容易導(dǎo)致XSS***。

<div id="app">
    <p v-html="msg"></p>
</div>

<script src="http://cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg: '<strong>Hello World!</strong>'
        }
    })
</script>

v-cloak

這個(gè)指令保持在元素上直到關(guān)聯(lián)實(shí)例結(jié)束編譯。和 CSS 規(guī)則如 [v-cloak] { display: none } 一起用時(shí)，這個(gè)指令可以隱藏未編譯的 Mustache 標(biāo)簽直到實(shí)例準(zhǔn)備完畢。

簡單說，就是防止頁面未加載完成時(shí)，顯示雙大括號(hào)標(biāo)簽，我們?cè)诖蜷_Vue頁面時(shí)，經(jīng)?？吹筋愃频慕缑?/p>

用戶看到 `msg` 是非常不好的一種體驗(yàn)，因此，我們可以借助 v-cloak指令解決這個(gè)問題

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <input v-model="msg"><br>
    `msg`
</div>

<script src="http://cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg: 'Hello World!'
        }
    })
</script>
</body>
</html>

頁面剛刷新：（頁面是一片空白，什么都沒有，也看不到雙大括號(hào)標(biāo)簽在頁面閃爍）

頁面加載完畢：

v-once

只渲染元素和組件一次。隨后的重新渲染,元素/組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過。這可以用于優(yōu)化更新性能。

這個(gè)就完全類似 {{*msg}}標(biāo)簽，直接看一段官網(wǎng)提供的示例代碼，此處不單獨(dú)舉例

<!-- 單個(gè)元素 -->
<span v-once>This will never change: `msg`</span>
<!-- 有子元素 -->
<div v-once>
    <h2>comment</h2>
    <p>`msg`</p>
</div>
<!-- 組件 -->
<my-component v-once :comment="msg"></my-component>
<!-- v-for 指令-->
<ul>
    <li v-for="i in list" v-once>`i`</li>
</ul>

v-pre

跳過這個(gè)元素和它的子元素的編譯過程?？梢杂脕盹@示原始 Mustache 標(biāo)簽。跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。

代碼示例如下：

<div id="app">
    <span v-pre>{{ this will not be compiled }} + `msg`</span>
</div>



<script src="http://cdn.bootcss.com/vue/2.0.0/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg: 'Hello World!'
        }
    })
</script>

注意看控制臺(tái)，這個(gè)可沒有報(bào)錯(cuò)哦

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞名稱：Vue.js指令v-htmlv-cloakv-prev-once-創(chuàng)新互聯(lián)
瀏覽地址：http://muchs.cn/article8/eggip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、商城網(wǎng)站、云服務(wù)器、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)