Vue 简介

提示：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

相干信息：
和 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 将项目中用到的统统静态资本都视之为模块，模块之间能够相互依靠。Webpack 对它们举行一致的治理以及打包宣布。

Webpack 重要特征以下：

• 同时支撑 CommonJS 和 AMD 模块（关于新项目，引荐直接运用 CommonJS）；

• 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩大性，比方供应对 CoffeeScript、ES6 的支撑；

• 能够基于设置或许智能剖析打包成多个文件，完成大众模块或许按需加载；

• 支撑对 CSS，图片等资本举行打包，从而无需借助 Grunt 或 Gulp；

• 开辟时在内存中完成打包，机能更快，完全能够支撑开辟历程的及时打包需求；

• 对 sourcemap 有很好的支撑，易于调试。

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

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 的运用有个观点。

2. An Introduction into Vue.js: Building an Example App
   Repository（该视频教程的代码资本文件）很棒的视频教程，能够最大化的接触到 Vuejs 所能做到的事变，是我当时看到的对我来讲最好的 Vuejs 相干视频教程。

3. Vue Js Tutorial Intro with TodoList
   就是对文档里展现的 Todolist 的视频化演示，文档明白了就没必要再看了。

4. Weather app with VueJS & OpenWeatherMap
   随意看看。

5. 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 不错的案例教程

简书传送门，迎接关注我的简书博客哦~