Vue全局过滤器
Vue.filter('maySlice',function(value){
//全局过滤器
return value.slice(0,4)
})
自定义指令
定义一个v-big指令 和 v-text功能类似 但会把绑定的数值放大10倍
定义一个v-fbind指令和v-bind功能类似 但可以让其说绑定的input元素默认获取焦点
(1)局部指令
new Vue({ new Vue({
directives:{指令名：配置对象} 或 directives:{指令名：回调函数}
}) })
2.配置中常用的3个回调
(1) bind指令与元素成功绑定时调用
(2)inserted指令所在元素被插入页面时调用
(3)update指令所在模板结构被重新解析时调用
3.备注
1.指令定义时如果不加 v- 但使用时要加 v-
2.指令名如果是多个单词 要使用kebab-case命名方式 不要使用camelCase命名
<div id="root">
<h2>当前的值是 <span v-text="n"></span></h2>
<h2>放大10倍后的n的值是 <span v-big="n"></span></h2>
<button @click="n++">点我加1</button>
<hr/>
<input type="text" v-fbind:value="n">
</div>
new Vue({
el:"#root",
data:{
n:1
},
directives:{ //自定义指令
//big函数什么时候会被调用 1.指令与元素成功绑定时
big(element,binding){ // element,binding固定参数
element.innerText = binding.value*10
},
fbind:{ //里面this指向window //指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}} }})
全局自定义指令
Vue.directives:{指令名：配置对象}
或 Vue.directives:{指令名：回调函数}
Vue.directives('fbind',{ //定义全局指令 //里面this指向window
//指令与元素成功绑定时(一上来)
bind(element,binding){
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element,binding){
element.focus()
},
//指令所在的模板被重新解析时
update(element,binding){
element.value = binding.value
}
})
