過濾器/鉤子函數/router

時間 2019-11-13

標籤過濾器鉤子函數 router 简体版

原文原文鏈接

前節回顧

1.v-model 雙向的數據綁定html

2.組件前端

（1）局部組件vue

let Son = {
 data(){
        return {
            
       }
   },
    methods:{
        
   },
    computed:{
        
   },
    create(){
 }
}
....
{
    template:`<Son />`,
    components:{
        Son
   }
}

聲子掛子用子ajax

（2）全局組件算法

vue.component('組件的名字',{
    data(){
        return {
            msg:'hahah'
       }
   },
    methods:{
        
   },
    computed:{
        
   },
    create(){
 }
    
    
})

(3) 父子組件傳值vue-router

父= 》子 vuex

（1）在子組件中聲明props 只要聲明瞭該屬性，那麼就能夠在組件中任意使用django

（2）在父組件經過綁定自定義屬性掛載數據屬性編程

<Son :msg = 'msg'>後端

子=》父

（1）在子組件中經過this.$emit('方法名'，值)

（2）在父組件中綁定自定義的事件

平行組件

bus 公交車對象：綁定 $on和$emit

let bus = new Vue();

A=>B 傳值

$emit('函數名'，值)==> $on(’函數名‘,()=>{})

本節內容

過濾器

1.局部過濾器在當前組件內部使用過濾器

給某些數據 添油加醋

//聲明
filters:{
    '過濾器的名字':function(val,a,b){
        //a 就是alax ，val就是當前的數據
 }
}
//使用 管道符
數據 | 過濾器的名字('alex'，'wusir')

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        let App = {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
               }
           },
            template:`

               <div>我是一個APP {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>

               </div>
            `,
            filters:{
                myReverse:function (val) {
                    console.log(val);
                    return val.split('').reverse().join('')
               },
                //年-月- 日 年- 月
                myTime:function(val,formatStr){
                    return moment(val).format(formatStr);
               }
           }
       }
        new Vue({
            el:'#app',
            data(){
                return {

               }
           },
            components:{
                App
           }

       })

    </script>
</body>
</html>

2.全局過濾器只要過濾器一建立，在任何組件中都能使用 ***

Vue.filter('過濾器的名字'，function(val,a,b){})
在各個組件中都能使用
數據 | 過濾器的名字('alex'，'wusir')

生命週期的鉤子函數

從生到死

diff算法

beforeCreate

created 組件建立 ***
- 虛擬DOM React
- 發送ajax 獲取數據實現數據驅動視圖
beforeMount
mounted ***
- 獲取真實DOM
beforeUpdate
updated
activated
- 激活當前組件
deactivated
- keep-alive Vue提供的內置組件，主要做用，讓組件產生緩存
- 停用當前組件
beforeDestroy
destroyed
- 若是開了定時器，必定要關閉定時器

Vue的基本用法

模板語法{{ }} 關閉掉 django中提供的模板語法{{ }}

指令系統

v-text

v-html

v-show和v-if

v-bind和v-on

v-for

v-model 雙向數據綁定

Vue中的經常使用屬性

data:function(){}

methods

watch

computed

template

Vue的經常使用方法

鉤子函數

Vue的過濾器

局部和全局的過濾器

Vue的組件

全局組件

Vue.component('組件的名字',{
 
    
})

局部組件

聲子掛子用子

組件的傳值

父=》子

子=》父

平行組件傳值

Vue的全家桶（kfc） vue+vue-router+vuex

vue+vue-router 主要來作 SPA（Single Page Application）單頁面應用

vue-router是vue的核心插件

爲何要使用單頁面應用？

傳統的路由跳轉，若是後端資源過多，會致使頁面出現白屏現象，讓前端來作路由，在某個生命週期的鉤子函數中發送ajax，數據驅動。爲了用戶體驗

使用vue-router

1.下載

 //若是之後是模塊化編程，Vue.proptotype.$VueRouter = VueRouter
    //   Vue.use(VueRouter)
    const Home = {
        data() {
            return {}
       },
        template: `<div>我是首頁</div>`
   }
    const Course = {
        data() {
            return {}
       },
        template: `<div>我是免費課程</div>`
   }
    //2.建立路由
    const router = new VueRouter({
        //3.定義路由規則
        mode:'history',
        routes: [
           {
              path:'/',
              redirect:'/home'
           },
           {
                path: '/home',
                component: Home
           },
           {
                path: '/course',
                component: Course
           }
       ]
   })
    let App = {
        data() {
            return {}
       },
//       router-link和router-view 是vue-router 提供的兩個全局組件
        //router-view 是路由組件的出口
        //router-link默認會被渲染成a標籤，to屬性默認被渲染成href
        template: `
            <div>

                <div class="header">
     
                    <router-link to = '/home'>首頁</router-link>
                    <router-link to = '/course'>免費課程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

   }
    new Vue({
        el: '#app',
        //4.掛載 路由對象
        router,
        data() {
            return {}
       },
        template: `<App />`,
        components: {
            App
       }
   })

命名路由

 const router = new VueRouter({
        //定義路由規則
        routes: [
           {
              path:'/',
              redirect:'/home'
           },
           {
                path: '/home',
                name:'Home',
                component: Home
           },
           {
                path: '/course',
                name:'Course',
                component: Course
           }
       ]
   })
    
    
     let App = {
        data() {
            return {}
       },
//       router-link和router-view 是vue-router 提供的兩個全局組件
        //router-view 是路由組件的出口
        template: `
            <div>

                <div class="header">
                    <router-link :to = '{name:"Home"}'>首頁</router-link>
                    <router-link :to = '{name:"Course"}'>免費課程</router-link>
                </div>
                <router-view></router-view>
            </div>

        `

   }

動態路由匹配

$route 路由信息對象

$router 路由對象 VueRouter

watch: {
    '$route'(to, from) {
        // 對路由變化做出響應...
        console.log(to); //當前路由信息對象
        console.log(from);
   }
}

編程式導航vs 聲明式導航

<router-link :to = '{name:"Home"}'>首頁</router-link>
<router-link :to = '{name:"Course"}'>免費課程</router-link>

//編程式導航
this.$router.push({
    name:'Home'
})

相關標籤/搜索

每日一句

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