Vue简单总结

Vue简单总结

Vue常用指令

  1. v-if DOM元素的插入与删除(用于不大可能改变的)
  2. v-show 显示或隐藏,和display的效果一致(用于频繁切换时)
  3. v-model 主要用来在input、select、text、radio等表单控件上创建双向数据绑定
  4. v-text 操作纯文本,单向绑定,数据对象值改变,插值会改变;等同于{{}}效果
  5. v-html HTML文本,等同于{{{}}}效果
  6. v-bind 绑定属性或一个组件props,简写
  7. v-on 绑定一个事件,简写@,v-on后面可以有修饰符.stop/.prevent/.capture/.self/.keyCode
  8. v-for 遍历对象或数组
  9. v-ref 获取真实DOM

Vuex简单总结

Vuex核心知识点:State、Mutations、Actions、getters
  1. State:公共数据存储
const store = new Vuex.Store({
  state: {
    count: 0
  }
})
  1. Mutations:Store数据改变的唯一方法,里面包含很多方法(回调函数),但是都是同步函数,不能在此做异步操作;在Vuex中涉及改变数据的,就用Mutations
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
// 通过 store.commit方法触发状态变更
store.commit('increment')
  1. Actions:提交的是mutation,可以包含任意异步操作;在Vuex中存在业务逻辑的,就用actions
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})
// Action 通过 store.dispatch 方法触发:
store.dispatch('increment')
  1. getters:是store的计算属性,对数据进行处理输出,主要是filter/map等简单数据操作
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

computed和watch的区别

  • computed是计算属性,也就是会依赖其他的属性计算所得出的值;watch是去监听一个值的变化,然后执行相应的函数
  • computed的值在getters执行后是会缓存的,只有在它依赖的属性值改变后,下一次获取computed的值时才会重新调用对应的getters来计算;watch在每次监听的值变化时,都会执行回调
  • 若一个值依赖多个属性,则用computed;若一个值变化后会引起一系列操作,用watch
  • computed通常仅做逻辑运算;watch的回调会传入监听属性的新旧值,通过这两个值可以做一些特定的操作
  • computed返回state处理后的结果;watch是赋值行为,修改state
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值