Vue总结

vueUI框架elmentui

1，

vuex

-----state-------存储数据
1，创建一个store，里面创建store的事例，然后公开借口
2，mian里面引用store:store
3，子组件就可以直接用了，在属性computed里面，写传的值得返回
--------getter----------获取数据
同步改：
1，在store里面添加geters（）
2，在子组件里面正常用
---mapgetter----//在方法很多的时候用
1，如果store里面有很多的数据列表，子组件里面如果用，就需要不停的使用return，就可以用
2，...mapGetter([''state中的数组列表'']，[],[])//很多很多
action里面也一样，但是需要babel转化(背 波)；
mapGetter和mapAction需要引入vuex
安装方式：cnpm install babel-preset-stage-2 --save--dev
安装好后，还需要在.babelirc，添加['stage-2'],保存，重启。

--------Mutations------触发事件改变数据
1，在store里面使用mutations
2，子组件使用this.$store.commit('store里面的事件名称','参数')
3，就是可以在调试工具里面查看事件的信息，方便debug

-----------action------------异步触发mutation里面的事件
概念：类似于mutations不同在于action是提交mutations而不是直接改变装填
action可以包含而已的异步操作

使用1：
1，在store里面action属性里面写 执行content，这个就类似于store。写法是：context.commit('Mutation里面的事件名称')
2，在子组件使用的时候就可以方法里面this.$store.dispach('action里面的事件名')
使用2：传参
1，在子组件事件里面携带的自定义采纳数，dispach的时候传给store里面的action接受
2，action接受参数，commit（‘事件名’，‘参数’）//直接把参数传递给mutation的方法中
3，mutation里面接受参数。做处理

1.自定义指令

//html模板

//局部注册指令，注意不能加v-
directives: {
focus: {
  // 指令的定义---
}
}


// 注册一个全局自定义指令 v-focus，注意不能加v-
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
  // 聚焦元素
  el.focus()
}
})

2,组件的使用场景

1，temlate:'

XXXX

'
2，单独放到某个地方(不推荐使用)
3，//提取出来（建议使用）