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