vue学习笔记2

vue事件修饰符

• stop 禁止冒泡
• once 只触发一次，单次事件
• prevent 组件默认事件
• native 启用原生事件（组件）
• keycode|name 筛选按键
• self
• capture

computed-计算属性

• 缓存-性能
• 方便
• 可读、写
• 属性的形式

  computed:{
    name: {
      get(){
      <!-- 可读 -->
        return this.value
      },
      set(value){
        <!-- 可写 -->
        this.value = value
      }
    }
  }

watch-监听

• 监听属性，当属性改变触发事件

  watch:{
    name(){
      console.log('name变了')
    }
  }

vue-router

• 容器

  <router-view><router-view>

• 跳转路由标签

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

• router函数操作

  this.$router.push()
  
  // history是一个栈
  push(string | object) // 入栈
  replace(string | object) // 替换最后一个历史记录（当前）
  go(int) // 前进后台
  
  $route 获取路由信息
  
  $router 控制路由跳转

• 监视路由

  // 1.watch - 不推荐
    简单-只能看不能操作
  watch: {
    $route(value, old_value){
      console.log(value, old_value)
    }
  }
  
  // 2.路由守卫

• 路由表

  router = new VueRouter({
    routes: [
      {
        path: '/a',
        component: { template: '<div>我是组件a</div>' }
      },
      {
        path: '/b',
        component: { template: '<div>我是组件b</div>' }
      }
    ]
  })

• 多视图

  <router-view name="header"><router-view>
  <router-view><router-view>
  <router-view name="footer"><router-view>
  
  router = new VueRouter({
    routes: [
      {
        path: '/a',
        components: { 
          defaulte: {template: '<div>我是组件a</div>'},
          header: {template: '<div>我是头部</div>'},
          footer: {template: '<div>我是底部</div>'}
          }
      }
    ]
  })

• 路由嵌套
  使用children

  export default {
    routes:[
      {
        path:'/index',
        name:'index',
        children:[
          {
            path:"/1",
            component:{template:'<div>1111</div>'}
          }
        ]
      }
    ]
  }