vue補充

時間 2019-12-05

標籤 vue 補充简体版

原文原文鏈接

一.安裝vue-cli腳手架

1.淘寶鏡像下載

用淘寶的國內服務器來向國外的服務器請求,咱們向淘寶請求,而不是由咱們直接向國外的服務器請求,會大大提高請求速度,使用時,將全部的npm命令換成cnpm便可html

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.全局過濾器:任何組件都能使用

 1 <body>
 2 <div id="app"></div>
 3 <script src="vue.js"></script>
 4 <script src="day03/moment.js"></script>
 5 <script>
 6     //建立語法
 7     Vue.filter("showTime",function(val,style,a){
 8         return moment(val).format(style)
 9     })
10     new Vue({
11         el:"#app",
12         data(){
13             return{time:new Date()}
14         },
15         //使用語法
16         template:`<div>如今的時間是:{{ time | showTime("YYYY-MM-DD",1) }}</div>`,
17     })
18 </script>
19 </body>

注:參數的個數沒有限制vue

3.moment.js

JavaScript 日期處理類庫ajax

使用文檔:http://momentjs.cn/vue-router

三.生命週期的鉤子函數

 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 vuex

Vue提供的內置組件vue-cli

主要做用:讓組件產生緩存npm

注:獲取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.編程式導航

編程式經過本身的邏輯,來實現複雜的業務聲明式是經過框架自帶的標籤屬性來完成業務前者須要本身寫大量重複的事務控制代碼，後者經過設置能夠一次性給全部的業務方法添加上事務特性。

1. vue補充
2. Vue補充
3. 補充
4. vue-router路由知識補充
5. VUE組件通信的補充（slot）
6. vue-cli路由的一些補充
7. vue-cli3.0 平常優化補充
8. python就業班day27----ajax補充和vue
9. vue學習最後階段之補充
10. springboot rabbitmq 補充
更多相關文章...
• XML Schema complexContent 元素 - XML Schema 教程
• HTTP 請求方法 - HTTP 教程
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 再有人問你分佈式事務，把這篇扔給他

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。