vue全局自定义指令

77不吃香菜.

于 2024-06-13 09:11:06 发布

阅读量149

点赞数 3

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/luna_H/article/details/139641745

版权

全局自定义指令
Vue.directive()
过滤器
1.两种写法：Vue.filter("名称",函数(接收前一个的值))
new Vue({filters:{函数名(接收前一个的值){}}})
2.过滤后产生新的数据值，多个过滤器串联，
3.使用时|过滤名过滤名后面可加可不加()

beforeCreate初始化之前
取不到data和methods中的数据

mounted解析后|挂载后
1.定时器，绑定自定义事件，发送请求，订阅消息

生命周期
1.是回调函数，钩子函数
2.生命周期名称不可以更改
3.this指向vue实例化对象

 <!DOCTYPE html> 
 <html lang="en"> 
 <head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <title>Document</title> 
 </head> 
 <body> 
 <div id="app"> 
 <h1>我是测试文字</h1> 
 <h1 v-show="a">我是测试文字11111111</h1> 
 <h1>{{texts}}</h1> 
 <h1>{{times}}</h1> 
 <h1>{{times|newDates()}}</h1> 
 <h1>{{times|newDates()|mySlice}}</h1> 
 <h2>{{time}}</h2> 
 
  </div> 
 </body> 
 <script src="../vue.js"></script> 
 <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script> 
 <script> 
 Vue.config.productionTip = false; 
 // 全局自定义指令 
 // Vue.directive() 
 // 过滤器 
 // 1.两种写法：Vue.filter("名称",函数(接收前一个的值)) 
 // new Vue({filters:{函数名(接收前一个的值){}}}) 
 // 2.过滤后产生新的数据值，多个过滤器串联， 
 // 3.使用时|过滤名 过滤名后面可加可不加() 
 // 全局过滤器 
 Vue.filter("mySlice",function(value){ 
 // console.log(value); 
 // return value.slice(0,11); 
 // return value.substring(0,11); 
 return value.substr(0,11); 
 
  }) 
 var vm = new Vue({ 
 el:"#app", 
 data() { 
 return { 
 times:Date.now(), 
 time:new Date(), 
 a:true, 
 texts:"11111" 
 } 
 }, 
 methods: { 
 sum(){ 
 return 99; 
 } 
 }, 
 // beforeCreate初始化之前 
 // 取不到data和methods中的数据 
 beforeCreate() { 
 console.log("beforeCreate触发的生命周期"); 
 console.log(this.time); 
 // console.log(this.sum()); 
 }, 
 // created初始化之后 
 // 可以取到data和methods中的数据 
 created() { 
 console.log("created触发的生命周期"); 
 console.log(this.time); 
 console.log(this.sum()); 
 }, 
 // beforeMount解析前|挂载前 
 beforeMount() { 
 this.a = false; 
 this.texts = 222222222; 
 }, 
 // mounted解析后|挂载后 
 // 1.定时器，绑定自定义事件，发送请求，订阅消息 
 mounted() { 
 this.texts = 3333333333; 
 }, 
 // 生命周期 
 // 1.是回调函数，钩子函数 
 // 2.生命周期名称不可以更改 
 // 3.this指向vue实例化对象 
 // 局部过滤器 
 filters:{ 
 newDates(value,str="YYYY年MM月DD日 HH:mm:ss"){ 
 // return new Date(value); 
 // console.log(time); 
 // let times = time.toISOString(); 
 // console.log(times); 
 return dayjs(value).format(str); 
 // console.log(value); 
 // 年 
 // let values = value-13*24*60*60*1000; 
 // let a = values/1000/60/60/24/365; 
 // let a1 = parseInt(a);

局部过滤器

77不吃香菜.

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue全局自定义指令

1.两种写法：Vue.filter("名称",函数(接收前一个的值))new Vue({filters:{函数名(接收前一个的值){}}})1.定时器，绑定自定义事件，发送请求，订阅消息。2.过滤后产生新的数据值，多个过滤器串联，3.使用时|过滤名过滤名后面可加可不加()取不到data和methods中的数据。beforeCreate初始化之前。3.this指向vue实例化对象。mounted解析后|挂载后。2.生命周期名称不可以更改。1.是回调函数，钩子函数。
复制链接

扫一扫