Vue—指令v-text验毡、v-html衡创、v-show、v-if晶通、v-else璃氢、v-else-if、v-for狮辽、v-on一也、v-bind、v-model隘竭、v-slot塘秦、v-pre讼渊、v-cloak动看、v-on

1.v-text(文本插值)
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <span v-text="vtext"></span>
            <span>{{vtext}}</span>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            vtext : 'aaa',
            vhtml : '<span>{{vtext}}</span>',
        }
    })
</script>

可以使用{{}}代替v-text

2.v-html(普通HTML插入)


<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <span>{{vtext}}</span>
            <div v-html="vhtml"></div>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            vtext : 'aaa',
            vhtml : '<span>aaa</span>',
        }
    })
</script>

3.v-show(顯示或隱藏標(biāo)簽)

有v-show的元素始終會被渲染并保留在DOM中。v-show只是簡單地切換元素的CSS屬性display爪幻。


<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <h1 v-if="awesome">Vue is awesome!</h1>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            vshow : false,
        }
    })
</script

4.v-if菱皆、v-else、v-else-if(表達(dá)式的值的真假條件渲染元素)

說明:
v-if挨稿、v-else仇轻、v-else-if指令用于條件性地渲染DOM,當(dāng)結(jié)果是假時Dom不會生成, 而v-show只是簡單地切換元素的CSS屬性display。
v-else元素必須緊跟在帶v-if或者v-else-if 的元素的后面奶甘,否則它將不會被識別

 <div id="app">
        <!-- 單獨(dú)使用v-if -->
        <h1 v-if="vif">中國</h1>      
        <!-- 使用v-if和v-else   v-else元素必須緊跟在帶v-if或者v-else-if的元素的后面篷店,否則它將不會被識別。-->
        <h1 v-if="vif2">中國</h1>
        <h1 v-else>其他</h1>
        <!-- 使用v-if臭家、v-else-if和v-else組合使用 -->
        <h1 v-if="type == '中國'">中國</h1>
        <h1 v-else-if="type == '美國'">美國</h1>
        <h1 v-else-if="type == '俄羅斯'">俄羅斯</h1>
        <h1 v-else>其他</h1>
    </div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            vif : true,
            vif2:false,
            type:'日本'
        }
    })
</script>

5.v-for(基于源數(shù)據(jù)多次渲染元素)

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in vfors">
                {{ item.message }}
            </li>
        </ul>
        <ul>
            <li v-for="(item,index) in vfors">
                {{ index + "." +item.message }}
            </li>
        </ul>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            vfors : [
                    { message: 'Foo' , id = 1 },
                    { message: 'Bar' , id = 2 }
                    ],
        }
    })
</script>

可以用of替代in作為分隔符


<ul>
<li v-for="item of vfors">
    {{ item.message }}
</li>
</ul>

當(dāng)Vue正在更新使用v-for渲染的元素列表時疲陕,它默認(rèn)使用“就地更新”的策略。如果數(shù)據(jù)項(xiàng)的順序被改變钉赁,Vue將不會移動DOM元素來匹配數(shù)據(jù)項(xiàng)的順序蹄殃,而是就地更新每個元素,并且確保它們在每個索引位置正確渲染你踩。

如果需要重新排序現(xiàn)有元素诅岩,就必須提供一個唯一key屬性

<ul>
    <li v-for="item in vfors" v-bind:key="item.id">
        {{ item.message }}
    </li>
</ul

6.v-on(綁定事件監(jiān)聽器)

v-on既能監(jiān)聽原生DOM事件,也可以監(jiān)聽自定義組件觸發(fā)的自定義事件带膜。

v-on縮寫為@

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on綁定點(diǎn)擊事件 -->
        <button v-on:click="click1">v-on綁定點(diǎn)擊事件</button>
        <!-- v-on縮寫 -->
        <button @click="click1">v-on縮寫</button>
        <!-- 傳參 -->
        <button @click="click2('bbbbb')">傳參bbbbb</button>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        methods:{
            click1:function(){
                alert("aaaaa");
            },
            click2:function(value){
               alert(value);
            }
        }
    })
</script>

7.v-bind(動態(tài)地綁定特性)

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind綁定href -->
        <a v-bind:href="url" target="_blank">{{url}}</a><br/>
        <!-- v-bind縮寫: -->
        <a :href="url" target="_blank">v-bind縮寫:</a><br/>
        <!-- 綁定內(nèi)聯(lián)樣式style  -->
        <span :style="styleobj">綁定內(nèi)聯(lián)樣式style:</span><br/>
        <!-- 綁定class  -->
        <span :class=" { classObj : isclassObj }">綁定class:</span><br/>
    </div>
</body>
</html>
<style >
    .classObj {
        color: red;
        font-size: 50px;
    }
</style>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            url : "http://www.baidu.com",
            styleobj:{
                color:'red',
            },
            isclassObj:true,
        }
    })
</script>

8.v-model(數(shù)據(jù)雙向綁定)

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
            <input v-model="message" placeholder="edit me">
            <p>message is: {{ message }}</p><br/>
 
            <input type="checkbox" v-model="checked">
            <label for="checkbox">{{ checked }}</label><br/>
 
            <select v-model="selected">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
            <span>Selected: {{ selected }}</span><br/>
    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            message : "aaaaaa",  //初始值
            checked:true,
            selected:'C',
        }
    })
</script>

9.v-slot

10.v-pre

11.v-cloak

12.v-once

只渲染元素和組件一次吩谦。隨后的不在重新渲染。

<span v-once>This will never change: {{msg}}</span>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末膝藕,一起剝皮案震驚了整個濱河市式廷,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌束莫,老刑警劉巖懒棉,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件草描,死亡現(xiàn)場離奇詭異,居然都是意外死亡策严,警方通過查閱死者的電腦和手機(jī)穗慕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來妻导,“玉大人逛绵,你說我怎么就攤上這事【缶拢” “怎么了术浪?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長寿酌。 經(jīng)常有香客問我胰苏,道長,這世上最難降的妖魔是什么醇疼? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任硕并,我火速辦了婚禮明吩,結(jié)果婚禮上棋傍,老公的妹妹穿的比我還像新娘。我一直安慰自己评肆,他們只是感情好乙濒,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布陕赃。 她就那樣靜靜地躺著,像睡著了一般颁股。 火紅的嫁衣襯著肌膚如雪么库。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天豌蟋,我揣著相機(jī)與錄音廊散,去河邊找鬼。 笑死梧疲,一個胖子當(dāng)著我的面吹牛允睹,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播幌氮,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼缭受,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了该互?” 一聲冷哼從身側(cè)響起米者,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后蔓搞,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體胰丁,經(jīng)...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年喂分,在試婚紗的時候發(fā)現(xiàn)自己被綠了锦庸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡蒲祈,死狀恐怖甘萧,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情梆掸,我是刑警寧澤扬卷,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布,位于F島的核電站酸钦,受9級特大地震影響怪得,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜钝鸽,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一汇恤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧拔恰,春花似錦、人聲如沸基括。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽风皿。三九已至河爹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桐款,已是汗流浹背咸这。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留魔眨,地道東北人媳维。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像遏暴,于是被迫代替她去往敵國和親侄刽。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,627評論 2 350

推薦閱讀更多精彩內(nèi)容