vueJS中的內(nèi)置指令

1、基本指令
1.1、v-cloak

v--cloak作用：解決初始化慢導(dǎo)致頁面閃動的指令,簡單點來說防止頁面加載時出現(xiàn) vue.js 的變量名而設(shè)計的，這個指令通常與display：none進(jìn)行結(jié)合使用。

（1）、 v-cloak 的用法：

 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;  //結(jié)合使用
        }
    </style>
    </head>
    <body>
        <div id="app">
            <p v-cloak>{{msg}}</p>    //vue.js的變量名
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    msg: "我是某某"
                }
            })
        </script>
</body>

但有時添加完畢后仍有部分變量會顯示，通過控制臺查看，原來是 v-cloak 的display屬性被優(yōu)先級別高的樣式覆蓋所導(dǎo)致，處理方案是可以添加 !important ，新css樣式如下：

[v-cloak] {
  display:none !important;
}
1.2、v-once

定義它的元素和組件只渲染一次

（1）、v-once的用法：

<div id='app'>
    <span>{{oncedata}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",    //注意id對應(yīng)的要加個#
        data: {
            oncedata: "我想吃蘋果"
        }
    })
</script>

通過瀏覽器控制臺修改app.oncedata="我想運(yùn)動"，發(fā)現(xiàn)不能重新渲染，說明once屬性只能渲染一次。

2、 條件渲染指令

2.1、 v--if, v--else--if ,v--else

條件判斷語句，<div v-if='6<3'>{{apple}}</div>，注意v-if后面接的是等號（=）,等號內(nèi)容是一個布爾值。其中v--if, v--else--if ,v--else三者可以結(jié)合使用。

（1）、 v--if, v--else--if ,v--else的用法：

<div id='app'>
    <!-- 判斷6<3的真假，返回一個布爾值,如為真則執(zhí)行
    該語句后面else的表達(dá)式不執(zhí)行，否則跳到一條表達(dá)式 -->
    <div v-if='6<3'>{{apple}}</div>   
    <div v-else-if='9>5'>{{banana}}</div>
    <div v-else>{{peach}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",    
        data: {
            apple:'apple',
            banana:'banana',
            peach:'peach'
        }
    })
</script>

實例如下：

<div id='app'>
    <div v-if="type==='name'">
        用戶名：<input type='text' placeholder="請輸入用戶名" key='123'>
    </div>
    <div v-else>
        密碼：<input type='text' placeholder="請輸入密碼" key='456'>
    </div>
    <button v-on:click="switchType">點我，切換</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            type: "name"  //初始化用戶名輸入框值
        },
        methods: {
            switchType: function () {
                // 三元運(yùn)算符優(yōu)先級要高于賦值預(yù)算符
                this.type = (this.type === 'name' ? 'password' : 'name')
            }
        }
    })
</script>

v-if的弊端 :Vue 在渲染元素時 ，出于效率考慮，會盡可能地復(fù)用已有的元素而非重新渲染， 因此會出現(xiàn)烏龍只會渲染變化的元素，也就是說，input元素被復(fù)用了。
解決方法：加key，提供key值可以來決定是否復(fù)用該元素，key值不重復(fù)就行，值隨意定義。

2.2、v--show

條件判斷語句，<p v-show='9>5'>我被渲染了</p>，注意v-show后面接的是等號（=）,等號內(nèi)容是一個布爾值。v-show的用法幾乎和v-if用法一樣

 <div id='app'>
   <p v-show='9>5'>我被渲染了</p>
</div>

v--if和v--show的具體比較：
1、v--if: 實時渲染：頁面顯示就渲染，不顯示。我就給你移除
2、v--show: v--show的元素永遠(yuǎn)存在也頁面中，只是改變了css的display的屬性

舉個例子，當(dāng)你的頁面需要實時渲染的效果，就要用到v-if指令，但當(dāng)你只需要頻繁切換頁面的話，就用v-show指令即可。

3 列表渲染指令v--for

當(dāng)需要將一個數(shù)組遍歷或枚舉一個對象屬性的時候循環(huán)顯示時，就會用到列表渲染指令 v--for。
兩種使用場景：
1、遍歷多個對象
2、遍歷一個對象的多個屬性

（1）、遍歷多個對象

用法：<li v-for='value in VueMethods'>{{value.name}}</li>

v-for一定是寫在要遍歷的元素上（如要遍歷列表的對象，就要寫在li標(biāo)簽上）v-for后接等號，寫法類似于item in items,其中value是變量，VueMethods是遍歷的數(shù)組，注意遍歷多個對象一定是遍歷的數(shù)組。

示例1：

<div id='app'>
   <ul>
       <li v-for='value in VueMethods'>{{value.name}}</li>
   </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            VueMethods:[
                {name:'多思考'},
                {name:'多練習(xí)'},
                {name:'多做題'}
            ]
        },
       
    })
</script>
效果圖

帶索引的寫法：括號的第一個變量，代表遍歷對象,第二個是index

示例2：

<div id='app'>
    <!-- 帶索引的寫法：括號的第一個變量，代表遍歷對象,第二個代表index -->
    <ul>
        <li v-for='(value,index) in VueMethods'>{{index}}--{{value.name}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            VueMethods: [
                { name: '多思考' },
                { name: '多練習(xí)' },
                { name: '多做題' }
            ]
        },
    })
</script>
效果圖

（2）、遍歷一個對象的多個屬性

示例1：

<div id='app'>
    <span v-for='value in nvshen'> {{value}} </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            nvshen: {
                girl1: '李冰冰',
                girl2: '范詩詩',
                girl3: '趙婷婷'
            }
        },
    })
</script>
效果圖

帶索引的寫法：括號的第一個是變量，代表遍歷對象,第二個是key值，第三個是index，順序不能弄亂。

<div id='app'>
    <span v-for='(value,key,index) in nvshen'> 第{{index}}女神
    --{{key}}--{{value}} </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            nvshen: {
                girl1: '李冰冰',
                girl2: '范詩詩',
                girl3: '趙婷婷'
            }
        },
    })
</script>
效果圖
4、 數(shù)組更新，過濾與排序

改變數(shù)組的一系列方法：
? push（）在末尾添加元素
? pop（）將數(shù)組的最后一個元素移除
? shift（）刪除數(shù)組的第一個元素
? unshift（）在數(shù)組的第一個元素位置添加一個元素
? splice() ：可以添加或者刪除函數(shù)—返回刪除的元素

splice三個參數(shù)：
第一個參數(shù) 表示開始操作的位置；
第二個參數(shù)表示：要操作的長度（如果是0表示要添加，否則就是刪除操作）
第三個為可選參數(shù)（第二個參數(shù)是0，第三參數(shù)就是要添加內(nèi)容）

? sort（）：排序

<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='sortArr'>點我排序</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods: {
            sortArr: function () {
                this.arr.sort(function (a, b) {
                    return a.length - b.length
                })
            }
        }
    })
</script>

JS 數(shù)組sort方法升序是a-b詳解點擊查看
? reverse（）：翻轉(zhuǎn)

<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='reverseArr'>點我翻轉(zhuǎn)</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods: {
            reverseArr:function(){
                this.arr.reverse()
            }
        }
    })
</script>

兩個數(shù)組變動vue檢測不到:

  1. 改變數(shù)組的指定項（常規(guī)做法是檢測不到，如下例）
<body>
<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='changeOne'>改變數(shù)組指定項</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods: {
            changeOne: function () {
                this.arr[0] = 'car'   //Vue這樣是不能實現(xiàn)改變數(shù)組的指定項
            },
        }
    })
</script>
</body>

解決方法：改變指定項：Vue.set(app.arr,1,”car”)--Vue相當(dāng)于全局變量，利用set方法，參數(shù)1是對象，參數(shù)2是改變位置下標(biāo)，參數(shù)3是替換內(nèi)容

<body>
<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='changeOne'>改變數(shù)組指定項</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
    })
    Vue.set(app.arr,1,'car')  //Vue相當(dāng)于全局變量
</script>

</body>

  1. 改變數(shù)組長度（常規(guī)做法是檢測不到，如下例）
<body>
<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='changeArrLength'>改變數(shù)組長度</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods:{
        changeArrLength:function(){
            this.arr.length=1
        }
    }
    })
</script>
</body>

解決方法：
上述例子中的this.arr.length=1改成this.arr.splice(1)數(shù)組長度將變成1，或者在瀏覽器控制臺調(diào)試代碼為app.arr.splice(1)

? filter（）：過濾
需求：找到數(shù)組中含有字符串OO的項

<body>
<div id="app">
    {{matchOO}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        computed: {
            matchOO: function () {
                return this.arr.filter(function (book) {
                    return book.match(/oo/)
                })
            }
        }
    })
</script>
</body>

match() 方法可在字符串內(nèi)檢索指定的值，或找到一個或多個正則表達(dá)式的匹配。

5.5 方法和事件

1 、基本用法
v--on綁定的事件類似于原生 的onclick等寫法

<body>
<div id="app">
    點擊次數(shù)：{{count}}
    <button @click='handle()'>每次點擊加1</button>
    <button @click='handle(8)'>每次點擊加8</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            handle: function (count) {  //方法帶有參數(shù)count
                count = count || 1;
                this.count += count
            }
        }
    })
</script>
</body>

注意如果方法中帶有參數(shù)，但是你沒有加括號，默認(rèn)傳原生事件對象event，所以當(dāng)方法帶有參數(shù)時要帶上括號。

2、修飾符

（1）、stop:阻止單擊事件向上冒泡

<body>
<div id="app">
    <div @click='divButton' style="width:100px;height:100px;background-color:blue">
        <button @click.stop='btn'>button</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            divButton: function () {
                alert('div被點擊了')
            },
            btn: function () {
                alert('button被點擊了')
            },
        }
    })
</script>
</body>

當(dāng)我們點擊子元素btn時候，如果沒有加上stop，事件就會向上冒泡導(dǎo)致父元素也會出現(xiàn)彈框。我們可以通過添加和刪去stop來測試具體效果。

（2）、self:只是作用在元素本身而非子元素的時候調(diào)用

<body>
<div id="app">
    <div @click.self='divButton' style="width:100px;height:100px;background-color:blue">
        <button @click='btn'>button</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            divButton: function () {
                alert('div被點擊了')
            },
            btn: function () {
                alert('button被點擊了')
            },
        }
    })
</script>
</body>

self一定是寫在父元素身上，當(dāng)點擊父元素還是子元素都會只作用自身，不會發(fā)生向上冒泡情況。

（3）、prevent:提交事件并且不重載頁面

<body>
<div id="app">
    <form action="" @submit.prevent>
        <button type='submit'>提交表單</button>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
    })
</script>
</body>
效果圖

當(dāng)我們表單提交時不想，進(jìn)行刷新頁面，就需要添加prevent，因為是不想表單刷新，所有應(yīng)該寫在form標(biāo)簽中。

（4）、once: 只執(zhí)行一次的方法

<body>
<div id="app">
    <button @click='onceButton'>多次點擊</button>
    <button @click.once='onceButton'>一次點擊</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            onceButton: function () {
                alert('可以進(jìn)行多少次點擊')
            },
        }
    })
</script>
</body>
image.png

點擊多次點擊按鈕，可以一直出現(xiàn)彈框，點擊一次點擊按鈕（添加了once）只出現(xiàn)一次，后面再次點擊就會起作用了。

（5）、監(jiān)聽鼠標(biāo)事件

<body>
<div id="app">
    <input @keyup.13='submitMe'>   //13就是代表enter鍵，常規(guī)寫法
    <input @keyup.enter='submitMe'>  //vueJS提供便捷方式寫法
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            submitMe: function () {
                alert('你按下了enter鍵')
            }
        }
    })
</script>
</body>

當(dāng)我們按下enter鍵，就能監(jiān)聽該事件發(fā)生了。但是vueJS給我們提供很多便捷方式寫法如直接就可以.enter、.tab 、.delete等這樣寫法就行。

最后編輯于 ：
?著作權(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)容

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