vue - 过滤器-钩子函数路由
Posted zhangqing979797
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue - 过滤器-钩子函数路由相关的知识，希望对你有一定的参考价值。
一.关于路由
1.使用vue router
本质上是声明一种可以通过路径进行 挂子,用子 找到对应的 template 进行页面渲染
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 10 </div> 11 <script src="vue.js"></script> 12 <script src="vue-router.js"></script> 13 <script> 14 //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter 15 // Vue.use(VueRouter) 16 17 const Home = { 18 data(){ 19 return{} 20 }, 21 template:`<div>我是首页</div>` 22 }; 23 24 const Course = { 25 data(){ 26 return{} 27 }, 28 template:`<div>我是免费课程</div>` 29 }; 30 31 //路由创建 32 const router = new VueRouter({ 33 //定义路由规则 34 mode:"history", 35 routes:[ 36 { 37 path:"/", 38 redirect:"/home" 39 }, 40 { 41 path:"/home", 42 component:Home 43 }, 44 { 45 path:"/course", 46 component:Course 47 } 48 ] 49 }); 50 51 let App = { 52 data(){ 53 return { 54 55 } 56 }, 57 // router-link和router-view是vue-router提供的两个全局组件 58 //router-view 是路由组件的出口 59 template:` 60 <div> 61 <div class="header"> 62 <router-link to="/home">首页</router-link> 63 <router-link to="/course">免费课程</router-link> 64 </div> 65 <router-view></router-view> 66 </div> 67 68 ` 69 }; 70 71 new Vue({ 72 el:"#app", 73 //挂载 路由对象 74 router, 75 data(){ 76 return { 77 78 } 79 }, 80 template:`<App />`, 81 components:{ 82 App 83 } 84 }) 85 86 </script> 87 </body> 88 </html>
2.路由命名
由于router-link 相当于a 标签 ,在使用的时候 to="/path" 相当于href 一个路径
路由命名就是提前声明 挂子时候的一个别名 通过别名来找到用子 的 componrnts to="{name:设置的别名字符串}"
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 10 </div> 11 <script src="vue.js"></script> 12 <script src="vue-router.js"></script> 13 <script> 14 //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter 15 // Vue.use(VueRouter) 16 17 const Home = { 18 data(){ 19 return{} 20 }, 21 template:`<div>我是首页</div>` 22 }; 23 24 const Course = { 25 data(){ 26 return{} 27 }, 28 template:`<div>我是免费课程</div>` 29 }; 30 31 //路由创建 32 const router = new VueRouter({ 33 //定义路由规则 34 mode:"history", 35 routes:[ 36 { 37 path:"/", 38 redirect:"/home" 39 }, 40 { 41 path:"/home", 42 name:"Home", 43 component:Home 44 }, 45 { 46 path:"/course", 47 name:"Course", 48 component:Course 49 } 50 ] 51 }); 52 53 let App = { 54 data(){ 55 return { 56 57 } 58 }, 59 // router-link和router-view是vue-router提供的两个全局组件 60 //router-view 是路由组件的出口 61 template:` 62 <div> 63 <div class="header"> 64 <router-link :to=‘{name:"Home"}‘>首页</router-link> 65 <router-link :to=‘{name:"Course"}‘>免费课程</router-link> 66 </div> 67 <router-view></router-view> 68 </div> 69 70 ` 71 }; 72 73 new Vue({ 74 el:"#app", 75 //挂载 路由对象 76 router, 77 data(){ 78 return { 79 80 } 81 }, 82 template:`<App />`, 83 components:{ 84 App 85 } 86 }) 87 88 </script> 89 </body> 90 </html>
3.动态路由分配
$route 路由信息对象
$router 路由对象 VueRouter
本质上通过对定义路由规则的放法来动他匹配 path:‘/user/:id‘
route-link : to="{name:设置的别名字符,params:{id:1}} "利用params 方法的属性来随意分配
需要watch监听
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 10 </div> 11 <script src="vue.js"></script> 12 <script src="vue-router.js"></script> 13 <script> 14 //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter 15 // Vue.use(VueRouter) 16 17 const User = { 18 data(){ 19 return{ 20 user_id:null 21 } 22 }, 23 template:`<div>我是用户{{ user_id }}</div>`, 24 created(){ 25 console.log(this.$route)//路由信息对象 26 //提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 27 28 }, 29 watch:{ 30 "$route"(to,from){ 31 //对路由变化做出响应 32 console.log(to); 33 console.log(from); 34 this.user_id = to.params.id 35 //发送ajax 36 } 37 } 38 }; 39 40 41 42 //路由创建 43 const router = new VueRouter({ 44 //定义路由规则 45 mode:"history", 46 routes:[ 47 48 { 49 path:"/user/:id", 50 name:"User", 51 component:User 52 }, 53 54 ] 55 }); 56 57 let App = { 58 data(){ 59 return { 60 61 } 62 }, 63 // router-link和router-view是vue-router提供的两个全局组件 64 //router-view 是路由组件的出口 65 template:` 66 <div> 67 <div class="header"> 68 <router-link :to=‘{name:"User",params:{id:1}}‘>用户1</router-link> 69 <router-link :to=‘{name:"User",params:{id:2}}‘>用户2</router-link> 70 </div> 71 <router-view></router-view> 72 </div> 73 74 ` 75 }; 76 77 new Vue({ 78 el:"#app", 79 //挂载 路由对象 80 router, 81 data(){ 82 return { 83 84 } 85 }, 86 template:`<App />`, 87 components:{ 88 App 89 } 90 }) 91 92 </script> 93 </body> 94 </html>
4.编程式导航 声明式导航
本质上通过 一个点击事件声明一个方法跳转到path路由中
this.$router.push({
name:"home"
})
声明式
<router-link :to = ‘{name:"Home"}‘>首页</router-link>
<router-link :to = ‘{name:"Course"}‘>免费课程</router-link>
编程式
this.$router.push({
name:‘Home‘
})
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 10 </div> 11 <script src="vue.js"></script> 12 <script src="vue-router.js"></script> 13 <script> 14 //如果以后是模块化编程，Vue.proptotype.$VueRouter = VueRouter 15 // Vue.use(VueRouter) 16 17 const Home = { 18 data(){ 19 return {} 20 }, 21 template:`<div>我是首页</div>` 22 }; 23 24 const User = { 25 data(){ 26 return{ 27 user_id:null 28 } 29 }, 30 template:`<div>我是用户{{ user_id }} 31 <button @click="clickHandler">跳转首页</button> 32 </div>`, 33 created(){ 34 console.log(this.$route)//路由信息对象 35 //提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。 36 37 }, 38 methods:{ 39 //编程式导航 40 clickHandler(){ 41 this.$router.push({ 42 name:"Home" 43 }) 44 } 45 }, 46 watch:{ 47 "$route"(to,from){ 48 //对路由变化做出响应 49 console.log(to); 50 console.log(from); 51 this.user_id = to.params.id 52 //发送ajax 53 } 54 } 55 }; 56 57 58 59 //路由创建 60 const router = new VueRouter({ 61 //定义路由规则 62 mode:"history", 63 routes:[ 64 65 { 66 path:"/user/:id", 67 name:"User", 68 component:User 69 }, 70 { 71 path:"/home", 72 name:"Home", 73 component:Home 74 } 75 76 ] 77 }); 78 79 let App = { 80 data(){ 81 return { 82 83 } 84 }, 85 // router-link和router-view是vue-router提供的两个全局组件 86 //router-view 是路由组件的出口 87 template:` 88 <div> 89 <div class="header"> 90 <router-link :to=‘{name:"User",params:{id:1}}‘>用户1</router-link> 91 <router-link :to=‘{name:"User",params:{id:2}}‘>用户2</router-link> 92 </div> 93 <router-view></router-view> 94 </div> 95 96 ` 97 }; 98 99 new Vue({ 100 el:"#app", 101 //挂载 路由对象 102 router, 103 data(){ 104 return { 105 106 } 107 }, 108 template:`<App />`, 109 components:{ 110 App 111 } 112 }) 113 114 </script> 115 </body> 116 </html>
二.过滤器
1.局部过滤器 在当前组件内部使用过滤器，修饰一些数据
//声明
filters:{
‘过滤器的名字‘:function(val,a,b){
//a 就是alax ，val就是当前的数据
}
}
//使用 管道符
数据 | 过滤器的名字(‘alex‘，‘wusir‘)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <App /> 11 </div> 12 <script src="vue.js"></script> 13 <script src="moment.js"></script> 14 <script> 15 16 let App = { 17 data(){ 18 return { 19 msg:"hello world", 20 time:new Date() 21 } 22 }, 23 template:` 24 <div>我是一个APP{{ msg | myReverse }} 25 <h2>{{ time | myTime("YYYY-MM-DD") }}</h2> 26 </div> 27 28 29 `, 30 filters:{ 31 myReverse:function (val) { 32 return val.split("").reverse().join("") 33 }, 34 myTime:function (val,formatStr) { 35 return moment(val).format(formatStr) 36 } 37 } 38 }; 39 40 new Vue({ 41 el:"#app", 42 data(){ 43 return { 44 45 } 46 }, 47 components:{ 48 App 49 } 50 }) 51 52 </script> 53 </body> 54 </html>
2.全局过滤器 ： 只要过滤器一创建，在任何组件中都能使用
Vue.filter(‘过滤器的名字‘，function(val,a,b){})
在各个组件中都能使用
数据 | 过滤器的名字(‘alex‘，‘wusir‘)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <App /> 11 </div> 12 <script src="vue.js"></script> 13 <script src="moment.js"></script> 14 <script> 15 16 Vue.filter("myTime",function (val,formatStr) { 17 return moment(val).format(formatStr) 18 }); 19 20 let App = { 21 data(){ 22 return { 23 msg:"hello world", 24 time:new Date() 25 } 26 }, 27 template:` 28 <div>我是一个APP{{ msg | myReverse }} 29 <h2>{{ time | myTime("YYYY-MM-DD") }}</h2> 30 </div> 31 32 33 `, 34 filters:{ 35 myReverse:function (val) { 36 return val.split("").reverse().join("") 37 }, 38 // myTime:function (val,formatStr) { 39 // return moment(val).format(formatStr) 40 // } 41 } 42 }; 43 44 new Vue({ 45 el:"#app", 46 data(){ 47 return { 48 49 } 50 }, 51 components:{ 52 App 53 } 54 }) 55 56 </script> 57 </body> 58 </html>
三
1.
1 `从生到死` 2 3 diff算法 4 5 - [beforeCreate](https://cn.vuejs.org/v2/api/#beforeCreate) 6 7 - [created](https://cn.vuejs.org/v2/api/#created) 组件创建 *** 8 9 - 虚拟DOM React 10 - 发送ajax 获取数据 实现数据驱动视图 11 12 - [beforeMount](https://cn.vuejs.org/v2/api/#beforeMount) 13 14 - [mounted](https://cn.vuejs.org/v2/api/#mounted) *** 15 16 - 获取真实DOM 17 18 - [beforeUpdate](https://cn.vuejs.org/v2/api/#beforeUpdate) 19 20 - [updated](https://cn.vuejs.org/v2/api/#updated) 21 22 - [activated](https://cn.vuejs.org/v2/api/#activated) 23 24 - 激活当前组件 25 26 - [deactivated](https://cn.vuejs.org/v2/api/#deactivated) 27 28 - keep-alive Vue提供的内置组件，主要作用，让组件产生缓存 29 - 停用当前组件 30 31 - [beforeDestroy](https://cn.vuejs.org/v2/api/#beforeDestroy) 32 33 - destroyed 34 35 - 如果开了定时器，一定要关闭定时器
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <App/> 10 </div> 11 <script src="vue.js"></script> 12 <script> 13 14 let Test = { 15 data() { 16 return { 17 msg: "alex", 18 count: 0, 19 timer: null 20 } 21 }, 22 template: ` 23 <div> 24 <div id="box">{{ msg }}</div> 25 <p>{{ count }}</p> 26 <button @click="change">修改</button> 27 </div> 28 29 `, 30 methods:{ 31 change(){ 32 this.msg = "wusir"; 33 document.querySelector("#box").style.color="red" 34 } 35 }, 36 beforeCreate() { 37 38 // 组件创建之前 39 console.log(‘组件创建之前‘, this.msg); 40 41 }, 42 created() { 43 // ********最重要 44 // 组件创建之后 45 this.timer = setInterval(()=>{ 46 this.count++ 47 },1000); 48 49 // 使用该组件，就会触发以上的钩子函数， 50 // created中可以操作数据，发送ajax，并且可以实现数据驱动视图 51 // 应用：发送ajax请求 52 53 console.log(‘组件创建之后‘, this.msg); 54 55 // this.msg = ‘嘿嘿黑‘; 56 57 }, 58 beforeMount() { 59 60 // 装载数据到DOM之前会调用 61 62 console.log(document.getElementById(‘app‘)); 63 64 65 }, 66 mounted() { 67 // *******很重要***** 68 69 // 这个地方可以操作DOM 70 71 // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM 72 73 console.log(document.getElementById(‘app‘)); 74 //jsDOM操作 75 76 }, 77 // beforeUpdate() { 78 // 79 // // 在更新之前，调用此钩子，应用：获取原始的DOM 80 // 81 // console.log(document.getElementById(‘app‘).innerHTML); 82 // 83 // }, 84 // updated() { 85 // 86 // // 在更新之后，调用此钩子，应用：获取最新的DOM 87 // 88 // console.log(document.getElementById(‘app‘).innerHTML); 89 // 90 // }, 91 beforeDestroy() { 92 93 console.log(‘beforeDestroy‘); 94 95 }, 96 destroyed() { 97 //注意： 定时器的销毁 要在此方法中处理 98 console.log(‘destroyed‘,this.timer); 99 clearInterval(this.timer); 100 101 }, 102 activated(){ 103 104 console.log(‘组件被激活了‘); 105 106 }, 107 108 deactivated(){ 109 110 console.log(‘组件被停用了‘); 111 112 } 113 }; 114 115 let App = { 116 data() { 117 return { 118 isShow: true 119 } 120 }, 121 template: ` 122 <div> 123 <keep-alive> 124 <Test v-if="isShow" /> 125 </keep-alive> 126 <button @click="clickHandler">改变test组件的生死</button> 127 </div> 128 `, 129 methods: { 130 clickHandler() { 131 this.isShow = !this.isShow; 132 } 133 }, 134 components:{ 135 Test 136 } 137 }; 138 139 new Vue({ 140 el: ‘#app‘, 141 data() { 142 return {} 143 }, 144 components: { 145 App 146 } 147 }) 148 </script> 149 </body> 150 </html>
.生命周期的钩子函数
以上是关于vue - 过滤器-钩子函数路由的主要内容，如果未能解决你的问题，请参考以下文章