vue

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

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

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