vue学习的笔记补充

// 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('.')[0],
            this.ming = val.split('.'.[1])
        }
    }
}
// 过滤器
// vue 中可以设置filter(过滤器)来实现数据格式化,双花括号插值和v-bind表达式中使用
// 调用过滤器 {{msg|money}} {{msg|money|money}} 可以有多个过滤器进行过滤

Vue.filter('money',(value)=>{
    return '$'+value;
})
// mixin 便于混合 后期维护时候进行操作

let obj = {
    data:{ //混合到data中 也可以混合到methods或者created等等所有vue的实例拥有的方法
        xs:'123',
        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 %2 ==0;
        }
    }

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

// 匿名插槽
<com><h1>123</h1></com>
// 为了让h1显示出来
let com = {
    template:'<div>111<slot></slot></div>'
}
// 具名插槽 根据名字来匹配
<com><h1 slot='right'>123</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是要显示组件的名字