vue.js 其餘指令

時間 2019-11-10

原文原文鏈接

1.ref標識

經過給元素標籤設定ref屬性，根據他的屬性值來訪問這個元素
語法：this.$refs.屬性值css

//爲p標籤設置ref屬性
<div id="app">
    <p ref="p1">期待你腳踏祥雲</p>
    <button @click="test">點我</button>
</div>

//根據ref屬性值來訪問這個元素
methods: {
    test() {
        console.log(this.$refs.p1.innerText)
    }
}

2.v-cloak

vue會將模版中的變量名渲染成對應的值，可是若是vue的模版渲染未執行時，{{msg}}這種語法就會直接在頁面輸出{{msg}},例如html

<body>
    <div id="app">
        <p>{{msg}}</p>        
    </div>
</body>
</html>
<script src="vue2.6.10.js"></script>
<script>
    alert('彈窗中斷vue渲染')
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"今天週末"
        }
    })
</script>

由於兩個script標籤都在body標籤以後，在解析body裏面的{{msg}}時將看成普通字符串來處理，就會在頁面中展現{{msg}}。
以後script裏面的代碼將{{msg}}替換成對應的值（今天週末），兩次渲染之間存在時間間隔，會有閃現的現象。若是在vue實例化以前加入alert彈窗中斷，就能夠明顯的看到這個變化了。vue

解決辦法一：將引入vue的script標籤放在body標籤的前面，例如：app

<head>
    <meta charset="UTF-8">
    <script src="vue2.6.10.js"></script>
    <title>Vue測試</title>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>        
    </div>
</body>

解決辦法二：爲標籤設置v-cloak屬性
原理：vue對模版進行解析以前，vue的指令是存在標籤裏面的，例如v-html/v-cloak等。當vue對模版渲染完畢後會移除元素標籤內vue指令，能夠利用這個特性，結合css的屬性選擇器來隱藏未解析的標籤函數

//css屬性選擇器
<style>
    [v-cloak]{
        display: none;
    }
</style>

//爲元素添加v-cloak屬性，當元素未渲染時處於隱藏狀態，渲染完畢後就正常展現
<div id="app">
    <p v-cloak>{{msg}}</p>        
</div>

3.自定義指令

(1)全局註冊
語法：Vue.directive(指令名稱,回調函數)
回調函數有2個參數 el和binding
el:指令所綁定的元素，能夠用來直接操做 DOM
binding：包含指令相關信息的對象,binding.value就是指令綁定的值測試

Vue.directive('upper-text',function(el,binding){
    el.innerText = binding.value.toUpperCase();
})

(2)局部註冊：只能在該組件中使用
組件中接受一個 directives 的選項this

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

而後你能夠在模板中任何元素上使用新的 v-focus 屬性，以下：code

<!-- 自動獲取焦點 -->
<input type="text" v-focus>

(3)若是註冊的自定義指令名含有 - 等字符，能夠用 '' 包裹起來htm

directives:{
    'lower-text':function(el,binding){
        el.innerText = binding.value.toLowerCase();
    }
}

(4)鉤子函數
bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。
inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。
update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。對象

Vue.directive('focus', {
    // 當被綁定的元素插入到 DOM 中時……
    inserted: function (el) {
        // 聚焦元素
        el.focus()
    }
})

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。