Vue 学习笔记

Vue 简介

Vue 的 官方说明

关于 Vue 的作者

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

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

Vue 的基本用法

下载使用（两种方式）

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

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

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

Vue 的使用教程

针对相关问题的解决方法：

[v-cloak] {    display: none; }

<div v-cloak>   {{ message }} </div>

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

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

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

对于 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 的组件化实践

• 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 主要特性如下：

• 同时支持 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 的 官方网站 。

相关阅读：

深入浅出React（二）：React开发神器Webpack

.vue file

命令行安装：

# 全局安装 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.

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

vue-loader

vue-router

阅读 vue-router 文档

Vuex

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

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（热加载）

资源