Vue.js自定义指令

1.自定义局部指令

实例

<div class="tests">
   	<p>自定义局部指令示例，当页面载入时，input元素会自动获得焦点：</p>
    <input v-gocus>
</div>

<script>
export default {
  name: 'page5',
  //注册一个局部之定义指令
  directives: {
    gocus:{
      inserted: function(el){
        el.focus();
      }
    }
  },
  data () {
    return {
     
    }
  },
}
</script>

2.自定义全局指令

实例

<div class="tests">
    <p>自定义全局指令示例，当页面载入时，input元素会自动获得焦点：</p>
    <input v-focus>
</div>

<script>
Vue.directive('focus',{
  //当绑定元素插入到DOM中
  inserted:function(el){
    el.focus();
  }
})
export default {
  name: 'page5',
  data () {
    return {
     
    }
  },
}
</script>