Vue重要知识小结

原创
2018/10/23 21:45
阅读数 1.4K

vue

  • sync修饰 (1)双向数据绑定,父子组件之间信息的交互

    1⃣️在自组件中使用this.emmit('toFather'),子组件产生一个tofather事件,然后在父组件中通过@进行监听,那么可以实现通信过程  2⃣️使用简单的方式传递,如上图中emmit(update:title),然后在v-bind:title.sync='title',从而实现双向数据绑定

    (2)双向数据绑定,使用v-model

    通过在自组件中使用model 定义 prop event ,从而可以实现父子组件之间通过v-model实现通信,或者不定义model ,使用默认的的prop:value,enent:input

  • keep-alive <keep-alive><My-component /> <keep-alive>  可以实现缓存

  • 作用域插槽 这个其实就是可以使用自组件中的数据,使用slot-scope接受自组件中的数据

  • 自组件访问父级组件 1⃣️ let father = this.$parent 2⃣️通过依赖注入

  • 计算属性 刚开始在学习计算属性的时候,一直默认的认为是一个函数,但是在调用的时候,是不用加()的,这样的话,在认为是一个函数就不对了,其实就是类似于 data中的数据,只不过会有缓存和更新。例如使用的时候直接{{computed}},通俗的说,可以单纯的将它作为一个data值

  • method方法 调用方法的时候,如果不传递值的话,那么可以不用加入()

  • 混入 minxins

自定义指令 通过Vue.directive(name,{}) Vuex

  • 三部分构成 state actions mutations

  • state 此部分存放数据,可以通过mapStated获取到数据。

  • actions 可以使用异步,通过this.$store.dispathc()触发

  • mutatios

    mutatios 必须是同步,通过this.emmit()触发

  • 步骤:

Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: { //前端全栈交流学习圈:886109386
    count: //针对一到五年前端开发人员
  },        //帮助突破技术瓶颈,提升思维能力。
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
1 评论
8 收藏
4
分享
返回顶部
顶部