上一节:
下一节:

  VueJS 核心概述

  • 响应的数据绑定

    Vue.js 的核心是一个响应的数据绑定系统，它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时，我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定，DOM 将与数据保持同步。每当修改了数据，DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了，不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。
    mvvm

  • 示例

    下面简单的例子说明一下vue的响应的数据绑定系统： 
    //这是我们的视图 View
<div id="app">
  Hello {{ name }}!
</div>

// 这是我们的 Model
var testData = {
  name: 'world'
}

// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
var testVM = new Vue({
  el: '#app',
  data: testData
})
    尝试一下
    看起来这跟单单渲染一个模板非常类似，但是 Vue.js 在背后做了大量工作。并且 DOM 会自动响应数据的变化。我们如何知道？点击上面例子尝试一下打开你的浏览器的控制台，修改 testData.name，你将看到上例的视图有相应的更新，如下图所示：
    mvvm-test

  • 组件系统

    组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树：
    components
    实际上，一个典型的用 Vue.js 构建的大型应用将形成一个组件树。在后面的教程中我们将详述组件，不过这里有一个假想的例子，看看使用了组件的应用模板是什么样的： 
    <div id="app">
   <app-nav></app-nav>
   <app-view>
      <app-sidebar></app-sidebar>
      <app-content></app-content>
   </app-view>
</div>
    你可能已经注意到 Vue.js 组件非常类似于自定义元素——它是 Web 组件规范的一部分。实际上 Vue.js 的组件语法参考了该规范。
    例如 Vue 组件实现了 Slot API 与 is 特性。但是，有几个关键的不同：
    • Web 组件规范仍然远未完成，并且没有浏览器实现。相比之下，Vue.js 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue.js 组件也可以放在原生自定义元素之内。
    • Vue.js 组件提供了原生自定义元素所不具备的一些重要功能，比如组件间的数据流，自定义事件系统，以及动态的、带特效的组件替换。
    组件系统是用 Vue.js 构建大型应用的基础。另外，Vue.js 生态系统也提供了高级工具与多种支持库，它们和 Vue.js 一起构成了一个更加“框架”性的系统。

  • 实例生命周期钩子

    每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
    比如 created 钩子可以用来在一个实例被创建之后执行代码： 
    new Vue({
   data: {
      a: 1
   },
   created: function () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a)
   }
});
// => "a is: 1"
    也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。
    不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
    因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

  • 生命周期图示

    下图展示了实例的生命周期。你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。
    lifecycle
上一节:
下一节: