vue拦截器组件的使用方式
作者：鸵鸟七号~~
这篇文章主要介绍了vue拦截器组件的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue拦截器组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<input type="text" v-model="msg"/><br/>
{{msg | upper}} <br/>
{{msg | upper | lower}} <br/>
{{msg | test}} <br/>
<!-- 带参的过滤器的使用 -->
{{data | formate("yyyy-MM-dd hh:mm:ss")}}
</div>
<script type="text/javascript">
// 自定义过滤器
// <!-- 首字母改为大写 -->
// 过滤器的名字 value 过滤的数据
Vue.filter('upper',(value) => {
// charAt返回指定位置的字符 toUpperCase() 转化为大写 slice(1)从第二位截取
return value.charAt(0).toUpperCase()+value.slice(1);
})
// 首字母改为小写
// 过滤器的名字 value 过滤的数据
Vue.filter('lower',(value) => {
// charAt返回指定位置的字符 toLowerCase() 转化为小写 slice(1)从第二位截取
return value.charAt(0).toLowerCase()+value.slice(1);
})
//带参数的过滤器 value就是data arg1就是过滤器的参数
Vue.filter('formate',function(value,arg1){
if(arg1=='yyyy-MM-dd hh:mm:ss'){
var times = "";
times+=value.getFullYear()+"-"+(value.getMonth() + 1)+"-"+value.getDate()+" "+value.getHours()+":"+value.getMinutes()+":"+value.getSeconds();
return times;
}
return value;
})
new Vue({
el:"#app",
data:{
msg:"",
data:new Date()
},
// 局部过滤器
filters:{
test:function(vaval){
return vaval.charAt(0).toUpperCase()+vaval.slice(1);
}
}
})
</script>
</body>
</html>组件的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组件化思想</title>
</head>
<body>
<script src="js/vue.js" type="text/javascript"></script>
<div id="app">
<button-con></button-con>
<button-con></button-con>
<button-con></button-con>
</div>
<script type="text/javascript">
// 全局组件注册 注册了一个名为button-con的新组件
Vue.component('button-con',{
// data必须是一个函数
data:function(){
return{
count:0
}
},
// 组件模板内容必须是单个跟元素 组件模板内容可以是模板字符串
template:'<button v-on:click="count++">点击了{{count}}次</button>'
})
new Vue({
el:"#app",
data:{
}
})
</script>
</body>
</html>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。