Vue成神之路之內部指令

原創 小胖 2018-12-14 14:30

前言

記錄平時學到的知識，標題寫的大氣一點，也算是給自己一點鼓勵，希望在技術這條路可以遠走越遠，路越走越寬~

文中代碼地址

PS：如果對你有一點幫助，請順手給個小星星哦，鼓勵我繼續寫下去~

引入的文件文件說明

vue.js——開發版本：包含完整的警告和調試模式 vue.min.js——生產版本：刪除了警告，進行了壓縮

1、內部指令

指令 (Directives) 是帶有 v- 前綴的特殊特性。指令特性的值預期是單個 JavaScript 表達式 (v-for 是例外情況)。指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。

1.1 v-if & v-show

v-if

  • v-if:是vue的一個內部指令，必須將它添加到一個元素上。v-if根據條件判斷是否加載對應元素的DOM。
  • v-else 指令來表示 v-if 的“else 塊”。v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
  • v-else-if，顧名思義，充當v-if的“else-if塊”，可以連續使用。類似於v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之後。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin == 'A'">v-if</div>
        <div v-else-if="isLogin == 'B'">v-else-if</div>
        <div v-else>v-else</div>
        <div v-show="isLogin">v-show</div>
        <hr>
        <template v-if="isLogin == 'B'">v-if支持template元素</template>
        <template v-show="isLogin == 'B'">v-show不支持template元素</template>>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                isLogin: 'A'
            },
            components: {
                "test-child": {
                  template:"<h1>我是template</h1>"
                }
            }
        })
    </script>
</body>
</html>

v-show

  • v-show：是另一個用於根據條件展示元素的指令。

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

注意，v-show 不支持 <template>元素,也不支持 v-else。

v-if 和v-show的區別：

  • v-if 是“真正”的條件渲染，因爲它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷燬和重建。v-if 也是惰性的：如果在初始渲染時條件爲假，則什麼也不做——直到條件第一次變爲真時，纔會開始渲染條件塊。
  • v-show 就簡單得多，不管初始條件是什麼，元素總是會被渲染，即元素會始終渲染並保持在DOM中，並且只是簡單地基於 CSS 進行切換。
  • v-show不支持template元素，作用在template元素上沒有效果，v-if則支持。

一般來說，v-if 有更高的切換開銷（根據條件對元素進行創建...銷燬...創建...銷燬），而 v-show 有更高的初始渲染開銷（不管條件是否爲true，，元素都會被渲染並保存在DOM中）。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。

1.2 v-for指令：解決模板循環問題

用 v-for 指令根據一組數組的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源數據數組並且 item 是數組元素迭代的別名。

需要注意的是，你需要那個html標籤循環，v-for就寫在那個標籤上面。

基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>V-for 案例</title>
</head>
<body>
    <h1>v-for指令用法</h1>
    <hr>
    <div id="app">
       <ul>
           <li v-for="item in items">
                {{item}}
           </li>
       </ul>
    </div>
    <script type="text/javascript">
        var app=new Vue({
            el:'#app',
            data:{
                items:[20,23,18,65,32,19,54,56,41]
            }
        })
    </script>
</body>
</html>

排序： 運行上面代碼，可以看到瀏覽器順利的輸出了定義的數組，但是如果想在輸出之前對定義的數組進行一些操作，例如：給定義的數組排個序，則可以使用Vue的computed:屬性。

var app = new Vue({
    ......
    computed:{
        sortItems:function(){
              return this.items.sort(sortNumber);
        }
    }
})

function sortNumber(a,b){
    return a-b
}

在computed裏新聲明瞭一個對象sortItems，如果不重新聲明延用data裏面定義的數組items則會報錯，原因是這樣會污染原來定義的數據源，這是Vue不允許的，所以要重新聲明一個對象。

對象循環輸出：

先定義個數組，數組裏邊是對象數據

students: [
    {name: 'Andy', age: 18},
    {name: 'Tony', age: 17},
    {name: 'Alen', age: 35},
    {name: 'zaishuiyixia', age: 25}
]

在模板中輸出

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

加入索引序號：

//數組對象方法排序:
function sortByKey(array,key){
    return array.sort(function(a,b){
      var x=a[key];
      var y=b[key];
      return ((x<y)?-1:((x>y)?1:0));
   });
}

有了數組的排序方法，在computed中進行調用排序

sortStudent:function(){
     return sortByKey(this.students,'age');
}

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for實例</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(student, index) in sortStudent">
                {{index+1}}: {{student.name}}-{{student.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                items:[25,58,98,65,28,98,28,76],
                students: [
                    {name: 'Andy', age: 18},
                    {name: 'Tony', age: 17},
                    {name: 'Alen', age: 35},
                    {name: 'zaishuiyixia', age: 25}
                ]
            },
            computed: {
                sortItems: function() {
                    return this.items.sort(sortNumber)
                },
                sortStudent:function(){
                     return sortByKey(this.students,'age');
                }
            }
        });

        function sortNumber(a, b) {
            return a-b;
        }

        //數組對象方法排序:
        function sortByKey(array,key){
            return array.sort(function(a,b){
              var x=a[key];
              var y=b[key];
              return ((x<y)?-1:((x>y)?1:0));
           });
        }
    </script>
</body>
</html>

1.3 v-text & v-html指令

Vue中數據綁定的形式是使用“Mustache”語法 (雙大括號) 的文本插值：

<span>Message: {{ msg }}</span>

使用這種語法是有弊端的，就是當速很慢或者javascript出錯時，瀏覽器會先顯示{{xxx}}。Vue提供的v-text，就是解決這個問題的。

<span v-text="message"></span>
<!-- 和下面的一樣 -->
<span>{{message}}</span>

如果在javascript中寫有html標籤，用v-text是輸出不出來的，這時候我們就需要用v-html標籤了。

雙大括號會將數據解釋爲純文本，而非HTML。爲了輸出真正的HTML，就需要使用v-html 指令。 需要注意的是：在生產環境中動態渲染HTML是非常危險的，因爲容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在用戶提交和可操作的網頁上使用。 完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-text & v-html實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-text & v-html實例</h1>
    <hr>
    <div id="app">
        <span>{{message}}</span> == <span v-text="message"></span>
        <br>
        <span v-html="html"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world!',
                html: '<h2>hello world!</h2>'
            }
        })
    </script>
</body>
</html>

1.4 v-on指令

綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個內聯語句，如果沒有修飾符也可以省略。

用在普通元素上時，只能監聽原生 DOM 事件。用在自定義元素組件上時，也可以監聽子組件觸發的自定義事件。

使用綁定事件監聽器，編寫一個加分減分的程序：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on實例</h1>
    <hr>
    <div id="app">
        本場比賽得分：{{score}}
        <p>
            <button v-on:click="jiafen">加分</button>
            <button v-on:click="jianfen">減分</button>
            <br><br>
            <!-- 綁定鍵盤的enter鍵 -->
            <input type="text" v-on:keyup.enter="onEnter" v-model="score2" >
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                score: 0,
                score2: 1
            },
            methods: {
                jiafen: function() {
                    this.score++;
                },
                jianfen: function() {
                    this.score--;
                },
                onEnter: function() {
                    this.score = this.score + parseInt(this.score2)
                }
            }
        })
    </script>
</body>
</html>

v-on 還有一種簡單的寫法，就是用@代替。

<button @click="jianfen">減分</button>

除了綁定click之外，還可以綁定其它事件，比如鍵盤迴車事件v-on:keyup.enter,現在增加一個輸入框，然後綁定回車事件，回車後把文本框裏的值加到我們的count上。 綁定事件寫法：

<input type="text" v-on:keyup.enter="onEnter" v-model="score2">

javascript代碼：

onEnter:function(){
     this.count=this.count+parseInt(this.secondCount);
}

因爲文本框的數字會默認轉變成字符串，所以我們需要用parseInt()函數進行整數轉換。

1.5 v-model

v-model指令，可簡單的理解爲綁定數據源。就是把數據綁定在特定的表單元素上，可以很容易的在表單控件或者組件上創建雙向綁定 、 。

使用限制，應該用於表單控件或者組件上：

<input>、<select>、<textarea>、components

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model綁定數據源實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model綁定數據源實例</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{message}}內部指令</p>
        <h3>文本框</h3>
        <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>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></textarea>
        <hr>
        <h3>多選框綁定一個值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
        <hr>
        <h3>多選框綁定數組</h3>
        <p>
            <input type="checkbox" id="alen" value="alen" v-model="names">
            <label for="alen">alen</label>
            <input type="checkbox" id="andy" value="andy" v-model="names">
            <label for="andy">andy</label>
            <input type="checkbox" id="tony" value="tony" v-model="names">
            <label for="tony">tony</label>
            <p>{{names}}</p>
        </p>
        <hr>
        <h3>單選框綁定</h3>
        <p>
            <input type="radio" id="man" value="男" v-model="sex">
            <label for="man">男</label>
            <input type="radio" id="woman" value="女" v-model="sex">
            <label for="woman">女</label>
            <p>你選擇的性別是：{{sex}}</p>
        </p>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world!',
                isTrue: true,
                names: [],
                sex: '男'
            },
            methods: {
                
            }
        })
    </script>
</body>
</html>

1.6 v-bind

動態地綁定一個或多個屬性。在綁定 class 或 style 特性時，支持其它類型的值，如數組或對象。

綁定css樣式，在綁定CSS樣式時，綁定的值必須在vue中的data屬性中進行聲明：

1、直接綁定class樣式

<div :class="className">1、綁定classA</div>

2、綁定classA並進行判斷，在isClassA爲true時顯示樣式，在isClassA爲false時不顯示樣式。

<div :class="{classA:isClassA}">2、綁定class中的判斷</div>

3、綁定class中的數組

<div :class="[classA,classB]">3、綁定class中的數組</div>

4、綁定class中使用三元表達式判斷

<div :class="isClassA?classA:classB">4、綁定class中的三元表達式判斷</div>

5、綁定style

<div :style="{color:red,fontSize:font}">5、綁定style</div>

6、用對象綁定style樣式

<div :style="styleObject">6、用對象綁定style樣式</div>
......
var app=new Vue({
   el:'#app',
   data:{
       styleObject:{
           fontSize:'24px',
           color:'green'
            }
        }
})

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <style>
        .classA {
            color: red;
        }
        .classB {
            font-size: 150%;
        }
    </style>
</head>
<body>
    <h1>v-bind實例</h1>
    <hr>
    <div id="app">
        <p><img v-bind:src="imgUrl" alt="" width="300px"></p>
        <p><a :href="blogUrl" target="_blank">我的博客地址</a></p>
        <hr>
        <div :class="className">1、綁定class屬性</div>
        <div :class="{classA: isClassA}">2、綁定class中的判斷</div>
        <div :class="[classA, classB]">3、綁定class中的數組</div>
        <div :class="isClassA?classA:classB">4、綁定class中的三元運算符</div>
        <hr>
        <div>
            <input type="checkbox" id="isClassA" v-model="isClassA">
            <label for="isClassA">isClassA={{isClassA}}</label>
        </div>
        <hr>
        <div :style="{color:color,fontSize:font}">5、綁定style</div>
        <div :style="styleObj">5、對象綁定style</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                imgUrl: 'https://upload-images.jianshu.io/upload_images/1969310-c688f5d4d3a352b1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp',
                blogUrl: 'https://www.jianshu.com/p/26010db3776c',
                className: 'classA',
                isClassA: false,
                classA: 'classA',
                classB: 'classB',
                color: 'red',
                font: '20px',
                styleObj: {
                    color: 'green',
                    fontSize: '24px'
                }
            }
        })
    </script>
</body>
</html>

1.7 其他指令

v-pre指令：

在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。

<div v-pre>{{message}}</div>

v-cloak指令：

在vue渲染完指定的整個DOM後才進行顯示。可以防止數據抖動。

<div v-cloak>
  {{ message }}
</div>

v-once指令：

在第一次DOM時進行渲染，渲染完成後視爲靜態內容，跳出以後的渲染過程。

<div v-once>第一次綁定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-pre & v-cloak & v-once</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-pre & v-cloak & v-once</h1>
    <hr>
    <div id="app">
        <div v-pre>{{message}}</div>
        <div v-cloak>渲染完成後，才顯示！</div>
        <div>{{message}}</div>
        <div><input type="text" v-model="message"></div>
        <div>{{message}}</div>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                message: 'hello world!'
            }
        })
    </script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Filter

矮油不錯哦_ab60 2019-02-24 14:12:49

Spring中你可能不知道的事（二）

CoderBear 2019-02-24 14:10:43

Spring中你可能不知道的事（一）

CoderBear 2019-02-24 14:10:42

三種方式實現觀察者模式 及 Spring中的事件編程模型

CoderBear 2019-02-24 14:10:42

C#中爲什麼會出現空靜態構造方法的寫法

CoderBear 2019-02-24 14:10:42

劍指Spring源碼（一）

CoderBear 2019-02-24 14:10:42

劍指Spring源碼（二）

CoderBear 2019-02-24 14:10:42

有點深度的聊聊JDK動態代理

CoderBear 2019-02-24 14:10:42

簡單的單例模式其實也不簡單

CoderBear 2019-02-24 14:10:42

Volatile的那些事

CoderBear 2019-02-24 14:10:42

產品監控指標

Real_man 2019-02-24 13:58:13

【蛻變之路】第6天 面向對象 （2019年2月24號）

仵寧飛 2019-02-24 13:54:39

最新阿里Java技術面試題，看這一文就夠了！

_年少無爲 2019-02-24 13:27:21

Java面試學問多，看看高級程序員面試題是什麼樣的

_年少無爲 2019-02-24 13:27:21

探索未知種族之osg類生物---起源

985850293 2019-02-24 13:46:42