vue自定义指令
自定义指令：
Vue自定义指令和组件一样存在着全局注册和局部注册两种方式。
全局指令
先来看看「注册全局指令」的方式，通过 Vue.directive( id, [definition] ) 方式注册全局指令，第一个参数为自定义指令名称（「指令名称不需要加 v- 前缀，默认是自动加上前缀的，使用指令的时候一定要加上前缀」），第二个参数可以是对象数据，也可以是一个指令函数
<body>
<div id="app">
<input type="text" v-focus>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
inserted: function(el) {
//el表示指令所绑定的元素，下面是他绑定的事件
el.focus();
}
})
</script>
- 自定义指令传参
<body>
<div id="app">
<input type="text" v-color="msg">
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
Vue.directive('focus', {
bind: function(el, binding) {
//根据指令的参数设置背景颜色
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el:'#app',
data:{
msg:{
color:'orange'
}
}
})
小结：以上都是全局指令，还有局部指令
局部指令
- 注册局部自定义指令，通过在「Vue实例中添加」
directives对象数据注册局部自定义指令。
<div id="app" class="demo">
<!-- 局部注册 -->
<input type="text" placeholder="我是局部自定义指令" v-focus2>
</div>
<div id="app1" class="demo">
<!-- 局部注册 -->
<input type="text" placeholder="我是局部自定义指令1" v-focus2>
</div>
<script>
new Vue({
el: "#app",
directives: {
focus2: {
inserted: function(el){
el.focus();
}
}
}
})
</script>
小结：局部指令只作用于他定义的那个vue 实例，上例中，APP1中的input就不会获取焦点，因为该指令创建于app这个实例中，只能在app这个实例中使用
总结：局部指令和全局指令的区别不仅仅是作用范围的区别，在加载阶段页略有不同，全局指令和全局组件一样，根实例创建时就加载，局部是对于懒加载的组件可以随组件一起加载
表单修饰符
- v-model.number 把值转换为数子
<input type="text" v-model.number='age'>
//这里的age是number类型。默认是string
- v-model.trim 把行首尾空格删除
<input type="text" v-model.trim='age'>
//age里的行首行尾空格会被默认去掉，一般用于表单验证
- v-model.lazy把input事件切换为change
<input type="text" v-model.lazy='age'>
小结：默认input的值得变化会实时更新，改成lazy后，会等到input失去焦点才更新
