vue

1. data 组件定义只接受 function
2. 父子组件属性传递：

• 父组件的子组件中 v-bind ：prop=“data”传递父组件的data
• 子组件内 prop接受并验证
• methods 不能使用es6箭头函数，作用域会改变

3. api

参考：https://vue.docschina.org/v2/api/#el

el: 实例挂载至已存在的DOM元素
data： Vue实例的数据对象
template: 模板会 替换挂载的元素

vue router

<router-link>路由导航
<router-view>路由匹配成功会把内容渲染在<router-view>中
children
router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发vue的created或者mounted钩子

<router-view :key="key"></router-view>

computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
 }

vuex

• state
• getter

从 store 中的 state 中派生出一些状态
Getter 会暴露为 store.getters 对象

• mutaction 更改状态的唯一方法（同步）

store.commit调用mutaction handle
this.$store.commit('xxx')或mapMutactions(['xxx'])
载荷：传入的额外参数 :对象，第一个为state
事件类型 ->常量

• action

store.dispatch触发
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise
可以包含任何异步操作
提交 mutaction

Moudle

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a 

store.registerModule 注册一个新 module

ElementUI

• 安装

npm i element-ui -S

• 引入模块 、组件等

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import { Button } from 'element-ui'
Vue.use(ElementUI)
Vue.use(Button)

• 使用

报错（踩坑）

• vue 出现Elements in iteration expect to have 'v-bind:key' directives问题

<li v-for="item in items" :key="item">
  {{item.message}}
</li>

• __WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor

在导出的时候new Vuex.Store中的Store必须大写

参考：https://www.jianshu.com/p/5335b73bae6c

• Avoid using non-primitive value as key, use string/number value instead.

不要用对象或是数组作为key，用string或value作为key。
参考： https://segmentfault.com/q/1010000010697225/a-1020000010704125

• mutation 的 载荷 是一个 对象，可以包含多个字段
• [Vue warn]: Property or method "newItem" is not defined on the instance but referenced during render.

要在data中初始化

<input v-on:keyup.enter="addNewItem" v-model="newItem"/>
  
  data () {
    return {
      newItem: null
    }
  },

参考：https://www.sunzhongwei.com/how-to-get-input-value-in-vuejs

• 提示使用npm audit fix修复漏洞

注意版本问题，如更新 node npm vue-cli等等

brew update
brew upgrade node

npm install -g npm

npm uninstall vue-cli -g
npm install -g @vue/cli

• 组件内 echarts not define（main.js 中引入 echart）

import echarts from 'echarts';

Object.defineProperties(Vue.prototype, {
  echarts: { get: () => echarts }
});

mounted: function(){
    console.log(this.echarts);
}

参考：https://forum.vuejs.org/t/main-js/6888/12

风格

1. prop:
   • camelCase(驼峰) props
   • kebab-case（烤串）HTML
2. 组件名 PascalCase
   如：SearchButtonClear
3. 指令缩写统一 @
4. v-for 要有 key
5. 避免在 scoped 中出现元素选择器