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.自定义指令
<input v-focus>//html模板
//局部注册指令,注意不能加v-
directives: {
focus: {
// 指令的定义---
}
}
// 注册一个全局自定义指令 v-focus,注意不能加v-
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
2,组件的使用场景
1,temlate:'<h2>XXXX</h2>'
2,单独放到某个地方<script type='xxxx'> XXXXX</script>(不推荐使用)
3,<template><h1>XXX</h1></template>//提取出来(建议使用)