vue - 過濾器-鉤子函式路由
阿新 • • 發佈：2018-12-05
一.關於路由
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 <使用vue-routerscript 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>例項
.生命週期的鉤子函式