Vue 学习笔记

个人基于对 Vuejs 的学习制作了一个 Todo 单页应用 Lightodo,功能包括:添加待办事项卡片,对卡片或待办事项进行排序或删除操作,设置待办事项定时提醒,登录注册等,仅供参考,请勿模仿(代码乱得无法形容,捂脸)~

Vue 简介

vue.js

提醒:Vuejs 如今正处在快速发展中,很多资源随时都有可能过时(outdated),记得查看最新文档,使用最新资源。

Vue 的官方说明

数据驱动的组件,为现代化的 Web 界面而生。
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

关于 Vue 的作者

尤雨溪 / 昵称:尤小右 / 英文名:Evan You

是个介于设计师和程序员之间的大牛,设计能力比程序员好,编程能力比设计师(和普通程序员)好太多!
如今辞了工作,专心投入到了 Vuejs 的发展和推广中。

工作信息:
Meteor (2014 - 2016)
地区:海外 ,美国
职位:Core dev
Google (2012 - 2014)
地区:海外 ,美国
职位:Creative Lab

相关信息
JavaScript Air Episode 016: JavaScript Frameworks: Vue.js
和 Vue.js 框架的作者聊聊前端框架开发背后的故事 | Teahour.fm

Vue 的基本用法

Vue 相比于 React 和 Angular 容易上手多了,因此我对 Vue 的学习主要以文档为主,视频为辅(只有像我这种菜鸟才看视频教程,真正的牛人文档瞄几眼就会了(-_-#))。

下载使用(两种方式)

  1. 直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

平时对于 Dom 操作比较频繁的小项目可以直接这样使用。

  1. Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目:

针对单页应用的构建推荐使用这种方式,可以更好的体验到 vue 所提供的组件化功能 (单文件组件),顺带着享受到 webpack 带来的流畅的自动化开发体验。

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

Vue 的使用教程

废话不多说,大家直接看官方文档,已经写得非常棒了。
页面上的搜索功能可以快速帮助你定位到相关文档说明,非常方便。

针对相关问题的解决方法


问题:Vue 还未实例化前, HTML 模板中的 "{{ }}"( Mustache 标签) 会暴露在用户界面上,也就是说页面有那么一瞬间会将所有的 "{{ }}" 都显示出来,如何解决?
解决
方法一:使用 v-cloak 指令,这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-cloak 文档说明

[v-cloak] { 
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

方法二:使用 v-text
v-text 文档说明

<span v-text="msg"></span>
<!-- same as -->
<span>{{msg}}</span>

问题:新增的 data 数据没法同步响应到页面?
解决:认真阅读官方文档里的深入响应式原理

在实例创建之后添加属性并且让它是响应的:

对于 Vue 实例,可以使用 $set(key, value) 实例方法:

vm.$set('b', 2)
// `vm.b` 和 `data.b` 现在是响应的

对于普通数据对象,可以使用全局方法 Vue.set(object, key, value):

Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的

注意事项

  • 注意如果 prop 是一个对象或数组,是按引用传递。在子组件内修改它会影响父组件的状态,不管是使用哪种绑定类型
  • 针对同一个元素的后一个 watch 会覆盖前一个 watch,无论是不是 deep
  • 自定义指令内部可以通过 this.vm.someKey 来访问到组件的数据
  • 自定义指令名不要有大写,props 命名也不要有大写

Vue 的组件化实践

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

使用上文提到的官方命令行工具
目前可供使用的模板包括(模板名-说明):

  • webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.(全功能的 Webpack + vue-loader 设置,包括热加载,静态检测,测试,css 提取)
  • webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.(一个简易的 Webpack + vue-loader 设置,以便于快速开始)
  • browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.(全功能的 Browserify + vueify 设置,包括热加载,静态检测,单元测试)
  • browserify-simple - A simple Browserify + vueify setup for quick prototyping.(一个简易的 Browserify + vueify 设置,以便于快速开始)
  • simple - The simplest possible Vue setup in a single HTML file

相关阅读:
Announcing vue-cli
(译)Vuejs 自己的构建工具 vue-cli

webpack 基础入门

webpack is a module bundler.
webpack takes modules with dependencies and generates static assets representing those modules.

Webpack 主要特性如下:

  • 同时支持 CommonJSAMD 模块(对于新项目,推荐直接使用 CommonJS);
  • 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对 CoffeeScript、ES6 的支持;
  • 可以基于配置或者智能分析打包成多个文件,实现公共模块或者按需加载;
  • 支持对 CSS,图片等资源进行打包,从而无需借助 Grunt 或 Gulp;
  • 开发时在内存中完成打包,性能更快,完全可以支持开发过程的实时打包需求;
  • 对 sourcemap 有很好的支持,易于调试。

Webpack 将项目中用到的一切静态资源都视之为模块,模块之间可以互相依赖。Webpack 对它们进行统一的管理以及打包发布。

Webpack 一般作为全局的 npm 模块安装:

npm install -g webpack

安装成功后,在命令行输入 webpack -h 即可查看当前安装的版本信息,以及可以使用的指令。直接执行 webpack 命令会默认使用当前目录的 webpack.config.js 作为配置文件。如果要指定另外的配置文件,可以执行:

webpack —config webpack.custom.config.js

Webpack 可以通过直接命令行来指定参数:

# 命令 入口文件 生成文件
webpack entry.js bundle.js

但我们通常会将所有相关参数定义在配置文件中,配置文件通常放在项目根目录之下,其本身也是一个标准的 CommonJS 模块。一个最简单的 Webpack 配置文件 webpack.config.js 如下所示:

module.exports = {
  entry:[
    './app/entry.js'
  ],
  output: {
    path: __dirname + '/assets/',
    publicPath: "/assets/",
    filename: 'bundle.js'
  }
};

其中 entry 参数定义了打包的入口文件,数组中的所有文件会按顺序打包。每个文件进行依赖的递归查找,直到所有相关模块都被打包。output 参数定义了输出文件的位置,其中常用的参数包括:

  • path: 打包文件存放的绝对路径
  • publicPath: 网站运行时的访问路径
  • filename: 打包后的文件名

Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js(打包后的文件名) 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行依赖引入(require / import)代码的时候再执行。

官网首页的说明:

// webpack is a module bundler
// This means webpack takes modules with dependencies
//   and emits static assets representing those modules.

// dependencies can be written in CommonJs
var commonjs = require("./commonjs");
// or in AMD
define(["amd-module", "../file"], function(amdModule, file) {
    // while previous constructs are sync
    // this is async
    require(["big-module/big/file"], function(big) {
         // for async dependencies webpack splits
         //  your application into multiple "chunks".
         // This part of your application is
         //  loaded on demand (Code Splitting)
        var stuff = require("../my/stuff");
        // "../my/stuff" is also loaded on demand
        //  because it's in the callback function
        //  of the AMD require
    });
});


require("coffee!./cup.coffee");
// "Loaders" can be used to preprocess files.
// "Loaders" 可以用来对文件进行预处理
// They can be prefixed in the require call
// 可以写在 require 代码中
//  or configured in the configuration.
// 也可以在配置文件中进行配置
require("./cup");
// This does the same when you add ".coffee" to the extensions
//  and configure the "coffee" loader for /\.coffee$/


function loadTemplate(name) {
    return require("./templates/" + name + ".jade");
    // many expressions are supported in require calls
    // a clever parser extracts information and concludes
    //  that everything in "./templates" that matches
    //  /\.jade$/ should be included in the bundle, as it
    //  can be required.
}


// ... and you can combine everything
function loadTemplateAsync(name, callback) {
    require(["bundle?lazy!./templates/" + name + ".jade"], 
      function(templateBundle) {
        templateBundle(callback);
    });
}

更多信息可以参考 webpack 的官方网站

相关阅读:

以下四篇文章看完并跟着操作就能对 webpack 有个最起码的理解,了解其最基本的使用方式。
webpack入坑之旅(一)不是开始的开始
webpack入坑之旅(二)loader入门
webpack入坑之旅(三)webpack.config入门
webpack入坑之旅(四)扬帆起航

深入浅出React(二):React开发神器Webpack

.vue file

.vue 为后缀的文件 - 单文件组件
推荐使用 vue-webpack-simple-boilerplate 这个模板来进行 vuejs 的组件化开发的学习。

命令行安装:

# 全局安装 vue-cli
npm install -g vue-cli
# 模板名为 webpack-simple(目前官方有 5 个模板可供选择,见上文) 
# 项目名为 my-project (自定义)
# 下面命令执行后会出现几个问题,用于配置你的项目信息,可以一路回车(即采用默认值)
vue init webpack-simple my-project
# 进入项目目录
cd my-project
# 执行模块的下载安装,所需模块的配置信息在 package.json 中
npm install
# 执行 dev 脚本(也在 package.json 中),即项目开发模式
npm run dev
# npm run build 执行 build 脚本,项目文件打包生成
  • npm run dev: Webpack + vue-loader with proper config for source maps & hot-reload.

  • npm run build: Production build with HTML/CSS/JS minification.

提醒:要是执行命令 npm run dev 后出现错误,有可能是 node 版本导致的,请将 node 更新到最新版,对于 win 用户来说,直接官网再下载一个最新版本的安装包来安装即可。

接下去每次要对项目进行开发时,就到项目根目录,右键+Shift 键,选择 在此处打开命令窗口,然后执行命令 npm run dev,即可在 localhost:8080 地址上看到运行的项目,修改代码并保存后页面还会自行更新(使用了热加载技术 webpack-dev-server --inline --hot )。

Automatic Refresh
The webpack-dev-server supports multiple modes to automatic refresh the page:

  • Iframe mode (page is embedded in an iframe and reloaded on change)
  • Inline mode (a small webpack-dev-server client entry is added to the bundle which refresh the page on change)
    Each mode also supports Hot Module Replacement in which the bundle is notified that a change happened instead of a full page reload. A Hot Module Replacement runtime could then load the updated modules and inject them into the running app.

相关阅读:
webpack-dev-server - a Node.js based server that supports live reloading and is used for development of webpack powered applications.
webpack入坑之旅(五)加载 vue 单文件组件

vue-loader

vue-loader 用于 webpack 中,用来对以 .vue (单文件组件)结尾的文件进行处理。

vue-router

vue-router - 单页面应用路由
使用 Vue.js 和 vue-router 创建单页应用非常的简单,使用 Vue.js 开发,整个应用已经被拆分成了独立的组件。在使用 vue-router 时,我们需要做的就是把路由映射到各个组件,vue-router 会把各个组件渲染到正确的地方。

阅读 vue-router 文档

相关阅读:
webpack入坑之旅(六)配合 vue-router 实现 SPA

Vuex

阅读 Vuex 文档,中文版的过时了,尽量阅读英文版的。

Vue 2.0

一张脑图带你认识 Vue 2.0( 来源微博@勾三股四 )

Announcing Vue.js 2.0
(译)Announcing Vue.js 2.0
Code Review for Vue 2.0 Preview
Vue 2.0 数据绑定实现一瞥

框架对比

对比其它框架

Vue 视频教程(需科学上网)

  1. Vue JS Intro

最轻松简单的入门教程,可以初步对 Vuejs 的使用有个概念。

  1. An Introduction into Vue.js: Building an Example App
  • Repository(该视频教程的代码资源文件)

很棒的视频教程,可以最大化的接触到 Vuejs 所能做到的事情,是我当时看到的对我来说最好的 Vuejs 相关视频教程。

  1. Vue Js Tutorial Intro with TodoList

就是对文档里展示的 Todolist 的视频化演示,文档理解了就没必要再看了。

  1. Weather app with VueJS & OpenWeatherMap
  • Learn how to deal with JSON data with Vue / jQuery
  • use $.getJSON

随便看看。

  1. Learning Vue 1.0: Step By Step

没看过,但看目录好像不错,很多值得看一下,免得自己思路不清晰乱踩坑(而且视频是免费的)。

名词解释

hot-reload(热加载)

Hot Reloading
The idea behind hot reloading is to keep the app running and to inject new versions of the files that you edited at runtime. This way, you don't lose any of your state which is especially useful if you are tweaking the UI.
在项目运行过程中,将修改的文件的新版本注入到页面中,只更新相应的模块,这样的话,你不会丢失页面的状态信息,这一点在你微调 UI 的时候尤其有用。

相关信息:
Introducing Hot Reloading

资源

加入 Vue 社区 - 社区、第三方资源、参与 Vue 开发(参与规则,Vue 的主要组件)
vue-devtools - Chrome devtools extension for debugging Vue.js applications.
Awesome Vue.js - A curated list of awesome things related to Vue.js
coligo.io - 在学习 vuejs 的同学,可以看看这个网站,上面都是些 vuejs 不错的案例教程

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 148,637评论 1 318
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 63,443评论 1 266
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 99,164评论 0 218
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,075评论 0 188
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,080评论 1 266
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,365评论 1 184
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 30,901评论 2 283
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,649评论 0 176
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,122评论 0 223
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,734评论 2 225
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,093评论 1 236
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,548评论 2 222
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,028评论 3 216
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,765评论 0 9
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,291评论 0 178
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,162评论 2 239
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,293评论 2 242

推荐阅读更多精彩内容

  • 转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库...
    果汁密码阅读 22,978评论 8 125
  • 来源:github.com Vue.js开源项目速查表:https://www.ctolib.com/cheats...
    zhangtaiwei阅读 11,497评论 1 159
  • 今晚,月亮特别圆,特别亮。 不喜欢孤独的我却自己一个人走在校园里,走在道路的正中间,两边微微亮的路灯将我的影子拉长...
    明羽繁阅读 172评论 0 0
  • 我常想,若是我去创作一部长篇小说,我会写什么?我不是一个天马行空,想象力丰富的人,也没经历过跌宕起伏的人生。我的祖...
    开颜棠棠阅读 225评论 0 0
  • 毕老师来看我,说老虎吃人的事情发生后她很纠结,晚上没有睡好。 我好奇怪,老虎吃人的事发生了,我没有啥感觉,只有网络...
    开心的灵通阅读 276评论 0 0