Vue.js 1.0 学习笔记

知识框架

核心

组件那一章需要仔细阅读,包括props给组件传参数,父子组件通信。

单页路由

中文教程:http://router.vuejs.org/zh-cn/index.html

需要关注一下,页面间怎么传参数,页面激活阶段的触发的事件方法

与服务器通信(AJAX)

界面

Vux

演示地址:https://vux.li/#!/
中文文档:https://vuxjs.gitbooks.io/vux/content/
演示代码:https://github.com/airyland/vux/tree/master/src/demos

因为中文文档不全,有些内容需要直接去看demo的代码会更清楚

MintUI

演示地址:http://mint-ui.github.io/#!/en
中文文档:http://mint-ui.github.io/docs/#!/zh-cn

组件化开发教程

例子

其他需掌握的知识点

ES6

ECMAScript 6入门

关注一下如何定义和加载模块

npm

一些使用经验

组件状态缓存 keep-alive

如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数:

1
2
3
<component :is="currentView" keep-alive>
<!-- 非活动组件将被缓存 -->
</component>

如果在单页应用中,想要保持页面切换前的状态,可以这样做:

1
<router-view keep-alive></router-view>

动态组件载入 lazy load

如果想按需加载组件资源,而不是在入口页就一次性加载全部的组件,可以参考 vue-router 文档中动态组件载入章节。

Webpack 已经集成了代码分割功能。可以使用 AMD 风格的 require 来对你的代码标识代码分割点:

1
2
3
require(['./MyComponent.vue'], function (MyComponent) {
// code here runs after MyComponent.vue is asynchronously loaded.
})

和路由配合使用,如下:

1
2
3
4
5
6
7
router.map({
'/async': {
component: function (resolve) {
require(['./MyComponent.vue'], resolve)
}
}
})

现在,只有当 /async 需要被渲染时,MyComponent.vue组件,会自动加载它的依赖组件,并且异步的加载进来。

Vue.util.extend

有时想要使用 Vue 内置的方法来进行拷贝对象,就像Angular.copy,Vue 也提供了这样一个方法,但是存在问题,相关 Issue

newItem = Vue.util.extend({}, item)

只能做浅拷贝,如果是多层的对象,仍然会存在旧对象的数据绑定关系。修改新对象内的数据时,会导致旧对象的数据绑定也被修改。例如

1
2
3
4
5
6
7
8
9
item = {
data: {
name: '',
phone: ''
}
}
// item.data.name 也会被修改
newItem.data.name = 'newName';

官方推荐的方法

newItem = JSON.parse(JSON.stringify(object))

vue-resource

当使用 JSON 与服务端进行交互时,在一些 Android 手机的微信中, 会出现没有将返回的数据转换成 JSON,而是仍然为字符串,这时需要手动转换

Vue.http.post(
  postUrl, postData
).then(function (response) {
  var data = response.data;
  // 需要手动转换为 JSON
  if (typeof data == 'string') {
    try {
      data = JSON.parse(data);
    } catch (e) {
    }
  }
   // do something
}, function (response) {
  // 请求失败
});