Vue超快速学习

我之前一直使用的React,最近到了新公司,需要使用Vue,虽然之前自己写过一些小demo,但是缺乏系统的学习,且之前自己看的vue1.x的内容,好多都过时了,现在补充一下vue2.x的相关知识。

基础知识:

  • vue的生命周期: beforeCreate/createdbeforeMount/mountedbeforeUpdate/updatedbeforeDestory/destoryed
  • vue常用指令: v-forv-bind(缩写形式:prop)、v-on(缩写形式@click=’sss')、v-if/v-else/v-else-ifv-modelv-oncev-htmlv-show...
  • vue自定义组件:Vue.component(‘componentName',{ props:[‘p1’,’p2’], template: ‘
  • {{ p1 }}
  • ' })
  • vue常用实例方法和属性: data/$datamethods/$methods$elcomputed(计算属性)、$watch$set$event$emit...
  • 如果需要更新的属性需要缓存,则使用计算属性的方式,否则可以使用methods里的方法来更新属性(methods里的方法每次重新渲染都会执行)
  • 计算属性默认提供了getter,你还可以给它设置setter
  • 当你数据变化是异步或者开销较大时,可以使用watch侦听器来响应数据的变化
  • v-bind:class的值可以是一个对象,可实现类似reactclassnames模块的功能
  • 自定义组件上的class会被渲染拼接到template的根节点的class属性上(自定义组件上可使用v-bind:class来做class的判断显示逻辑)
  • v-bind:style可以用来绑定内联样式,这个内联样式的值可以由一个对象来定义(类似css in js的模式),且可以被定义为数组(多个样式对象)
  • v-bind:style可以使用多重值的形式:
  • v-if/v-else/v-else-if的时候,可以用key来管理可复用的元素
  • v-if是’真正’的渲染,它会确保在切换条件过程中条件块内的元素的事件监听器和子组件适时的销毁和重建
  • v-if是惰性的,初始为假,什么也不做,直到为真的时候才渲染元素
  • v-show总是渲染元素,只是简单的进行切换
  • v-if的切换开销大,v-show则是初始渲染开销大,频繁切换使用v-show,运行时经常改变则使用v-if
  • v-ifv-for一起使用时,v-for的优先级更高
  • v-for可遍历数组,第二个参数是索引
  • v-for可遍历对象,第二个参数是key,第三个参数是索引
  • v-for