vue基础内容{通信,注册,路由,组件}

ES6常用语法

    -- 变量

        -- var 变量提升

        -- let  {}

        -- const 常量

    -- 模板字符串

        -- ``

        -- ${}

    -- 函数

        -- 箭头函数

        -- this

            -- 普通函数取决于函数最近的调用者

            -- 箭头函数取决于当前上下文环境

    -- 数据的解构

        -- 注意语法

    -- 类  

        -- class 定义类

        -- extends 继承

        -- constructor 构造方法

        -- 子类是没有this的 用super()

    -- export import

        -- export {}  ---》 import {} from .....

        -- export default  一个文件只能有一个  import xxxx from xx

Vue的常用指令

    -- v-text  innerText

    -- v-html  innerHtml

    -- v-if    appendChlid

    -- v-for   循环

    -- v-show  display

    -- v-bind  绑定属性 :   <div :class="{"类名": is_show}"></div>

    -- v-on    绑定事件的   所有的js的事件

    -- v-model 数据双向绑定

        -- input

        -- select

        -- textarea

    -- 指令修饰符

        -- .lazy  不要实时绑定 懒

        -- .trim  去空格

        -- .number  转换成数字

    -- 自定义的指令

        -- Vue.directive("指令名称",function(el, binding){

                el: 绑定指令的标签

                binding: 指令的所有信息

        })

    -- 计算属性   {{num}}

        -- computed: {

            num: function(){

                return xxxx

            }

        }

        -- 放入缓存 只有数据发生改变的时候才会重新计算

    -- 获取DOM

        -- 给标签添加ref属性

            <div ref="my_box"></div>

        -- this.$refs.my_box

    -- 数据监听

        -- watch: {

            my_data: {

                handler: function(val, oldVal){

                    val 新的值

                    oldVal 旧的值

                    注意 数组跟对象新旧值是一样的

                }

                deep: true

            }

        }

        -- 数组

            -- 长度改变的时候才会被监听到

            -- 改变数组的值的时候深度监听监听不到

            -- app.$set(array, index, value)

        -- 对象

            -- 深度监听是可以监听到的

Vue的组件

    -- 组件的注册

        -- 全局注册

            Vue.component("组件名称",{

                template只能识别一个作用域块

                template: `<div></div>`,

                data(){

                    return {

                        xxx: xxx

                    }

                },

                methods: {},

                .....

            })

            <组件名称></组件名称>

        -- 局部注册

            -- let my_com = {

                template只能识别一个作用域块

                template: `<div></div>`,

                data(){

                    return {

                        xxx: xxx

                    }

                },

                methods: {},

                .....

            }

            -- 注册在Vue的实例化对象里

                const app = new Vue({

                    el: "#app",

                    components: {

                        my_com: my_com

                    }

                })

            -- <my_com></my_com>

        -- 子组件的注册

            -- 在父组件里写compontents: {

                    类比局部组件注册

            }

            -- 在父组件的template里显示子组件对应的标签

                <clild></child>

    -- 组件之间的通信

        -- 父子通信

            -- 给父组件里的子组件绑定属性

                <child :属性名称="父亲向儿子说的话"></child>

            -- 子组件通过props拿到数据

                props:[属性名称]

        -- 子父通信

            -- 子组件要提交事件

                this.$emit("事件名称", 儿子向父亲说的话)

            -- 给父组件里的子组件绑定事件

                <child @事件名称="自己处理的事件名称"></child>

                methods: {

                    自己处理的事件名称: function(){}

                }

        -- 非父子通信

            -- 定义一个中间调度器

                const Event = new Vue()

            -- 其中一个组件向中间调度器提交事件

                Event.$emit("事件名称", data)

            -- 另一个组件监听调度器的事件

                mounted(){

                    Event.$on("事件名称", function(data){

                        do something

                        注意this

                    })

                }

    -- 混合

        -- 作用代码的复用

        -- let base = {

            可复用的代码块

        }

        -- mixins: [base]

        -- 可以重写base里的内容

    -- 插槽

        -- <my_com></my_com>不支持标签里写内容

        -- slot

        -- 命名的插槽

            <slot name="xxx"></slot>

            <div slot="xxx"></div>

Vue的路由

    -- 路由的注册

        -- let url = [

            {

                path: "/",

                component: {

                    template: ``

                },

            },

            {

                path: "/course",

                component: {

                    template: ``

                },

            }

        ]

        -- let router = new VueRouter({

            routes: url

        })

        -- const app = new Vue({

            el: "#app",

            router: router

        })

        --  <router-link to="/">首页</router-link>

            <router-link to="/course">课程页面</router-link>

            <router-view></router-view>

    -- 子路由

        -- let url = [

            {

                path: "/",

                component: {

                    template: `写子路由的router-link以及router-view

                                <router-link to=""></router-link>

                            `

                },

                children: [

                    {

                        path: "/user",

                        component: {

                            template: ``

                        }

                    }

                ]

            }

        ]

    -- 命名的路由

        -- let url = [

            {

                path: "/",

                name: "home",

                component: {

                    template: ``

                },

            },

            {

                path: "/course",

                component: {

                    template: ``

                },

            }

        ]

        -- let router = new VueRouter({

            routes: url,

            去掉路由上的#

            mode: "history"

        })

        -- const app = new Vue({

            el: "#app",

            router: router

        })

        --  <router-link :to="{name: 'home'}">首页</router-link>

            <router-link to="/course">课程页面</router-link>

            <router-view></router-view>

    -- 路由的参数

        -- -- let url = [

            {

                path: "/",

                component: {

                    template: ``

                },

            },

            {

                path: "/course/:course_name",

                component: {

                    template: ``

                },

            }

        ]

        -- this.$route

            路由的所有信息

                fullpath

                path

                query  ?后的数据

                params  是路由里的变量

                meta

        -- this.$router

            VueRouter实例化对象

    -- 手动路由

        -- this.$router.push("/")

        -- this.$router.push({name: "xxx", params: {key:value}, query: {key:value}})

    -- 路由的钩子

        -- router.beforeEach(function(to, from, next){

                to 你要去哪

                from 哪里来的

                next 下一步干嘛

        })

        -- router.afterEach(function(to, from){})

    -- 命名的路由视图

        -- 当一个路由对应多个组件的时候

        -- <router-view name="对应组件的名称"></router-view>

 

posted @ 2018-11-14 22:55  大海无量,苦海无边  阅读(355)  评论(0编辑  收藏  举报