vue 多个class属性_vue 文档学习小结

1.不要在选项属性或回调上使用箭头函数

比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，

生命周期钩子的 this 上下文指向调用它的 Vue 实例

2.生命周期：

Vue实例被创建时都要经历一些初始化过程：比如数据监听，模板编译，将实例挂载到DOM或在数据变化时更新DOM，而这些钩子给了用户添加代码的机会：

beforeCreated ：实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created ：实例创建完成后立即调用；数据观测，属性和方法的计算，watch/event事件回调已经完成；$el元素目前不可见；this可以使用；一般，异步获取数据在created里被赋值，用于初次渲染页面。

beforeMount：实例挂载之前被调用；相关render函数首次被调用。

mounted ：实例挂载完成后立即调用；$el元素可用，此时可以操作DOM元素。

• 注意mounted不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用vm.$nextTick替换掉mounted：

mounted: function () {
    
   this.$nextTick(function () {
    
   // Code that will run only after the
   // entire view has been rendered
   })
}

[ nextTick： 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。 ]

beforeDestory:实例销毁之前调用。在这一步，实例仍然完全可用

destroy：实例销毁之后被立即调用

3.指令：

v-once ：一次性地插值

v-html : 动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击

v-bind : 可以用于响应式地更新 HTML 特性

v-on：监听DOM事件

v-if v-else-if else-if else , v-for

自定义指令:

ps:

:title="'title'" > title为'title'
:title="title"   > title 为data的title
 title="title"    > 正常

4.计算属性

计算属性自动生成，不在data，会被data里的覆盖，无法共存，没有初始值，根据依赖生成，需要的话应使用新建变量保存，或者使用methods。

默认只有 getter ，可以提供一个 setter ：

computed: {
    
  fullName: {
    
    // getter
    get: function () {
    
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
    
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
现在再运行 vm.fullName = 'John Doe' 时，
setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

#计算属性 vs 方法
> 计算属性基于依赖缓存
> methods 每次都重新计算

5.侦听器