Vue.extend, Vue.mixin

1.Vue.extend创建一个构造器
Vue.component 是用来注册或获取全局组件的方法，其作用是将通过 Vue.extend 生成的扩展实例构造器注册（命名）为一个组件.全局注册的组件可以在所有晚于该组件注册语句构造的Vue实例中使用.
Vue.component(‘global-component’, Vue.extend(baseOptions));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component(‘global-component’, baseOptions);
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component(‘my-component’)

2.Vue.mixin
全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。

mixins / extends

优先级： extends > mixins >自身组件

mixins
类型：Array<Object> 
extends
类型：Object | Function

链接

ref ($refs)

如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例
1) 组件 用this.ref.name 获取到的是组件实例，可以使用组件的所有方法

全局

Vue.component('my-ref',{
    template:"<div ><h5>我是子组件</h5></div>"
} );

<my-ref ref="my"></my-ref>

局部

components: {
      Home
},
Home.vue
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" ref="contact">
          <a href="#">
              <span class="mui-icon"></span>
              <div class="mui-media-body">联系我们</div>
          </a>
      </li>
console.log(this.$refs)
{contact: li.mui-table-view-cell.mui-media.mui-col-xs-4.mui-col-sm-3}

父组件不包含

2）普通的元素 用this.ref.name 获取到的是dom元素

<p ref="out">ref在外面的元素上</p>
mounted() {
    console.log(this)
    console.log(this.$refs.out)
    console.log(this.$refs.out.innerHTML)
    console.log(this.$refs)        
}
<p>ref在外面的元素上</p>
ref在外面的元素上
{out: p}

因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 – 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

3) 当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

<ul v-for="item in items">
    <li ref="itemli">{{ item }} </li>
</ul>
console.log(this.$refs.itemli)
console.log(this.$refs.itemli[0])
 [li, li, li, li, li]0: li1: li2: li3: li4: lilength: 5__proto__: Array(0)
<li>1 </li>

程序化的事件侦听器

清理只需要用到一次的变量

插槽 <slot></slot> v-slot/(#)

父传子
1）具名插槽
子组件:

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

父组件：

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

 <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

注意 v-slot 只能添加在一个 <template> 上

2）作用域插槽
子组件：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

父组件：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

3) $slots
用来访问被插槽分发的内容。每个具名插槽 有其相应的属性 (例如：v-slot:foo中的内容将会在 vm.$slots.foo 中被找到)

深度作用选择器

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：
<style scoped>
.a >>> .b { / … / }
</style>
有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之

权限控制

动态菜单
视图控制
    视图控制的目标是根据当前用户权限决定界面元素显示与否，典型场景是对各种操作按钮的显示控制。
请求控制
    请求控制是利用axios拦截器实现的，目的是将越权请求在前端拦截掉，原理是在请求拦截器中判断本次请求是否符合用户权限，以决定是否拦截。

1. https://segmentfault.com/a/11…
2. https://refined-x.com/2017/09…
3. https://refined-x.com/2017/08…
4. https://juejin.im/post/591aa1…
5. https://juejin.im/post/5c7bae…

vue-router路由

单页面应用SPA的核心之一是：更新视图而不重新请求页面
1.普通路由

router.push('home')
router.push({path: 'home')

2.命名路由

const router=new VueRouter({
    routes: [{
        path: '/user',
        name: 'user',
        component: User
    }]
})

<router-link :to="{name: 'user'}"></router-link>
router.push({
    name: 'user'
})

3.动态路由匹配

<div>{{$route.params.id}}</div>
const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        component: User
    }]
})
router.push({name:'user',params: {id: 123})

4.嵌套路由

<h2>{{$route.params.id}}</h2>
<router-view></router-view>
const router = new VueRouter({
    routes: [{
        path: '/user/:id',
        children: [{
            // 当/user/:id
            path: '',
            component: UserHome
        },{
            // 当/user/:id/profile
            path: 'profile',
            component: UserProfile
        }]
    }]
})

5.参数的路由

router.push({path:'register',query:{plan:'private'})

6.编程式导航
router.push()
参数：
1.字符串

router.push('home')

2.对象

router.push({path: 'home'})

3.命名的路由

router.push({
name: 'user',
params: {
userId: 123
}
})

4.带查询参数，变成/register?plan=private

router.push({
path: 'register',
query: {
plan: 'private'
}
})

router.replace()
不会向history添加新纪录，替换当前的history记录
点击<router-link :to=”…” replace>等同于调用router.replace(…)
router.go(n)

在历史记录中向前或向后退多少步
// 前进一步，等同history.forward()
router.go(1)
// 后退一步
router.go(-1)
// 前进3步记录
router.go(3)

7.命名视图

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>
const router = new VueRouter({
    routes: [{
        path: '/',
        components: {
            default: Foo,
            a: Bar,
            b: Baz
        }
    }]
})