踩坑

router

  1. 记得Vue.use(VueRouter) 否则会报name错误
  2. route-link & view 不是router
  3. children 是 [ ]，路径不要带 /
  4. 路由配置props时 ,组件接收也要props
  5. 默认高亮样式router-link-active
  7. link 和 view 可以不用在同组件中
    1. <div>
    2. <Tabbar></Tabbar> //route-link在子组件里
    3. <router-view></router-view>
    4. </div>

生命周期

  1. 生命周期写在methods外边
  2. 名字规律 befor+Xx 或 xx+ed
  3. beforUpdate & update 时指dom的value或text 不是data中的数据(此处输出data中数据是最新的)

Vuex

  1. new Vuex.Store( {对象} )
  2. [JIA] ({commit},value){} 中括号形式获取遍历作为函数名
  3. getters不要进行state的赋值操作

watch

  1. 修改对象第一层就要深度监视 deep:true
  2. 有两个参数 new & old
  3. set(){ 此处不写return 应写this.xx=xx}

列表

  1. 添加对象

this.$set(this.student,'sex','男')

  1. 修改数组

    this.student.hobby[0]='开车'//错误
this.student.hobby.splice(0,1,'开车') 
Vue.set(this.student.hobby,0,'开车')
this.$set(this.student.hobby,0,'开车')

    slot - 插槽

  2. 插槽组件写外层样式 , 使用插槽的组件定义插槽样式 ```vue

    左边 


2. 作用于插槽
```vue
//component
<template #firstname="getnames">
    <li v-for="(name,index) in getnames.names" :key="index">{{name}}</li>
</template>
//插槽组件
<slot name="firstname" :names="names"></slot>

Mustache语法：

image.png
image.png

调试工具-插件

https://www.jianshu.com/p/63f09651724c

image.png

组件切换虚拟Dom问题

image.png

data与el的两种写法

$mount经常被使用到插件中
image.png