// vue-router中可以使用 

 routes:[

     {

         path:'/',

         name:'index',

         component:()=>import('./index')

     }

 ]

//  这种写法可以让componet 后面跟一个匿名函数里面跟着组件的路径。

// v-cloak 防止表达式闪烁

// v-pre 不编译这个标签

// immediate:true 在使用handler 函数时 可以在初始化时进行监听.

watch:{

    $route:{

        handler:function(newVal,oldVal){

            // 监听新数据

            // 监听旧数据

        },

        immediate:true, //监听初始化的数据

        deep:true //深度监听数据

    }

}

// 凡是实例上的东西都可以进行监听

// 权限路由

// 路由组件传值

 {

     path:'/',

     name:'list',

     component:List,

     props:true

    //  子组件在接收值时. 在props里直接直接写传值的数据名字.

 }

//  计算属性也拥有getters 和setters 默认写的是getter,设置setter

// 执行可以当此计算属性数据更改的时候去做其他的一些事情.相当于watch这个计算属性

computed:{

    xm:{

        get:function(){ //getter 当依赖改变后设置值的时候

            return this.xing+'.'+this.ming

        },

        set:function(val){ //setter 当自身改变后执行

            this.xing = val.split('.')[],

            this.ming = val.split('.'.[])

        }

    }

}

// 过滤器

// vue 中可以设置filter(过滤器)来实现数据格式化,双花括号插值和v-bind表达式中使用

// 调用过滤器 {{msg|money}} {{msg|money|money}} 可以有多个过滤器进行过滤

Vue.filter('money',(value)=>{

    return '$'+value;

})

// mixin 便于混合 后期维护时候进行操作

let obj = {

    data:{ //混合到data中 也可以混合到methods或者created等等所有vue的实例拥有的方法

        xs:'',

        xq:'bk'

    }

}

let vm = new Vue({

    el:'#box',

    mixins:[obj],

    data:{

        msg:'hello',

        x:'s'

    }

})

// 虚拟dom的核心思想:对复杂的文档DOM结构,提供一种方便的工具,进行最小化的DOM操作

// 这句话,也许过于抽象,却基于概况了虚拟DOM的设计思想

// 1,提供了一种方便的工具,使得开发效率得到了保证

// 2,保证最小化的DOM操作,使得执行效率得到保证

// 也就是说,虚拟DOM的框架/工具都是这么做的:

// 1:根据现有的真实的dom来生成一个完整的虚拟DOM树结构

// 2:当数据变化,或者说页面需要重新渲染时候,会重新生成一个新的完整的虚拟DOM

// 3:拿新的虚拟dom来和旧的虚拟DOM做对比(使用diff算法),.得到需要更新的地方之后,更新内容

// 组件化开发:

// 优点:代码复用,便于维护

// 划分组件的原则:具有大量的布局结构的,或者是独立的逻辑的,都应该分成组件.

// 组件应该拥有的特性:可组合,可重用,可测试,可维护

// 组件可以用script的标签来书写比如:

<script type="text/x-template" id="myComponent">//注意 type 和id。

            <div>This is a component!</div>

</script>

Vue.component('my-component',{

    template: '#myComponent'

})

//我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用

// 验证主要分为：类型验证、必传验证、默认值设置、自定义验证

props:{

    // 类型验证:

    str:String, //str:[String,Number] 也可以是多种类型

    num:{

        type:Number,

        required:true //必填项

    },

    //默认数据

    bool:{

        type:Boolean,

        // default:true,

        default:function(){

            return true

        }

    },

    // 自定义类型

    nums:{

        type:Number,

        validator:function(value){

            return value % ==;

        }

    }

}

// slot 匿名插槽 具名插槽 作用域插槽

// 匿名插槽

<com><h1></h1></com>

// 为了让h1显示出来

let com = {

    template:'<div>111<slot></slot></div>'

}

// 具名插槽 根据名字来匹配

<com><h1 slot='right'></h1></com>

let com = {

    template:'<div>www<slot name="right"></slot></div>'

}

// 组件传参可以使用props 路由  非父子组件可以使用props 路由 还有空组件也可以传参

// 从A组件传给B组件

// A组件内容

    <template>

        <div>

            AAA <button @click='send'>send</button>

        </div>

    </template>

    <script>

        import bus from "空组件路径"

        export default{

            methods:{

                send(){

                    bus.$emit('msg','hahaha');

                }

            }

        }

    </script>

// 在空组件种传参 空组件内容:

import Vue from 'vue';

export default new Vue();

// B组件

import bus from "空组件路径"

export default {

    created() {

        bus.$on("msg",(data)=>{

            console.log(data);

        })

    }

}

// 命名路由

// router-link 写在本页面

<router-link to="/">点我显示多个组件</router-link>

routes:[

    {

        path:'/',

        components:{

            default:One //One组件

            right:Two //组件

        }

    }

]

// router-view 显示本页面的路由 显示当前组件的子组件 如果是默认路由的话 直接写router-view 显示当前的组件

<router-view></router-view>

<router-view name="right"></router-view>

// right是要显示组件的名字