插件

自定义一个对象，里面有一个install方法，这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象，当使用插件的时候需要用Vue.use()引入

let plugin={
        install(Vue,options){
            //添加全局组件
            Vue.component('hh',{
                template:`<div>SIMBA<slot></slot></div>`
            })
            //添加全局资源
            Vue.directive('simba',{
                inserted(el,binding){
                    //binding是相关的绑定数据，el为当前对象
                    console.log(binding)
                    el.value=binding.value
                    el.focus()
                    //这里的number是修饰符
                    if(binding.modifiers.number){
                        console.log('num')
                    }
                }
            })
            //添加实例方法
            Vue.prototype.$get=function(){}
        }
    }
    Vue.use(plugin)

自定义指令

//注册一个全局指令v-simba
Vue.directive('simba',{
    // 当被绑定的元素插入到 DOM 中时……
    inserted(el,binding){
        //binding是相关的绑定数据，el为当前对象
        console.log(binding)
        el.value=binding.value
        //聚焦元素
        el.focus()
        //这里的number是修饰符
        if(binding.modifiers.number){
            console.log('num')
        }
    }
})

<input type="text" v-simba.number='a'>

路由

简单例子

let vm = new Vue({
        el: '#app',
        router: new VueRouter({
            routes: [
                {
                    path: '/',
                    component: {
                        template: `<h1>首页</h1>`
                    }
                }, {
                    path: '/user',
                    component: {
                        template: `<h1>用户</h1>`
                    }
                }
            ]
        }),
        watch: {
            $route() {
                console.log(this.$route.path)
            }
        },
        mounted() {
            //路由配置对象
            console.log(this.$router)
            //当前路由信息
            console.log(this.$route)
        },
        methods: {
            goUser() {
                this.$router.push('/user').catch(err =>
                    console.log(err.name))
                
            }
        },
    })

<div id="app" v-cloak>
    <router-link tag="button" to='/'>首页</router-link>
    <router-link tag="div" to='/user'>用户</router-link>
    <!-- 容器 -->
    <router-view></router-view>
    <button @click='goUser'>跳转到用户</button>
</div>