vue-cli脚手架 ,过滤器,生命周期钩子函数

一.安装vue-cli脚手架

1.淘宝镜像下载

用淘宝的国内服务器来向国外的服务器请求,我们向淘宝请求,而不是由我们直接向国外的服务器请求,会大大提升请求速度,使用时,将所有的npm命令换成cnpm即可

2.vue-cli的下载

安装文档:https://cli.vuejs.org/zh/guide/cli-service.html#%E4%BD%BF%E7%94%A8%E5%91%BD%E4%BB%A4

二.过滤器

1.局部过滤器:在当前组件内使用

 1 <body>
 2 <div id="app"></div>
 3 <script src="vue.js"></script>
 4 <script>
 5 let App={
 6     data(){return{data:"hello"}},
 7     //使用语法
 8     template:`<div>我是一个app {{ data | reverse }}</div>`,
 9     //创建语法
10     filters:{
11         reverse:function(val){
12             return val.split('').reverse().join("")
13         }
14     }
15 }
16 
17 new Vue({
18     el:"#app",
19     data(){
20         return{}
21     },
22     template:`<div class="vue"><App></App></div>`,
23     components:{
24         App
25     }
26 })
27 </script>
28 </body>

2.全局过滤器:任何组件都能使用

<body>
<div id="app"></div>
<script src="vue.js"></script>
<script src="day03/moment.js"></script>
<script>
//创建语法
Vue.filter("showTime",function(val,style,a){
return moment(val).format(style)
})
new Vue({
el:"#app",
data(){
return{time:new Date()}
},
//使用语法
template:`<div>现在的时间是:{{ time | showTime("YYYY-MM-DD",1) }}</div>`,
})
</script>
</body>

注:参数的个数没有限制

3.moment.js

JavaScript 日期处理类库

使用文档:http://momentjs.cn/

三.生命周期的钩子函数

 1 <body>
 2 <div id="app"></div>
 3 
 4 <script src="vue.js"></script>
 5 <script>
 6     let Test={
 7         data(){
 8             return {msg:"shy"}
 9         },
10         template:`<div id="change">我叫{{ msg }}<button @click="change">更新</button></div>`,
11         methods:{
12             change(){
13                 this.msg="dsz"
14             }
15         },
16         beforeCreate() {
17             // 组件创建之前
18             console.log('组件创建之前', this.msg);
19         },
20         created() {
21             //!!!!!!!!!!!!!!!!!!!!!!
22             // 组件创建之后,此时的DOM还没有渲染完成
23             //作用:可用来发送ajax,获取ajax数据,为DOM操作提供数据支撑
24             console.log('组件创建之后', this.msg);
25         },
26 
27         beforeMount() {
28             // 挂载之前:
29             console.log(document.getElementById('app'));
30         },
31         mounted() {
32             //!!!!!!!!!!!!!!!!!!!!!!
33            //挂载之后:Test挂载在App上,App挂载在Vue上
34             //作用:可以在此处操作DOM,
35             console.log(document.getElementById('app'));
36         },
37 
38         beforeUpdate() {
39             // 在更新之前，调用此钩子，应用：获取原始的DOM
40             console.log(document.getElementById('change').innerHTML);
41 
42         },
43         updated() {
44             // 在更新之后，调用此钩子，应用：获取最新的DOM
45             console.log(document.getElementById('change').innerHTML);
46         },
47 
48         beforeDestroy() {
49             //在组件销毁之前
50             console.log('beforeDestroy');
51         },
52         destroyed() {
53             //在组件销毁之后
54             //作用:常用于清除定时器
55             console.log('destroyed',this.timer);
56         },
57 
58         activated(){
59             console.log('组件被激活了');
60         },
61         deactivated(){
62             console.log('组件被停用了');
63         }
64     };
65     let App={
66         data(){
67             return{is_show:true}
68         },
69         template:  `<div><keep-alive><Test v-if="is_show"></Test></keep-alive><button @click="change_test">改变test组件的生死</button></div>`,
70         methods:{
71             change_test(){
72                 this.is_show=!this.is_show
73             }
74         },
75         components:{
76             Test
77         }
78     };
79     new Vue({
80         el:"#app",
81         data(){
82             return{}
83         },
84         template:  `<div><App></App></div>`,
85         components:{
86             App
87         }
88 
89     })
90 </script>
91 </body>

注:keep-alive

Vue提供的内置组件

主要作用:让组件产生缓存

注:获取DOM的救命稻草

document.querySelector("#app")

四.Vue全家桶:vue,vue-router,vuex

vue-router是vue的核心插件

vue+vue-router 主要来做 SPA（Single Page Application）单页面应用

为什么要使用单页面应用:

传统的路由跳转，如果后端资源过多，会导致页面出现白屏现象，让前端来做路由，在某个生命周期的钩子函数中发送ajax，数据驱动。为了用户体验

注:掘金,开发者资源网站

1.vue-router下载

下载地址:https://unpkg.com/vue-router/dist/vue-router.js

注:vue-router插件依赖于vue

2.vue-router下载的基本使用

 1 <body>
 2 <div id="app">
 3     <p>
 4         <!--router-link和router-link是vue-router的两个全局组件-->
 5         <!--router-link相当于a标签 to相当于href-->
 6         <router-link to="/">首页</router-link>
 7         <router-link to="/course">课程</router-link>
 8     </p>
 9     <!--router-view是整个路由组件的出口-->
10     <router-view></router-view>
11 </div>
12 <script src="vue.js"></script>
13 <script src="vue-router.js"></script>
14 <script>
15     //0.如果是模块化编程,必须要加这句话,相当于Vue.proptotype.$VueRouter=VueRouter,给Vue的原型上挂载一个属性
16     // Vue.use()
17 
18     //3.定义路由组件
19     const Home={
20         template:`<div>我是主页内容</div>`
21     };
22     const Course={
23         template:`<div>我是课程内容</div>`
24     };
25 
26     //1.创建router实例
27     const router=new VueRouter({
28         //摆脱了哈希,它使用URL的哈希来模拟一个完整的URL
29         mode:'history',
30         routes:[
31             //2.定义路由规则
32             {
33               path:'/',
34                 //对访问地址重定向
35               redirect:'/home'
36             },
37             {
38                 path:'/home',
39                 component:Home
40             },
41             {
42                 path:"/course",
43                 component:Course
44             }
45         ]
46     });
47 
48     //4.创建并挂载router实例
49     const app=new Vue({
50         //key和value相同写一个
51         router
52     }).$mount("#app")
53 </script>
54 </body>

3.路由命名

(1)在routes中定义name

(2)在使用时对router-link的to属性绑定

 1 <body>
 2 <div id="app">
 3         <p>
 4             //(2)在使用时对router-link的to属性绑定
 5             <router-link :to='{name:"Home"}'>首页</router-link>
 6             <router-link :to="{name:'Course'}">课程</router-link>
 7         </p>
 8     <router-view></router-view>
 9 </div>
10 <script src="vue.js"></script>
11 <script src="vue-router.js"></script>
12 <script>
13 
14     const Home={
15         template:`<div>我是首页</div>`
16     };
17     
18     const Course={
19         template:`<div>我是课程</div>`,
20     };
21     
22     const router=new VueRouter({
23         routes:[
24             {
25                 //(1)在routes中定义name
26                 path:'/home',
27                 name:'Home',
28                 component:Home
29             },
30             {
31                 path:'/course',
32                 name:'Course',
33                 component:Course
34             }
35         ]
36     });
37     const app=new Vue({
38         router,
39     }).$mount("#app")
40 </script>
41 </body>

4.动态路由匹配

如果是动态路由用parmas

如果是get请求信息用query

 1 <body>
 2 <div id="app">
 3         <p>
 4             //使用时
 5             <router-link :to='{name:"Home",params:{id:1}}'>第一页</router-link>
 6             <router-link :to='{name:"Home",params:{id:2}}'>第二页</router-link>
 7         </p>
 8     <router-view></router-view>
 9 </div>
10 <script src="vue.js"></script>
11 <script src="vue-router.js"></script>
12 <script>
13 
14     const Home={
15         data(){
16             return{
17                 user_id:3
18             }
19         },
20         template:`<div>我是首页{{ user_id }}</div>`,
21         watch:{
22             //路由信息对象(到哪里去,从哪里来)
23             '$route'(to,from){
24                 console.log(111)
25                 console.log(to);
26                 this.user_id = to.params.id;
27             }
28         }
29     };
30 
31     const router=new VueRouter({
32         routes:[
33             {
34                 //定义时
35                 path:'/home/:id',
36                 name:'Home',
37                 component:Home
38             }
39         ]
40     });
41     const app=new Vue({
42         router,
43     }).$mount("#app")
44 </script>
45 </body>

5.编程式导航

编程式通过自己的逻辑,来实现复杂的业务声明式是通过框架自带的标签属性来完成业务前者需要自己写大量重复的事务控制代码，后者通过设置可以一次性给所有的业务方法添加上事务特性。

posted @ 2018-11-30 14:55 ★行者尚★ 阅读(259) 评论(0) 编辑收藏举报

刷新页面返回顶部

★行者尚★