首頁 >web前端 >js教程 >Vue中常用的指令總結

Vue中常用的指令總結

不言原創: 2018-07-26 12:53:231480瀏覽

這篇文章分享給大家的內容是關於Vue中常用的指示總結，內容很詳細，接下來我們就來看看具體的內容，希望可以幫助到有需要的朋友。

1 常用指令

v-if指令
#v-show指令
#v-show指令
#v-else指令
v-for指令
#v-bind指令

#v-text指令

1.1

v-if

是條件渲染指令，它根據表達式的真假來刪除和插入元素，它的基本語法如下：

v-if="expression"

expression是一個傳回bool值的表達式，表達式可以是一個bool屬性，也可以是一個回傳bool的運算式。例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Hello, Vue.js!</h1>
            <h1 v-if="yes">Yes!</h1>
            <h1 v-if="no">No!</h1>
            <h1 v-if="age >= 25">Age: {{ age }}</h1>
            <h1 v-if="name.indexOf(&#39;jack&#39;) >= 0">Name: {{ name }}</h1>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        
        var vm = new Vue({
            el: &#39;#app&#39;,
            data: {
                yes: true,
                no: false,
                age: 28,
                name: &#39;keepfool&#39;
            }
        })
    </script>
</html>

顯示結果如下、

#注意：v-if指令是根據條件表達式的值來執行

元素的插入或刪除行為。

1.2

v-for指令

#v-for

指令基於一個陣列渲染一個列表，它和JavaScript的遍歷語法相似：<pre class="brush:js;toolbar:false;">v-for="item in items"</pre>items是一個數組，item是目前被遍歷的陣列元素。

範例程式碼：


    
        
            
                
                    name
                    age
                

            
            
                
                     {{item.name}}
                     {{item.age}}

name	age
{{item.name}}	{{item.age}}

1.3 v-bind 指令可以在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：

v-bind:class

v-bind:argument="expression"

1.4 v-model

v-model（表單元素設定了之後會忽略掉value，checked，selected），常用在表單d5fd7aea971a85678ba271703566ebfd 和4750256ae76b6b9d804861d8f69e79d3

讓表單元素和資料實作雙向綁定（映射關係）

範例程式碼

<p id="app">
    <p v-text="message"> </p>
    <input type="text" v-model="message">
</p>

</body>

<script type="text/javascript">    var app = new Vue({
        el:"#app",
        data:{
            message:"nice to meet you"
        }
    })</script>

1.5 v-on 指令用來給予監聽DOM事件，它的用語法和v-bind是類似的，例如監聽3499910bf9dac5ae3c52d5ede7383485元素的點擊事件：

<a v-on:click="doSomething">

有兩種形式呼叫方法：綁定一個方法（讓事件指向方法的參考），或使用內聯語句。 Greet按鈕將它的點選事件直接綁定到greet()方法，而Hi按鈕則是呼叫say()方法。在事件處理程序中呼叫

event.preventDefault()

event.stopPropagation()
是非常常見的需求。 Vue.js 為 v-on 提供了事件修飾因子。之前提過，修飾符是由點開頭的指令後綴來表示的。
.stop
#.prevent
##.capture
.self
##.once

.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<p v-on:click.capture="doThis">...</p>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<p v-on:click.self="doThat">...</p>

Vue.js為最常用的兩個指令v-bind和v-on提供了縮寫方式。 v-bind指令可以縮寫為一個冒號，v-on指令可以縮寫為@符號。

<!--完整语法-->
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>
<!--缩写语法-->
<a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? &#39;active&#39; : &#39;&#39;">{{ n + 1 }}</a>

<!--完整语法-->
<button v-on:click="greet">Greet</button>
<!--缩写语法-->
<button @click="greet">Greet</button>

1.6 v-text指令主要是防止頁面首次載入時{{}} 出現在頁面上

v-text="expresstion"

Vue中常用的指令總結

1.3 v-bind 指令可以在其名稱後面帶一個參數，中間放一個冒號隔開，這個參數通常是HTML元素的特性（attribute），例如：

相關文章