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>

使用vue-router

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 `从生到死`
 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 - 过滤器-钩子函数路由

猜你喜欢