vue拦截器组件的使用方式
更新时间：2025年04月10日 08:56:38 作者：鸵鸟七号~~
这篇文章主要介绍了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>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue 项目中使用websocket的实例代码，通过实例代码给大家介绍了在utils下新建websocket.js文件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
vue-router 2.0 跳转之router.push()用法说明
这篇文章主要介绍了vue-router 2.0 跳转之router.push()用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了vue+nodejs获取多个表数据的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了vue如何实现清空this.$route.query的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vue的watch选项提供了多种方法来观测数据属性的变化,让我们能够编写更加优雅和维护性更高的代码,本文给大家介绍Vue中watch的多种使用方法小结,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家详细介绍了vue如何在项目中使用echarts实现三维图表的绘制,文中的示例代码讲解详细,感兴趣的小伙伴可以参考一下2023-08-08
vue中el-table两个表尾合计行联动同步滚动条实例代码
项目开发中遇到一个比较两个form差异的需求,但当item过多就需要滚动条,下面这篇文章主要给大家介绍了关于vue中el-table两个表尾合计行联动同步滚动条的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要介绍了Vue+elementUI实现动态展示列表的数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
这篇文章主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue项目history模式下部署子路由跳转失败的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
最新评论