Vue 学习笔记
2016.05.13 13:45* 字数 3279 阅读 12442评论 17喜欢 216赞赏 1
个人基于对 Vuejs 的学习制作了一个 Todo 单页应用 Lightodo，功能包括：添加待办事项卡片，对卡片或待办事项进行排序或删除操作，设置待办事项定时提醒，登录注册等，仅供参考，请勿模仿（代码乱得无法形容，捂脸）~
Vue 简介
vue.js
提醒：Vuejs 如今正处在快速发展中，很多资源随时都有可能过时（outdated），记得查看最新文档，使用最新资源。
Vue 的官方说明
数据驱动的组件，为现代化的 Web 界面而生。
Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
关于 Vue 的作者
是个介于设计师和程序员之间的大牛，设计能力比程序员好，编程能力比设计师（和普通程序员）好太多！
如今辞了工作，专心投入到了 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 的学习主要以文档为主，视频为辅（只有像我这种菜鸟才看视频教程，真正的牛人文档瞄几眼就会了(-_-#)）。
下载使用（两种方式）
直接下载并用 标签引入，Vue 会被注册为一个全局变量。
平时对于 Dom 操作比较频繁的小项目可以直接这样使用。
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]{display: none;}
{{ message }}
方法二：使用 v-text
{{msg}}
问题：新增的 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
相关阅读：
webpack 基础入门
webpack is a module bundler.
webpack takes modules with dependencies and generates static assets representing those modules.
Webpack 主要特性如下：
同时支持 CommonJS 和 AMD 模块（对于新项目，推荐直接使用 CommonJS）；
串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6 的支持；
可以基于配置或者智能分析打包成多个文件，实现公共模块或者按需加载；
支持对 CSS，图片等资源进行打包，从而无需借助 Grunt 或 Gulp；
开发时在内存中完成打包，性能更快，完全可以支持开发过程的实时打包需求；
对 sourcemap 有很好的支持，易于调试。
Webpack 将项目中用到的一切静态资源都视之为模块，模块之间可以互相依赖。Webpack 对它们进行统一的管理以及打包发布。
Webpack 一般作为全局的 npm 模块安装：
npm install -g webpack
安装成功后，在命令行输入 webpack -h 即可查看当前安装的版本信息，以及可以使用的指令。直接执行 webpack 命令会默认使用当前目录的 webpack.config.js 作为配置文件。如果要指定另外的配置文件，可以执行：
webpack—configwebpack.custom.config.js
Webpack 可以通过直接命令行来指定参数：
# 命令 入口文件 生成文件webpackentry.jsbundle.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 CommonJsvarcommonjs =require("./commonjs");// or in AMDdefine(["amd-module","../file"],function(amdModule, file){// while previous constructs are sync// this is asyncrequire(["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)varstuff =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$/functionloadTemplate(name){returnrequire("./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 everythingfunctionloadTemplateAsync(name, callback){require(["bundle?lazy!./templates/"+ name +".jade"],function(templateBundle){ templateBundle(callback); });}
更多信息可以参考 webpack 的官方网站。
相关阅读：
以下四篇文章看完并跟着操作就能对 webpack 有个最起码的理解，了解其最基本的使用方式。
webpack入坑之旅（三）webpack.config入门
.vue file
以 .vue 为后缀的文件 - 单文件组件
推荐使用 vue-webpack-simple-boilerplate 这个模板来进行 vuejs 的组件化开发的学习。
命令行安装：
# 全局安装 vue-clinpm install -g vue-cli# 模板名为 webpack-simple（目前官方有 5 个模板可供选择，见上文） # 项目名为 my-project （自定义）# 下面命令执行后会出现几个问题，用于配置你的项目信息，可以一路回车（即采用默认值）vue init webpack-simple my-project# 进入项目目录cdmy-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.
vue-loader
vue-loader 用于 webpack 中，用来对以 .vue （单文件组件）结尾的文件进行处理。
vue-router
vue-router - 单页面应用路由
使用 Vue.js 和 vue-router 创建单页应用非常的简单，使用 Vue.js 开发，整个应用已经被拆分成了独立的组件。在使用 vue-router 时，我们需要做的就是把路由映射到各个组件，vue-router 会把各个组件渲染到正确的地方。
相关阅读：
webpack入坑之旅（六）配合 vue-router 实现 SPA
Vuex
阅读 Vuex 文档，中文版的过时了，尽量阅读英文版的。
Vue 2.0
need-to-insert-img
一张脑图带你认识 Vue 2.0( 来源微博@勾三股四 )
Code Review for Vue 2.0 Preview
框架对比
Vue 视频教程（需科学上网）
最轻松简单的入门教程，可以初步对 Vuejs 的使用有个概念。
An Introduction into Vue.js: Building an Example App
Repository（该视频教程的代码资源文件）
很棒的视频教程，可以最大化的接触到 Vuejs 所能做到的事情，是我当时看到的对我来说最好的 Vuejs 相关视频教程。
Vue Js Tutorial Intro with TodoList
就是对文档里展示的 Todolist 的视频化演示，文档理解了就没必要再看了。
Weather app with VueJS & OpenWeatherMap
Learn how to deal with JSON data with Vue / jQuery
use $.getJSON
随便看看。
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 的时候尤其有用。
相关信息：
资源
加入 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 不错的案例教程
如果你打赏我的话，我会很开心的~~
赞赏支持
© 著作权归作者所有
写了 27680 字，被 330 人关注，获得了 453 个喜欢
是的，我有强迫症 PS: 欢迎关注我的微信订阅号 Alexee Github： https://github.com/SuperAL 掘金： https://juejin.im/user/5735e12e1ea493006420bafb SegmentFault： https://segmentfault.com/u/alexee 开发者头条独家号： https://toutiao.io/subjects/29096
被以下专题收入，发现更多相似内容
Web前端之路
程序员
让前端飞
前端开发那些事
Vue.js 资料
前端
Vue
转载 :OpenDiggawesome-github-vue 是由OpenDigg整理并维护的Vue相关开源项目库集合。我们会定期同步OpenDigg上的项目到这里，也欢迎各位提交项目给我们。 如果收录的项目有错误，可以通过issue反馈给我们。这里的项目Star数不是实时...
果汁密码
javascript 正则表达式总结 - 前端 - 掘金为什么要使用正则表达式 正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验，搜索，替换。在javascript中类似这样 ... 平时自己项目中用到的 CSS - 掘金css有些属性容易忘记，半天不写就...
掘金官方
来源：github.com Vue.js开源项目速查表：https://www.ctolib.com/cheatsheets-vuejs.html UI组件 element ★12468 - 饿了么出品的Vue2的web UI工具套件Vux ★7759 - 基于Vue和We...
zhangtaiwei
如今最现代最成功的目的地旅游网站必须涵盖内容的营销，展示的形象以满足不同消费者的需要，设计上采取移动优先策略，以及使用更多大尺寸照片以及丰富视频内容。 如今选择出我们心目中世界上最好的目的地旅游网站远比2013年更难，更具有挑战性，因为旅游局的网站都在前端上优化了他们的网站...
innoutbound
今晚，月亮特别圆，特别亮。 不喜欢孤独的我却自己一个人走在校园里，走在道路的正中间，两边微微亮的路灯将我的影子拉长，变短，那一刻，感觉整个月亮都是我的。 秋风呼呼而过，一片片树叶跟随风的步伐，旋转，慢慢的，慢慢的，落到地面，一层层叠积，在月光下，泛着黄色的微光。 21岁的年...
明羽繁
我常想，若是我去创作一部长篇小说，我会写什么？我不是一个天马行空，想象力丰富的人，也没经历过跌宕起伏的人生。我的祖辈曾有些传奇，只是年代久远，信息寥寥，即便是写，恐怕也没办法交代清楚。那么我写什么呢？ 前些日子，父亲参加了一次聚会，回来后唏嘘不已。1990年，他所在的乡镇企...
开颜棠棠
毕老师来看我，说老虎吃人的事情发生后她很纠结，晚上没有睡好。 我好奇怪，老虎吃人的事发生了，我没有啥感觉，只有网络上大家都有的认识，不作死不会死。 而且在看了网络上的详细信息后，能感觉到这个人的问题非常大。所以任何事都是有原因的，没有无缘无故的事情发生。 而我对毕老师说，就...
开心的灵通
上个月妈妈来电话跟我说小A离婚了，这太让我惊讶了，足足惊讶了一个星期。小A是我的小学同学，她们夫妇的结合有过波折，当年，听说小A老公脚踏两船。小A的家境属于书香之家，父母教书的，独生女。而另一个女子听说是当官的女儿，家境优越，也是独生女。家境好的这位怀孕了，也许是孕期反应脾...
芳子的平台
网友评论