vue指令用法

時間 2019-11-08

標籤 vue 指令用法简体版

原文原文鏈接

vue指令html

指令式帶有 v- 前綴的特殊特性v-text和v-html都屬於指令將數據和dom作關聯，當表達式的值改變時，響應式地做用在視圖vue

解決大鬍子語法閃爍案例es6

[v-cloak] {
 dispaly: none;
}複製代碼

通常把v-cloak綁在Vue實例el屬性綁定的節點上npm

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
 <style>
 
  [v-cloak] {
     display: none;
    }
    
 </style>
 </head>
 <body>
 
  <div id="app" v-cloak>
     {{msg}}
    </div>
    <script>
     var vm = new Vue({
      el: "#app",
        data: {
         msg: "問題"
        }
    </script>
    
</body>
</html>複製代碼

v-bind給標籤屬性綁定使用

v-bind是讓標籤屬性能夠動態的使用data參數或者寫一些簡單的js表達式瀏覽器

v-text，v-html不一樣它倆是針對標籤中的內容，v-bind是針對標籤中的屬性app

v-bind案例：dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <a v-bind:href="url" v-bind:title="title">v-bind的縮寫是冒號:</a>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            data:{
                url:"www.baidu.com",
                title:'百度'
            }
        })
    </script>
</body>
</html>複製代碼

v-on綁定事件v-on方法處理器和內聯處理器函數

方法處理器內聯處理器性能

v-on對象處理v-on:keyup監聽按鍵觸發this

事件修飾符

阻止事件冒泡--stop實現捕獲觸發事件的機制--capture只會阻止本身身上冒泡行爲--self阻止默認事件--prevent只觸發一次默認行爲

v-on綁定事件能夠用v-on指令監聽DOM事件

<button v-on:click="alert('a')">v-on</button>複製代碼

v-on的縮寫@符號

v-on方法處理器和內聯處理器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <button v-on:click="doThis">v-on按鈕</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                // es6 語法
                doThis(){
                    if (event) {
                        alert(event.target.tagName)
                    }
                    alert('我是方法處理器')
                }
            },
        })
    </script>
</body>
</html>複製代碼

使用的時候帶括號:'<button v-on:click="doThat('hello', $event)"></button>'

帶括號的好處是能夠傳參，但不自帶evet 事件，想使用event事件須要$event
參數傳入複製代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--導入Vue cdn 的網址-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>
    <div id="app" >
        <button v-on:click="doThat('hello', $event)">v-on按鈕</button>
    </div>
    <script>
        var vm = new Vue({
            el:"#app",
            methods:{
                // es6 語法
                doThat(parameter, event){
                    let msg = parameter + "內聯方法";
                    if (event) {
                        alert(event.target.tagName)
                    }
                    alert(msg);
                }
            },
        })
    </script>
</body>
</html>複製代碼

內聯處理器是指的什麼呢？

<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>複製代碼

new Vue({
  el: '#example-3',
  methods: {
    say: function () {
      alert('hello');
    }
  }
});複製代碼

寫法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>複製代碼

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message);
    }
  }
});複製代碼

差別一個有括號，一個沒括號，對吧？

沒括號的這個，直接就是函數名，有括號的這個，實際是一條JS語句，有括號的這個就叫『內聯處理器』。

沒括號的有這麼一個好處：

<div id="example-3">
  <button v-on:click="say">Say hi</button>
  <button v-on:click="say">Say what</button>
</div>複製代碼

new Vue({
  el: '#example-3',
  methods: {
    say: function (event) {
      alert(event.target.tagName);
    }
  }
});複製代碼

有括號的

讓有括號的也能獲得無括號孃胎裏自帶的event參數

<div id="example-3">
  <button v-on:click="say('hi', $event)">Say hi</button>
  <button v-on:click="say('what', $event)">Say what</button>
</div>複製代碼

new Vue({
  el: '#example-3',
  methods: {
    say: function (message, event) {
      alert(message);
      alert(event.target.tagName);
    }
  }
});複製代碼

事件處理監聽事件

<div id="example">
 <button v-on:click="counter += 1">Add</button>
 <p>the button{{counter}}time</p>
</div>複製代碼

var example = new Vue({
 el: '#example',
 data: {
  counter: 0
 }
})複製代碼

事件處理方法：

<div id="example-2">
  <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>複製代碼

var example2 = new Vue({
 el: '#example-2",
 data: {
  name: "Vue.js"
    },
 methods: {
  greet: function(event) {
     alert('hello' + this.name)
     if(event){
      alert(event.target.tagName)
        }
        }
        }
})
example2.greet()複製代碼

內聯處理器中的方法

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})複製代碼

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 如今咱們能夠訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}複製代碼

事件修飾符：在事件處理程序中調用 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>

<!-- 添加事件監聽器時使用事件捕獲模式 -->
<!-- 即元素自身觸發的事件先在此處理，而後才交由內部元素進行處理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只當在 event.target 是當前元素自身時觸發處理函數 -->
<!-- 即事件不是從內部元素觸發的 -->
<div v-on:click.self="doThat">...</div>複製代碼

v-on:click.prevent.self 會阻止全部的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊

<!-- 點擊事件將只會觸發一次 -->
<a v-on:click.once="doThis"></a>複製代碼

<!-- 滾動事件的默認行爲 (即滾動行爲) 將會當即觸發 -->
<!-- 而不會等待 `onScroll` 完成  -->
<!-- 這其中包含 `event.preventDefault()` 的狀況 -->
<div v-on:scroll.passive="onScroll">...</div>複製代碼

這個 .passive 修飾符尤爲可以提高移動端的性能

不要把 .passive 和 .prevent 一塊兒使用，由於 .prevent 將會被忽略，同時瀏覽器可能會向你展現一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的默認行爲。

按鍵修飾符

<!-- 只有在 `keyCode` 是 13 時調用 `vm.submit()` -->
<input v-on:keyup.13="submit">

<!-- 同上 -->
<input v-on:keyup.enter="submit">

<!-- 縮寫語法 -->
<input @keyup.enter="submit">

.enter
.tab
.delete (捕獲「刪除」和「退格」鍵)
.esc
.space
.up
.down
.left
.right

// 可使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112複製代碼

自動匹配按鍵修飾符

<input @keyup.page-down="onPageDown">複製代碼

處理函數僅在 $event.key === 'PageDown' 時被調用

系統修飾鍵

.ctrl
.alt
.shift
.meta複製代碼

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>


.exact 修飾符容許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即便 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>

.left
.right
.middle複製代碼

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。