Vue的基本用法

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

指令系統

v-text

v-html

v-show和v-if

v-bind和v-on

v-for

v-model 雙向資料繫結

Vue中的常用屬性

data:function(){}

el

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

下載

 //如果以後是模組化程式設計，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'
})