vue筆記5 vueJS中的內置指令

原創 bamboo 2019-01-24 18:14

一、基本指令

1、v­-cloak

v­-cloak一般與display：none進行結合使用
作用：解決初始化慢導致頁面閃動的最佳實踐

2、 v-­once

定義它的元素和組件只渲染一次，再次修改元素值，不會重新渲染了

    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
 <div id="app">
    v-cloak：解決初始化慢導致頁面閃動<br>
    <!-- 如果網速比較慢的情況，先渲染'{{msg}}'，等一下再出現msg的內容。用v-clock，會等vue實例編譯結束後再去渲染vue -->
   <p v-cloak > {{msg}} </p>
   <hr>
   v-once:<br>
  <span v-once> {{oncedata}} </span>
  <!-- 定義它的元素和組件只渲染一次 -->
 </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 
<script>
    var app=new Vue({
        el:'#app',
        data:{
            msg:'加油我是最帥的程序員',
            oncedata:'也是最有錢的'
        }
    })
</script>

clipboard.png

二、條件渲染指令

1、v­-if, v­-eles­-if ,v-­else

例子1

<div id="app">
        <!-- v-if後接的是等號：等號後的內容必須是布爾值 -->
        <p v-if ="6<3" >{{apple}}</p>
        <p v-else-if="9>5"> {{pineapple}}</p>
        <p v-else> {{banana}}</p>
</div>
 var app=new Vue({
        el:'#app',
        data:{
            apple:'apple',
            banana:'banana',
            pineapple:'pineapple'
        }
    })

結果 ：顯示pineapple
如果v-if條件成立，v-else和v-else-if都不會執行顯示，v-if不成立，再依次執行v-else-if。

例二
實現需求：點擊按鈕，實現用戶名輸入框和密碼輸入框的切換
demo

 <div id="app2">
        <!-- v-if的實例用法:對不想要其複用的元素，加一個唯一的key值 -->
        需求：點擊按鈕，實現用戶名輸入框和密碼輸入框的切換
        <div v-if ="type==='name'">
            用戶名： <input type="text" placeholder="請輸入用戶名" >
        </div>
        <div v-else>
            密碼： <input type="text" placeholder="請輸入密碼" >
        </div>
        <button v-on:click="toggleType">點擊切換</button>
    </div>
  
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 
<script>

    var app2=new Vue({
        el:'#app2',
        data:{
            type:'name'
        },
        methods:{
            toggleType:function(){
               this.type= ( this.type==='name'?'password':'name')
            }
        }
    })
</script>

但是結果出現一個問題，我們在用戶名內輸入值後切換密碼輸入框，用戶名的值沒有清理

clipboard.png

clipboard.png

原因：
Vue 在渲染元素時 ，出於效率考慮，會儘可能地複用已有的元素而非重新渲染，只會渲染變化的元素。 因此會出現烏龍

解決方案
加key，唯一，提供key值可以來決定是否複用該元素

2、v­-show

只改變了css屬性display，v-show ="true/false"和v-if用法差不多，但是v­-if和v­-show的比較：

  • v­-if:實時渲染：頁面顯示就渲染，不顯示。我就給你移除
  • v­-show:v­-show的元素永遠存在也頁面中，只是改變了css的display的屬性
   <div id="app3">
        v-show的用法和v-if差不多:是否顯現，取決於布爾值。
        v-show和v-if的差別：
        v-if是實時渲染，頁面顯示就渲染，頁面不顯示，就移除該dom結構
        v-show的元素永遠存在於頁面，只是改變了css的display的屬性
        需要實時渲染用v-if，多次切換用v-show
        <p v-show ="9>a">我被渲染了</p>
    </div>
        var app3=new Vue({
        el:'#app3',
        data:{
            a:3
        }
    })

設置a的值，v-show不顯示，但發現v-show只是設置display：none；
clipboard.png

三、 列表渲染指令v­-for

v-for用法一：遍歷多個對象

  • 不帶索引
  • 帶索引的用法，注意順序先是item元素，再是index

v-for用法二：遍歷一個對象內多個相同的屬性

  • 不帶索引
  • 帶value，key，index，注意順序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        v-for的用法:v-for一定是寫在要遍歷的元素，v-for後接等號<br>
        (1)遍歷多個對象<br>
        學好vue的方法是<br>
        <ul>
            <li v-for ="vueMth  in vueMethods">{{vueMth.name}}</li>
            <!-- vueMth代表是 vueMethods裏面的變量，vueMethods是要遍歷的數組，類似於item in items -->
        </ul>
        <ul>
            <!-- 帶索引的寫法，帶括號（），第一個參數代表的item，第二個參數的是對象item下標 index-->
            <li v-for ="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
        </ul>
        <hr>
        （2）遍歷一個對象的多個屬性
         <span v-for=" value in nvshen"> {{ value}}</span><br>
         拿到value，key，index的寫法, value是對象的值(高圓圓)，key對象的屬性（girl1），index是對象的下標（1，2，3，4）
         <div v-for="(value,key,index) in nvshen ">第{{index}}個女神：{{key}}: {{value}}</div>
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 
<script>
    var app=new Vue({
        el:'#app',
        data:{
            //每個對象對應一個li
          vueMethods:[
              {name:'多思考'},
              {name:'多練習'},
              {name:'多聽課'}
          ],
          nvshen:{
              girl1:'高圓圓',
              girl2:'新垣結衣',
              girl3:'佐佐木希',
              girl4:'天海佑希',
          }
        }
    })
  
</script>  
</body>
</html>

結果

clipboard.png

四、 數組更新，過濾與排序

1、改變數組的基礎方法：

• push() 在末尾添加元素
• pop() 將數組的最後一個元素移除
• shift() 刪除數組的第一個元素
• unshift（）：在數組的第一個元素位置添加一個元素
• splice() ：可以添加或者刪除函數—返回刪除的元素
三個參數：

  • 第一個參數 表示開始操作的位置
  • 第二個參數表示：要操作的長度
  • 第三個爲可選參數：

clipboard.png

clipboard.png

clipboard.png

clipboard.png

2、舉例說明sort，reverse，改變數組指定項和長度

兩個數組變動vue檢測不到:

  1. 改變數組的指定項，解決方案是 Vue.set(app.arr,1,”car”); 參數一數組，參數二指定項下標，參數三修改的內容
  2. 改變數組長度，解決方案是app.arr.splice(1),代表從下標爲1的元素開始剪切掉，原數組發生變化

過濾：filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="study in arr"> {{ study }}</div>
        <button @click="sortArr">點擊排序</button>
        <button @click="reverseArr">點擊翻轉</button>
        <hr>
        <button v-on:click="changeOne">改變數組的指定項</button>
        <hr>
        <button v-on:click="changeArrLength">改變數組的長度</button>
        <hr>
        <button v-on:click="pop">數組後方去除</button>
        <hr>
        {{matchoo}}
   </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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
                })
            },
            reverseArr:function(){
                this.arr.reverse()
            },
            changeOne:function(){
                // this.arr[0]='car'  //在vue中直接改變數組指定項，vue不能檢測到。解決方法是vue提供了一個set方法，
                Vue.set(app.arr,1,'car') //第一個參數就是選定要修改的元素，第二個是選定元素的下標，第三是要替換的內容
            },
            changeArrLength:function(){
                this.arr.length=1   //在vue中直接改變數組長度，vue也不能檢測到，解決方法用splice
                this.arr.splice(3)
            },
            pop:function(){
                this.arr.pop()
            }
        },
        computed:{
            matchoo:function(){
                return this.arr.filter(function(book){
                    return book.match(/e/);  //目的是通過計算屬性，返回arr數組內符合要求的元素
                })
            }
        }
    })
  
</script>  
</body>
</html>

五、方法和事件

v-­on綁定的事件類似於原生 的onclick等寫法。主要是綁定事件時，還傳遞了參數


    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="dateApp">
        點擊次數：{{count}}
        <button @click="handle()">點擊每次加一</button>
        <button @click="handle(8)">點擊每次加八</button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>    
<script>
  
    var app =new Vue({
        el:"#dateApp",
        data:{
           count:0
        },
        methods:{
            handle:function (countnum) {
                countnum = countnum || 1
                this.count +=countnum 
            }
            
        }
    })
   
</script>
</body>
</html>

六、修飾符

Vue.js 爲 v-on 提供了 事件修飾符，通過由點(.)表示的指令後綴來調用修飾符。有點類似於原生js內event對象的屬性，如e.preventDefault()和e.stopPropagation()之類的。

  1. stop:阻止單擊事件向上冒泡
  2. prevent::提交事件並且不重載頁面
  3. self:只是作用在元素本身而非子元素的時候調用
  4. once: 只執行一次的方法，和v-once不一樣，v-once是內置指令，代表元素只渲染一次
  5. vuejs監聽鍵盤事件：

如用keyup事件監聽按鍵<input @keyup.13 ="submitMe">
（1）keyup後面可以接指定的keyCode碼，如13對應enter。查看詳細keycode
（2）但是記keycode碼比較不便，Vue 爲最常用的按鍵提供了別名：
enter tab delete esc space up down left right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        stop的用法<br>
        <div @click="divClick" style="background: blue;border:1px solid black;width: 100px;height:100px;">
            <button @click.stop="btnClick">點擊</button>
            <!-- 停止向上冒泡 -->
        </div>
        prevent的用法，每次提交表單都會重載(刷新)頁面,用prevent阻止提交表單的重載<br>
        <form action="#" @click.prevent="handle">
            <button type="submit" >提交表單</button>
        </form>
        self的用法，只作用於元素本身而非子元素的時候調用
        <div @click.self="divClick" style="background: blue;border:1px solid black;width: 100px;height:100px;">
            <button @click="btnClick">點擊</button>
        </div>
        once的用法，只執行一次<hr>
        <button @click="onceMethod">執行無限次</button>
        <button @click.once="onceMethod">執行一次</button>
        <hr>
        可以監聽鍵盤事件
        <input type="text" @keyup.esc="submitEsc"  placeholder="您按下了Esc鍵">
        <input type="text" @keyup.space="submitSpace" placeholder="您按下了Space鍵">
        <input type="text" @keyup.delete="submitDelete"  placeholder="您按下了Delete鍵">
        <input type="text" @keyup.up="submitUp" placeholder="您按下了Up鍵">
        <input type="text" @keyup.down="submitDown" placeholder="您按下了Down鍵">
        <input type="text" @keyup.right="submitRight" placeholder="您按下了Right鍵">
        <input type="text" @keyup.left="submitLeft" placeholder="您按下了Left鍵">
        <input type="text" @keyup.enter="submitMe" placeholder="您按下了enter鍵">
        <input type="text" @keyup.tab="submittab" placeholder="您按下了tab鍵">
    </div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> 
<script> 
    var app=new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            divClick:function(){
                alert('div被點擊了')
            },
            btnClick:function(){
                alert('btn被點擊了')
            },
            handle:function(){
                alert('我不重載')
            },
            onceMethod:function(){
                alert('執行多少次') 
            },
            submitMe:function(){
                alert('您按下了enter鍵')
            },
            submittab:function(){
                alert('您按下了tab鍵')
            },
            submitEsc:function(){
                alert('您按下了Esc鍵')
            },
            submitSpace:function(){
                alert('您按下了Space鍵')
            },
            submitDelete:function(){
                alert('您按下了Delete鍵')
            },
            submitUp:function(){
                alert('您按下了Up鍵')
            },
            submitDown:function(){
                alert('您按下了Down鍵')
            },
            submitRight:function(){
                alert('您按下了Right鍵')
            },
            submitLeft:function(){
                alert('您按下了Left鍵')
            }

        }
    })
</script>       
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

超級詳細的手寫webpack4配置來啓動vue2項目（附配置作用）

Sotyoyo 2019-02-24 16:44:37

QQ音樂播放地址api

要學習資料找我 2019-02-24 16:32:45

vue-router 源碼閱讀 - 文件結構與註冊機制

SHERlocked93 2019-02-23 23:04:28

Vue.js 2.0之全家桶系列視頻課程——筆記（一）

湯小洋 2019-02-23 00:32:11

原有vue項目接入typescript

Fundebug 2019-02-22 23:00:37

在VUE中利用MQTT協議實現即時通訊

青荼 2019-02-22 21:04:46

如何解決Django與Vue語法的衝突

alsww 2019-02-22 20:08:49

vue.js使用props在父子組件之間傳參

xsster 2019-02-22 17:24:40

手機端車牌號碼鍵盤的vue組件

pinenut 2019-02-22 16:04:32

WeexBox 給你最好的圖片加載方式

myeveryheart 2019-02-22 15:54:49

表單選項互斥問題（vue）

darcrand 2019-02-22 14:44:45

Vue.js基礎教程

whjin 2019-02-22 14:44:43

前端_Vue

SoapEye 2019-02-22 13:44:42

VUE搭建手機商城心得

MrXu 2019-02-22 12:34:37

第十二課時:渲染函數和JSX快速掌握

嶽_輕風 2019-02-22 12:34:36