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.自定义指令

<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>//提取出来(建议使用)

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,701评论 0 7
  • (1) 当跨域请求报错 Access-Control-Allow-Origin 访问控制允许同源,有两种办法解决开...
    woow_wu7阅读 1,315评论 1 13
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 7,531评论 4 111
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,427评论 7 61
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 2,819评论 0 6
  • 想知道国内互联网公司都在用什么时髦或靠谱的技术,服务,开源项目吗?为此我发起了个调查,已经有一些结果了,随我来看。...
    零一间阅读 416评论 0 4
  • 那年夏天响起的口哨声, 清脆悦耳的令人回味无穷。 白衣少年和国歌, 那是陪伴我们整个青春年少的璀璨日记。 直至长大...
    阿俊xi阅读 127评论 1 0
  • 多么羡慕那些因失眠而拉长的生命,多么珍惜那些从黑暗中抢出来的记忆,多么懊恼为孩子讲睡前故事先把自己哄的眼皮粘...
    魏玉花阅读 692评论 4 6