新手学习Vue.js：总结一

1. Vue是什么：

Vue (读音 /vjuː/) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

总之：简洁、易用、性能好。

最重要的是：国产。

 

2. 重要知识点

    1. 只有当实例被创建时 data 中存在的属性才是响应式的。当这些数据改变时，视图会进行重渲染。使用 Object.freeze()例外，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化。

    2. 实例生命周期的不同阶段被调用，如 beforeCreate、created、beforMounted、mounted、beforeUpdate、updated beforeDestroy和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

    3. 计算属性缓存 vs 方法都能达到同样的效果：

• 采用方法：

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

• 计算属性缓存：

<p>Computed reversed message: "{{ reversedMessage }}"</p>

computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

        然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。

 

    4. 绑定class

            可以绑定一个对象和数组：

    <div v-bind:class="{ active: isActive }"></div> 
    <div v-bind:class="{ active: isActive, 'text-danger': hasError }"</div>

        或者这样：

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

        或者这样：绑定一个返回对象的计算属性

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

        或者这样：

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

    

    5. 绑定style同样可以采用对象或者数组的方式：

<div v-bind:style="[baseStyles, overridingStyles]"></div>

    或者这样：

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

转载于:https://my.oschina.net/woniuyi/blog/3097788