VueJS自定義全局和局部指令


除了默認設置的核心指令( v-model 和 v-show ), Vue 也允許注冊自定義指令。

使用directive自定義全局指令

下面我們注冊一個全局指令 v-focus, 該指令的功能是在頁面加載時,元素獲得焦點:

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>頁面載入時,input 元素自動獲取焦點:</p>
    <input v-focus>
</div>

<script>
// 注冊一個全局自定義指令 v-focus
Vue.directive('focus', {
  // 當綁定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 創建根實例
new Vue({
  el: '#app'
})
</script>
</body>
</html>

效果:輸入框獲取到焦點。

使用 directives自定義局部指令

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>頁面載入時,input 元素自動獲取焦點:</p>
  <input v-focus>
</div>

<script>
// 創建根實例
new Vue({
  el: '#app',
  directives: {
    // 注冊一個局部的自定義指令 v-focus
    focus: {
      // 指令的定義
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>
</body>
</html>

效果同上。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM