Vue 基本用法

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'
})