概述

看了几天 Vue 文档了，今天应该实践一下了，做一个个人书签页面，记录自己的常用书签。

书签页构思草图

创建工程

1

vue install webpack "hellovue"

启动预览

1

npm run dev

值得注意的是 npm run dev 实际上执行的是 package.json 中的 script 脚本的如下命令：

1

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

也许你已经猜到了， 这个 webpack.dev.conf.js 文件是配置开发过程中的webpack构建文件。

接下来我们就开始修改 HelloWorld.vue 来实现书签页。

阅读更多

插槽

Vue 中提供插槽来让你替换组件中的部分内容, 例如你定义了一个组件 <navigation-link> :

1
2
3

<a v-bind:href="url" class="nav-link">
  <slot></slot>
</a>

这里的 <slot> 就是可以替换的内容部分，如果你这样使用：

1
2
3

<navigation-link url="/profile">
  Your Profile
</navigation-link>

阅读更多

组件基础

组件是可复用的 Vue 实例， 每个组件都有一个名字，我们可以直接使用名字来引入一个组件。

定义一个名为 button-counter 的新组件:

1
2
3
4
5
6
7
8

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

阅读更多

安装

第一步： 安装 nodejs 环境。

第二步： 配置淘宝 npm 镜像。

1

npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

这样就可以使用cnpm 命令来安装模块了。

安装 vue-cli

1

npm install vue-cli -g 

查看vue-cli是否成功，不能检查vue-cli, 需要检查vue:

1

vue -V 

阅读更多

绑定 style 样式

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

1
2
3

.active{
    color: red;
}

1
2
3

<div id="app">
    <div v-bind:class="{ active: isActive }">我不一定是红色的DIV</div>
</div>

1
2
3
4
5
6

new Vue({
    el: '#app',
    data: {
        isActive: true
    }
})

我不一定是红色的DIV

阅读更多

开始

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

1
2
3
4

<div id="app">
    <p>{{ foo }}</p>
    <button v-on:click="foo = 'baz'">Change it</button>
</div>

1
2
3
4
5
6
7
8
9

<script>
    var obj = {
        foo: 'bar'
    }
    new Vue({
        el: '#app',
        data: obj
    })
</script>

阅读更多

特别说明：本文是转载文章，但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自：https://ustbhuangyi.github.io/vue-analysis/

目录结构

Vue.js 的源码都在 src 目录下，其目录结构如下。

1
2
3
4
5
6
7

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码

compiler

compiler 目录包含 Vue.js 所有编译相关的代码。它包括把模板解析成 ast 语法树，ast 语法树优化，代码生成等功能。

编译的工作可以在构建时做（借助 webpack、vue-loader 等辅助插件）；也可以在运行时做，使用包含构建功能的 Vue.js。显然，编译是一项耗性能的工作，所以更推荐前者——离线编译。

core

core 目录包含了 Vue.js 的核心代码，包括内置组件、全局 API 封装，Vue 实例化、观察者、虚拟 DOM、工具函数等等。

这里的代码可谓是 Vue.js 的灵魂，也是我们之后需要重点分析的地方。

阅读更多

特别说明：本问是转载文章，但是可能会在原文基础上新增注释和修改或附加自己的理解。

本文转载自：https://ustbhuangyi.github.io/vue-analysis/

Flow 是 facebook 出品的 JavaScript 静态类型检查工具。Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码。

为什么用 Flow

JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于灵活的副作用是很容易就写出非常隐蔽的隐患代码，在编译期甚至看上去都不会报错，但在运行阶段就可能出现各种奇怪的 bug。类型检查是当前动态类型语言的发展趋势，所谓类型检查，就是在编译期尽早发现（由类型错误引起的）bug，又不影响代码运行（不需要运行时动态检查类型），使编写 JavaScript 具有和编写 Java 等强类型语言相近的体验。项目越复杂就越需要通过工具的手段来保证项目的维护性和增强代码的可读性。 Vue.js 在做 2.0 重构的时候，在 ES2015 的基础上，除了 ESLint 保证代码风格之外，也引入了 Flow 做静态类型检查。之所以选择 Flow，主要是因为 Babel 和 ESLint 都有对应的 Flow 插件以支持语法，可以完全沿用现有的构建配置，非常小成本的改动就可以拥有静态类型检查的能力。

阅读更多