【Vue 入门】使用 Vue2 开发一个展示项目列表的应用

深碍√TFBOYSˉ_ 2022-03-30 12:08 257阅读 0赞

## 目录 ##

*  [前言][Link 1]
 *  [效果][Link 2]
 *  [环境配置][Link 3]
    
     *  [Gulp 和 Webpack 集成][Gulp _ Webpack]
     *  [Gulp 配置][Gulp]
     *  [Webpack 配置][Webpack]
 *  [Vue][]
    
     *  [HelloWorld][]
     *  [基础][Link 4]
     *  [组件][Link 5]
 *  [ES6][]
    
     *  [let][]
     *  [for of 循环][for of]
     *  [Set 和 Map][Set _ Map]
 *  [参考文章][Link 6]

## 前言 ##

一直没有找到一个合适的展示个人项目的模板，所以自己动手使用 Vue 写了一个。该模板基于 Markdown 文件进行配置，只需要按一定规则编写 Markdown 文件，然后使用一个 [在线工具][Link 7] 转为 JSON 文件即可。下面是该项目的在线地址和源码。本文主要记录一下项目中用到的相关知识。

[在线演示][Link 8] [源码][Link 9]

## 效果 ##

程序最终的效果如下图所示：

![690323-20170428102936897-404987417.png][]

整个项目只包含两个组件：项目介绍 和 侧边导航，逻辑比较简单，十分适合入门。

## 环境配置 ##

这里我们使用 Gulp 和 Webpack 用作项目构建工具。初次使用 Gulp 和 Webpack 可能不太适应，因为它们的配置可能让你看的一头雾水。不过不用担心，这两个毕竟只是一个工具，在初始时没有必要特别的了解它们的工作原理，只要能运行起来就可以。等到使用了一段时间之后，自然而然的就知道该如何配置了。这里主要记录一下项目中使用的配置，如果想要系统的学习如何使用这两个工具，可以参考下面的文章：

*  [Gulp入门教程][Gulp 1]
 *  [一小时包教会 —— webpack 入门指南][_ webpack]

### Gulp 和 Webpack 集成 ###

Gulp 和 Webpack 集成一个比较简单的方式就是将 Webpack 作为 Gulp 的一个 task，如下面的形式：

下面我们分别介绍一下 gulp 和 webpack 的配置

### Gulp 配置 ###

Gulp 中主要配置了两个任务：webpack 和 browserSync，这里主要说一下 browserSync。browserSync 主要用来自动刷新浏览器。首先我们配置需要监听的文件，当这些文件发生改变后，调用 browserSync 使浏览器自动刷新页面。下面是具体的配置

### Webpack 配置 ###

我们使用 webpack 进行资源打包的工作，就是说将各种资源（css、js、图片等）交给 Webpack 进行管理，它会将资源整合压缩，我们在页面中只需引用压缩之后的文件即可。webpack 的基础配置文件如下所示

gulp.task("webpack", function (callback) { //webpack配置文件 var config = { // true 表示 监听文件的变化 watch: true, // 加载的插件项 plugins: [ new ExtractTextPlugin("../css/[name].css") ], // 入口文件配置 entry: { index: __dirname + '/src/js/index.js' }, // 输出文件配置 output: { path: __dirname + '/dist/js', filename: '[name].js' }, module: { // 加载器配置，它告诉 Webpack 每一种文件需要采用什么加载器来处理， // 只有配置好了加载器才能处理相关的文件。 // test 用来测试是什么文件，loader 表示对应的加载器 loaders: [ { test: /\.vue$/, loader: 'vue-loader'} ] }, resolve: { // 模块别名定义，方便后续直接引用别名，无须多写长长的地址 // 例如下面的示例，使用时只需要写 import Vue from "vue" alias: { vue: path.join(__dirname, "/node_modules/vue/dist/vue.min.js") }, // 自动扩展文件后缀名，在引入文件时只需写文件名，而不用写后缀 extensions: ['.js', '.json', '.less', '.vue'] } }; webpack(config, function (err, stats) { console.log(stats.toString()); }); });

webpack 的相关配置说明可以参考前面的给出的文章，下面说一下使用 webpack 2 遇到的坑：

#### extract-text-webpack-plugin ####

extract-text-webpack-plugin 会将 css 样式打包成一个独立的 css 文件，而不是直接将样式打包到 js 文件中。下面是使用方法

{
        plugins: [new ExtractTextPlugin("../css/[name].css")], module: { loaders: [{ test: /\.css$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) }, { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!less-loader" }) } }, }

这里需要注意的地方就是，extract-text-webpack-plugin 在 webpack 1 和 webapck 2 中的安装方式不同，需要根据使用的 webpack 版本来安装：

# for webpack 1
    npm install --save-dev extract-text-webpack-plugin
    # for webpack 2
    npm install --save-dev extract-text-webpack-plugin@beta

#### 压缩文件 ####

使用 UglifyJsPlugin 插件可以压缩 css 和 js 文件，但是一开始时总是无法压缩文件，后来查阅了一下资料，大概是因为下面几个原因：

1.  uglifyjs-webpack-plugin 依赖于 uglify-js，而 uglify-js 默认不支持 ES6 语法，所以需要安装支持 ES6 语法的 uglify-js  
    `npm install mishoo/UglifyJS2#harmony --save`
2.  webpack 2 中，UglifyJsPlugin 默认不压缩 loaders，如果要启动 loaders 压缩，需要加入下面的配置：  
    `js plugins: [ new webpack.LoaderOptionsPlugin({ minimize: true }) ]`

如果按上面的修改了还是不能压缩文件，可以试着将 node\_modules 删除，然后重新安装依赖。

## Vue ##

本部分主要记录一下程序中用到的 Vue 语法，如果想要系统的学习一下 Vue.js，可以参考下面的文章：

*  [Vue.js 教程][Vue.js]

### HelloWorld ###

我们首先来看一个最简单的 Vue 示例：

每个 Vue 应用都会创建一个 Vue 的根实例，在根实例中需要传入 html 标签的 id，用来告诉 Vue 该标签中的内容需要被 Vue 来解析。上面是一个简单的数据绑定的示例，在运行实 \{ \{ message \}\} 会被解析为 "Hello Vue!"。

### 基础 ###

> 本节参考自 Vue 中文文档，略有修改

在写 Vue 应用之前，我们要熟悉一下 Vue 的基本语法，主要包括数据绑定、事件处理、条件、循环等，下面我们依次看下相关的知识。

#### 数据绑定 ####

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。下面是 Vue.js 数据绑定的相关语法：

*  **文本**  
    数据绑定最常见的形式就是使用 "Muestache" 语法（双大括号），如下面的形式：
    
        <span>Message: {
                   { msg }} </span>
    
    Muestache 标签会被解析为对应对象上的 msg 属性值。当 msg 属性发生改变之后，Muestache 标签处解析的内容也会随着更新。
    
    通过使用 `v-once` 指令，我们可以执行一次性解析，即数据改变时，解析的内容不会随着更新。需要注意的是 `v-once` 会影响该节点上的所有数据绑定
    
        <span v-once>This will never change: { { msg }}</span>
 *  **Raw HTML**  
    不论属性值是什么内容，Muestache 标签里的内容都会被解析为纯文本。如果希望将绑定的值解析为 HTML 格式，就需要使用 `v-html` 指令：
    
        <div v-html="variable"></div>
 *  **属性值**  
    Mustache 语法不能用在 HTML 的属性中，如果想为属性绑定变量，需要使用 `v-bind` 指令：
    
        <div v-bind:id="dynamicId"></div>
    
    假设 `dynamicId=1`，那么上面代码就会被解析为
    
        <div id="1"></div>
    
    另外 `v-bind` 指令可以被缩写为 `:`，所以我们在程序中经常看到的是下面的语法形式：
    
        <div :id="dynamicId"></div>  <div v-bind:id="dynamicId"></div>
 *  **表达式**  
    对于所有的数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持，如下面的形式：
    
        // 加法
        {
                { number + 1 }}
        
        // 三元表达式
        {
                { ok ? 'YES' : 'NO' }}
        
        // JS 库函数
        {
                { message.split('').reverse().join('') }}
        
        // 指令中使用表达式
        <div v-bind:id="'list-' + id"></div>

#### 事件处理 ####

通过使用 `v-on` 指令可以监听 DOM 事件来触发 JS 处理函数，下面是一个完整的示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Demo</title> </head> <body> <script src="https://unpkg.com/vue/dist/vue.js"></script> <div id="app"> <button v-on:click="increase">增加 1</button> <p>这个按钮被点击了 { { counter }} 次。</p> </div> <script> var app = new Vue({ el: '#app', data: { counter: 0 }, methods: { increase: function() { this.counter++; } } }) </script> </body> </html>

通常情况下，`v-on` 会被简写为 `@`，所以我们在程序中一般是看到下面的形式

#### 条件指令 v-if ####

通过 v-if 指令我们可以根据某些条件来决定是否渲染内容，如下面的形式

我们通常将 v-if 和 v-else 结合起来使用，如下所示：

在 Vue 2.1.0 中新增了一个 v-else-if 指令，可以进行链式判断：

#### 循环指令 v-for ####

通过 `v-for` 指令，我们可以根据一组数据进行迭代渲染，下面是一个基本示例：

<ul id="example-1"> <li v-for="item in items"> { { item.message }} </li> </ul>

var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })

上面是一个简单的对数组迭代的示例，我们还可以针对对象进行迭代，如果只使用一个参数，就是针对对象的属性值进行迭代：

<ul id="repeat-object" class="demo"> <li v-for="value in object"> { { value }} </li> </ul>

如果传入第二个参数，就是针对对象的属性值以及属性名进行迭代，注意这里二个参数表示的是属性名，也就是 key

<div v-for="(value, key) in object"> { { key }} : { { value }} </div>

如果再传入第三个参数，第三个参数就表示索引

<div v-for="(value, key, index) in object"> { { index }}. { { key }} : { { value }} </div>

### 组件 ###

组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML元素，封装可重用的代码。在我们的程序中包含两个组件：project 组件和 sidebar 组件，如下图所示。这里我们主要介绍单文件组件的使用，即将组件用到 html、js 和 css 都写在一个文件里，每个组件自成一个系统。

![690323-20170428103031553-1874132945.png][]

#### 文件结构 ####

单文件组件一般使用 ".vue" 作为后缀名，一般的文件结构如下所示：

> project.vue

<template>
        <div> { { key }} </div> </template> <script> export default { data: function() { return { "key": "value" } }, methods: { demoMethod: function() { } } } </script> <style lang="less"> @import "xxx.less"; </style>

export 将模块输出，default 表明使用文件名作为模块输出名，这就类似于将模块在系统中注册一下，然后其他模块才可用使用 import 引用该模块。

然后我们需要在主文件中注册该组件：

> index.js

import project from '../components/project/project.vue' Vue.component("project", project);

当注册完成之后，就可以 html 中使用该组件了

> index.html

#### 生命周期 ####

Vue 的要给组件会经历 创建 -> 编译 -> 挂载 -> 卸载 -> 销毁 等一系列事件，这些事件发生的前后都会触发一个相关的钩子（hook）函数，通过这些钩子函数，我们可以在事件发生的前后做一些操作，下面先看下官方给出的一个 Vue 对象的生命周期图，其中红框内标出的就是对应的钩子函数

![690323-20170428103050803-1730945702.png][]

下面是关于这些钩子函数的解释：

<table> 
 <thead> 
  <tr> 
   <th align="left">hook</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">beforeCreate</td> 
   <td align="left">组件实例刚被创建，组件属性计算之前</td> 
  </tr> 
  <tr> 
   <td align="left">created</td> 
   <td align="left">组件实例创建完成，属性已绑定，但是 DOM 还未生成，&nbsp;<code>$el</code>&nbsp;属性还不存在</td> 
  </tr> 
  <tr> 
   <td align="left">beforeMount</td> 
   <td align="left">模板编译/挂载之前</td> 
  </tr> 
  <tr> 
   <td align="left">mounted</td> 
   <td align="left">模板编译/挂载之后</td> 
  </tr> 
  <tr> 
   <td align="left">mounted</td> 
   <td align="left">模板编译/挂载之后（不保证组件已在 document 中）</td> 
  </tr> 
  <tr> 
   <td align="left">beforeUpdate</td> 
   <td align="left">组件更新之前</td> 
  </tr> 
  <tr> 
   <td align="left">updated</td> 
   <td align="left">组件更新之后</td> 
  </tr> 
  <tr> 
   <td align="left">activated</td> 
   <td align="left">for&nbsp;<code>keep-alive</code>，组件被激活时调用</td> 
  </tr> 
  <tr> 
   <td align="left">deactivated</td> 
   <td align="left">for&nbsp;<code>keep-alive</code>，组件被移除时调用</td> 
  </tr> 
  <tr> 
   <td align="left">beforeDestory</td> 
   <td align="left">组件销毁前调用</td> 
  </tr> 
  <tr> 
   <td align="left">destoryed</td> 
   <td align="left">组件销毁后调用</td> 
  </tr> 
 </tbody> 
</table>

下面是钩子函数的使用方法：

export default { created: function() { console.log("component created"); }, data {}, methods: {} }

#### 父子组件通信 ####

父子组件通信可以使用 props down 和 events up 来描述，父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息，下面示意图：

![690323-20170428103112303-1940958718.png][]

> 图片来自 [https://github.com/webplus/blog/issues/10][https_github.com_webplus_blog_issues_10]

##### 父组件向子组件传递数据 #####

通过使用 props，父组件可以把数据传递给子组件，这种传递是单向的，当父组件的属性发生变化时，会传递给子组件，但是不会反过来。下面是一个示例

> comp.vue

<template>
        <span>{ { message }}{ { shortMsg }}</span> </template> <script> export default { props: ["message", "shortMsg"], } </script>

> index.html

<div id="app">  <comp :message="hello" :short-msg = "hi"></comp> </div> <script> var app = new Vue({ el: '#app', data: { "hello": "Hello", "hi": "Hi" } }) </script>

在上面的流程中，父组件首先将要传递的数据绑定到子组件的属性上，然后子组件在 props 中声明与绑定属性相同的变量名，就可以使用该变量了，需要注意的一点是如果变量采用驼峰的命名方式，在绑定属性时，就要将驼峰格式改为 `-` 连接的形式，如果上面所示 `shortMsg` \-> `short-msg`。

##### 子组件向父组件通信 #####

如果子组件需要把信息传递给父组件，可以使用自定义事件：

1.  使用 $on(eventName) 监听事件
2.  使用 $emit(eventName) 触发事件

下面是一个示例：

> comp.vue

> index.html

<div id="app"> <comp @child_change="childChange"></comp> </div> <script> var app = new Vue({ el: '#app', methods: { childChange: function(msg) { console.log("child change", msg); } } }); </script>

在上面的代码中，父组件通过 `v-on` 绑定了 child\_chagne 事件，当 child\_chagne 事件被触发时候就会调用 childChange 方法。在子组件中可以通过 `$emit` 触发 child\_change 事件。这里需要注意的是事件名不用采用驼峰命名，也不要用 `-` 字符，可以使用下划线 `_` 连接单词。

#### Event Bus 通信 ####

Event Bus 通信模式是一种更加通用的通信方式，它既可以用于父子组件也可以用于非父子组件。它的原理就是使用一个空的 Vue 实例作为中央事件总线，通过自定义事件的监听和触发，来完成通信功能，下面是一个示意图：

![690323-20170428103135709-429534162.jpg][]

> 图片来自 [https://github.com/webplus/blog/issues/10][https_github.com_webplus_blog_issues_10]

下面我们来看一个具体的实例：

*  首先定义一个空的 Vue 实例，作为事件总线
    
    > EventBus.js
    
        import Vue from 'vue' export default new Vue()
 *  在组件一中针对某个事件进行监听
    
    > comp1.vue
    
        <script> import eventBus from "EventBus.js" export default { created: function() { eventBus.$on("change", function() { console.log("change"); }) } } </script>
 *  在组件二中触发相应事件完成通信
    
    > comp2.vue
    
        <script> import eventBus from "EventBus.js" export default { methods: { notice: function() { this.$emit('change', "value"); } } } </script>

## ES6 ##

> 本节摘自 ECMAScript 6 入门

与 ES5 相比，ES6 提供了更加完善的功能和语法，程序中我们使用部分 ES6 语法，这里做一个简单的记录，如果想要系统的学习 ES6，可以参考下面的文章：

*  [ECMAScript 6 入门][ECMAScript 6]

### let ###

ES6 新增了 let 命令，用于声明变量。使用 let 声明的变量具有块级作用域，所以在声明变量时，应该使用 let，而不是 var。

{
      let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1

### for of 循环 ###

ES6 借鉴 C++、Java、C\# 和 Python 语言，引入了for...of循环，作为遍历所有数据结构的统一的方法

const arr = ['red', 'green', 'blue']; for(let v of arr) { console.log(v); // red green blue }

### Set 和 Map ###

ES6 引入了 Set 和 Map 结构。下面是两者的具体介绍

#### Set ####

> 属性

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Set.prototype.size</td> 
   <td align="left">返回Set实例的成员总数。</td> 
  </tr> 
 </tbody> 
</table>

> 方法

<table> 
 <thead> 
  <tr> 
   <th align="left">方法名</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">add(value)</td> 
   <td align="left">添加某个值，返回Set结构本身。</td> 
  </tr> 
  <tr> 
   <td align="left">delete(value)</td> 
   <td align="left">删除某个值，返回一个布尔值，表示删除是否成功。</td> 
  </tr> 
  <tr> 
   <td align="left">has(value)</td> 
   <td align="left">返回一个布尔值，表示该值是否为Set的成员。</td> 
  </tr> 
  <tr> 
   <td align="left">clear()</td> 
   <td align="left">清除所有成员，没有返回值。</td> 
  </tr> 
  <tr> 
   <td align="left">&nbsp;</td> 
   <td align="left">&nbsp;</td> 
  </tr> 
  <tr> 
   <td align="left">keys()</td> 
   <td align="left">返回键名的遍历器</td> 
  </tr> 
  <tr> 
   <td align="left">values()</td> 
   <td align="left">返回键值的遍历器</td> 
  </tr> 
  <tr> 
   <td align="left">entries()</td> 
   <td align="left">返回键值对的遍历器</td> 
  </tr> 
  <tr> 
   <td align="left">forEach()</td> 
   <td align="left">使用回调函数遍历每个成员</td> 
  </tr> 
 </tbody> 
</table>

使用示例：

const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); }

#### Map ####

> 属性

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Map.prototype.size</td> 
   <td align="left">返回 Map 实例的成员总数。</td> 
  </tr> 
 </tbody> 
</table>

> 方法

<table> 
 <thead> 
  <tr> 
   <th align="left">方法名</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">set(key, value)</td> 
   <td align="left">set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。</td> 
  </tr> 
  <tr> 
   <td align="left">get(key)</td> 
   <td align="left">读取 key 对应的键值，如果找不到 key，返回 undefined。</td> 
  </tr> 
  <tr> 
   <td align="left">has(key)</td> 
   <td align="left">返回一个布尔值，表示某个键是否在当前 Map 对象之中。</td> 
  </tr> 
  <tr> 
   <td align="left">delete(key)</td> 
   <td align="left">删除某个键，返回true。如果删除失败，返回false。</td> 
  </tr> 
  <tr> 
   <td align="left">clear()</td> 
   <td align="left">清除所有成员，没有返回值。</td> 
  </tr> 
  <tr> 
   <td align="left">&nbsp;</td> 
   <td align="left">&nbsp;</td> 
  </tr> 
  <tr> 
   <td align="left">keys()</td> 
   <td align="left">返回键名的遍历器</td> 
  </tr> 
  <tr> 
   <td align="left">values()</td> 
   <td align="left">返回键值的遍历器</td> 
  </tr> 
  <tr> 
   <td align="left">entries()</td> 
   <td align="left">返回所有成员的遍历器</td> 
  </tr> 
  <tr> 
   <td align="left">forEach()</td> 
   <td align="left">遍历 Map 的所有成员。</td> 
  </tr> 
 </tbody> 
</table>

使用示例：

const m = new Map(); const o = { p: 'Hello World'}; m.set(o, 'content') m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false

## 参考文章 ##

*  [Vue 2.0 升（cai）级（keng）之旅][Vue 2.0 _cai_keng]
 *  [Vue 2.0开发实践（组件间通讯）][https_github.com_webplus_blog_issues_10]
 *  [Vuejs2.0 组件通讯总结][Vuejs2.0]

http://www.cnblogs.com/zhangjk1993/p/6780484.html

[Link 1]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label0
[Link 2]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label1
[Link 3]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label2
[Gulp _ Webpack]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label2_0
[Gulp]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label2_1
[Webpack]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label2_2
[Vue]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label3
[HelloWorld]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label3_0
[Link 4]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label3_1
[Link 5]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label3_2
[ES6]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label4
[let]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label4_0
[for of]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label4_1
[Set _ Map]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label4_2
[Link 6]: http://www.cnblogs.com/zhangjk1993/p/6780484.html#_label5
[Link 7]: http://project.zhangjikai.com/generator/
[Link 8]: http://project.zhangjikai.com/
[Link 9]: https://github.com/zhangjikai/project-list-template
[690323-20170428102936897-404987417.png]: /images/20220330/caa5f685664d4ffcae12d212d08301a9.png
[Gulp 1]: https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/
[_ webpack]: http://www.cnblogs.com/vajoy/p/4650467.html
[Vue.js]: https://cn.vuejs.org/v2/guide/
[690323-20170428103031553-1874132945.png]: /images/20220330/4c1bd0dd5e7f418ebf7d957f6fb182d3.png
[690323-20170428103050803-1730945702.png]: /images/20220330/42b86b976de64fbd9c8d9b23ee2d4791.png
[690323-20170428103112303-1940958718.png]: /images/20220330/db343d80658b4eea94474a2e82c4fb86.png
[https_github.com_webplus_blog_issues_10]: https://github.com/webplus/blog/issues/10
[690323-20170428103135709-429534162.jpg]: /images/20220330/2c82334c41dd464683d8f0c122182030.png
[ECMAScript 6]: http://es6.ruanyifeng.com/
[Vue 2.0 _cai_keng]: https://discipled.me/posts/troubleshooting-of-upgrading-vue
[Vuejs2.0]: http://blog.csdn.net/DeNan_Kong/article/details/68490836