Vue基本指令

Vue的基本指令功能和使用方式匯總

Vue的基本結(jié)構(gòu)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">{{ message }}</div>
</body>
<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message: "Hello, World!",
            list: [11,12,13,14]
        }
    })
</script>
</html>

通過元素創(chuàng)建Vue對象

  • el：Vue對象指定的元素范圍
  • data: Vue對象關(guān)聯(lián)的數(shù)據(jù)源
  • {{XXX}}：通過這種方式在html中顯示Vue對象數(shù)據(jù)

v-text & v-html

<p v-text="message"></p>
<p v-html="message"></p>
  • v-text="xxx"基本等同{{xxx}},區(qū)別在于xxx渲染完后，v-text才會顯示，但是{{}}會一開始就顯示
  • v-html表示在標(biāo)簽里插入的是html語句
  • v-text類似jQuery中的.text("xxx")；v-html類似jQuery中的.html("xxx")

v-for

<div id="app">
    <ul>
        <li v-for="item in sortedItems">{{item}}</li>
    </ul>
    <hr>
    <ul>
        <li v-for="(student, index) in students">{{index+1}}、{{student.name}}    -   {{student.age}}</li>
    </ul>

</div>

</body>
<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            items:[23, 53, 14, 54, 4, 28],
            students:[
                {name: "Sue", age: 17},
                {name: "Nick", age: 12},
                {name: "Ann", age: 13},
                {name: "Jhon", age: 18}
            ]
        },
        computed:{
            sortedItems: function () {
                return this.items.sort(function (a, b) {
                    return a-b
                });
            }
        }
    });
</script>
  • computed:表示計算屬性。根data使用方式一樣
  • (item, index) in list的方式可以同時獲取元素以及下標(biāo)
  • v-for:語句用在需要重復(fù)的元素上。在這里，需要重復(fù)的是li元素，所以，v-for是在li標(biāo)簽上使用的

v-if & v-else & v-show

<div id="app">
    <div v-if="isLogin">Hello, {{ userName }}</div>
    <div v-else><button>請登錄</button></div>
    <div v-show="isShow">test v-show</div>
</div>

</body>
<script src="../assets/js/vue.js"></script>
<script>
    app = new Vue({
        el: "#app",
        data:{
            isLogin: true,
            userName: "Sue",
            isShow: false
        }

    })
</script>
  • v-if可以和v-else配對，配對方式見以上代碼
  • v-if也可以單獨使用，根v-show功能一樣
  • v-if如果為真，就顯示v-if標(biāo)簽中的內(nèi)容，否則，顯示其配對的v-else標(biāo)簽中內(nèi)容

v-model

<div id="app">
    <p>展示綁定信息：{{message}}end</p>
    <h3>雙向綁定</h3>
    <div>
        <p>測試v-model 信息綁定：<input type="text" v-model="message"></p>
        <p>測試v-model.lazy 信息綁定：<input type="text" v-model.lazy="message"></p>
        <p>測試v-model.number 信息綁定：<input type="text" v-model.number="message"></p>
        <p>測試v-model.trim 信息綁定：<input type="text" v-model.trim="message"></p>
    </div>
    <hr>
    <h3>文本輸入</h3>
    <div>
        <textarea cols="60" rows="10<p>" v-model="message"></textarea>
    </div>
    <hr>
    <h3>多選框綁定布爾值</h3>
    <div>
        <p><input type="checkbox" v-model="isTrue">isTrue</p>
        <p>{{isTrue}}</p>
    </div>
    <hr>
    <h3>多選框綁定數(shù)組</h3>
    <div>
        <p><input type="checkbox" value="sue" v-model="webnames">Sue</p>
        <p><input type="checkbox" value="jack" v-model="webnames">Jack</p>
        <p><input type="checkbox" value="king" v-model="webnames">King</p>
        <p>{{webnames}}</p>

    </div>
    <hr>
    <h3>單選框綁定</h3>
    <div>
        <p><input type="radio" value="man" v-model="sex">男</p>
        <p><input type="radio" value="felman" v-model="sex">女</p>
        <p>你所選擇的是{{sex}}</p>
    </div>
    <hr>

</div>

</body>
<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "Are you OK?",
            isTrue: true,
            webnames: [],
            sex:''
        },
        methods: {

        }

    })
</script>
  • v-model="數(shù)據(jù)源",即可完成數(shù)據(jù)綁定
  • v-model綁定的對象可以是字符串，布爾值，數(shù)組等
  • .lazy指的是，輸入完成，輸入框失去焦點后，信息同步
  • .number在用戶輸入的首內(nèi)容為數(shù)字時起作用，此時后面輸入的非數(shù)字內(nèi)容就不能完成同步，輸入框失去焦點時，清空后面的非數(shù)字內(nèi)容
  • .trim作用為去除輸入框前面和后面的空格

v-on

<div id="app">
    <p>本場比賽得分: <span v-text="count"></span></p>
    <div>
        <button v-on:click="add">加分</button>
        <button @click="remove">減分</button>
        <input type="number" v-model="interval" v-on:keyup.enter="add1">
    </div>
    
</div>

</body>
<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            count: 0,
            interval: 1
        },
        methods: {
            add: function(){
                this.count += 1;
            },
            remove: function(){
                this.count -= 1;
            },
            add1: function(){
                this.count += parseInt(this.interval);
            }
        }

    })
</script>
  • v-on:完成事件觸發(fā)綁定Vue對象中的方法
  • @click是v-on:click的簡寫
  • v-on可以綁定到鍵盤上任意一個輸入鍵的鍵盤操作事件，這個需要知道鍵盤上相應(yīng)該鍵的鍵值

v-bind

<div id="app">
    <div>
        <p><img v-bind:src="imgSrc" width="100%"></p>
        <p><a :href="jumpUrl">微博</a></p>
    </div>
    <hr>

    <div>
        <ul>
            <ol :class="ca">綁定class</ol>
            <ol :class="{A:isOk}">綁定class判斷</ol>
            <ol :class="[ca, cb]">綁定class數(shù)組</ol>
            <ol :class="isOk?ca:cb">三目運算符綁定class</ol>
        </ul>
    </div>
    <hr>
    <input type="checkbox" v-model="isOk">
    <label>isOK: {{isOk}}</label>
    <hr>
    <div :style="{color:myColor, fontSize:myFont}">關(guān)于style的綁定</div>
    <div :style="styleObj">綁定style對象</div>

</div>

</body>
<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            imgSrc:"https://wx3.sinaimg.cn/mw690/c260f7ably1fu94bvbb66j20v90kmk21.jpg",
            jumpUrl:"https://weibo.com/3261134763/GuAl4neVP?ref=feedsdk",
            ca: "A",
            cb: "B",
            isOk: false,
            myColor: 'green',
            myFont: '30px',
            styleObj: {color:'purple', fontSize: '40px'}
        }

    })
</script>
  • v-bind:指的是標(biāo)簽屬性綁定
  • :屬性名 是 v-bind:屬性名 的簡寫

v-pre & v-cloak & v-once

<div id="app">
    <div v-pre>{{message}} v-pre表示原樣輸出</div>
    <div v-cloak><p>渲染完成后，才顯示{{message}}</p>
    </div>
    <hr>
    <div>
        <div v-once>{{message}}</div>
        <div><input type="text" v-model="message"></div>
        <div>{{message}}</div>
    </div>
</div>

</body>
<script src="../assets/js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            message: "Hello, Sue!",
        }
    })
</script>
  • v-pre：原樣輸出
  • v-cloak:渲染完成后，再顯示元素
  • v-once:只渲染一次。適合用于內(nèi)容修改功能，需要同時顯示原內(nèi)容，和修改后內(nèi)容

學(xué)習(xí)自技術(shù)胖Vue.js視頻教程-第一季

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 今天主要vue的使用v-if，v-for，v-model，數(shù)據(jù)雙向綁定，處理表單和選框，class與style的常...
    范小飯_閱讀 2,494評論 1贊 17
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準。 注意：講述HT...
    kismetajun閱讀 27,588評論 1贊 45
  • 一、什么是vue？ Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。 ...
    前端守望者閱讀 180評論 0贊 0
  • 你的原形是一粒微小的沙 蚌 是你的家 歷經(jīng)無數(shù)次的磨煉與痛苦 修煉成一顆美麗的珍珠 離開家脫穎而出 璀璨奪目 你的...
    文采樂閱讀 270評論 4贊 11
  • 枕頭碼放整齊度不夠 都超出層板了 中間的正掛 褲子掛法不對，看著十分奇怪 疊裝整齊度不夠 層板上疊裝建議用同一款產(chǎn)...
    Holiday澈閱讀 159評論 0贊 0