目录
第一部分：过滤器（全局及局部）
第二部分：自定义指令（全局及局部）
第一部分：过滤器（全局及局部）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">
<p>原数据:{ {num}}</p>
<!-- 第一个数据是原数据 也可以写别的新数据 第二个是判断过滤后的结果 第三个是全局过滤器截取前四位，可以同时实现两种效果-->
<h2>{ {num | toLowerCase(1) | myslice}}</h2>
</div>
<script type="text/javascript">
// 全局过滤器 这里的filter不加s 局部要加 内部第一个是过滤数据名 第二个是回调函数 内部是截取字符串 前四位
Vue.filter('myslice',function(value){
return value.slice(0,4)
})
new Vue({
el:'#root',
data() {
return{
num:'abCDEfgjs',
}
},
// 局部过滤器
filters:{
// 过滤器 第一个是函数名(自定义命名) 后面跟的是函数内部有两个形参，第一个是固定参数，第二个是根据你的需求
//传入(判断)
toLowerCase:function(value,styles){
if(styles==1){
// 将字母转化为大写
return value.toUpperCase()
}else{
// 将字母转化为小写
return value.toLowerCase()
}
}
}
})
</script>
</body>
</html>
第二部分：自定义指令（全局及局部）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>原数据：{ {num}}</h2>
<p>扩大:<span v-big="num"></span></p>
<input type="text" v-myfocusto="num">
<button @click="num++">+1</button>
</div>
<script type="text/javascript">
// 注 element绑定的是原数据 binding绑定的是会被更改的数据值
// 全局自定义指令
Vue.directive('myfocusto',{
//一上来就绑定的时候
big(element,binding){
element.value=binding.value*10;//绑定num的值时
element.focus();//聚焦
},
// 当元素插入页面的时候调用
inserted(element,binding){
element.focus()
},
//更新的时候 数据在发生变化的时候
update(element,binding){
element.value=binding.value*10 //绑定的值
}
})
// 局部自定义指令
new Vue({
el:'#root',
data() {
return{
num:0
}
},
directives:{
//更新时与绑定时调用 第一个参数指：原数据 第二个是绑定的数据
big(element,binding){
element.innerText = binding.value*10//绑定num的值
},
myfocus:{
//一上来就绑定的时候
big(element,binding){
element.value=binding.value*10;//绑定num的值时
element.focus();//聚焦
},
// 当元素插入页面的时候调用
inserted(element,binding){
element.focus()
},
//更新的时候 数据在发生变化的时候
update(element,binding){
element.value=binding.value*10 //绑定的值
}
}
}
})
</script>
</body>
</html>