原创不易，且行且珍惜”
01
—
前言
从事web开发的技术工程师，不再只是单纯的只会后端语言技术就可以了，还需要掌握前端知识，做一些常用的页面开发，尤其是在一些企业应用管理系统中。前端技术从最初的html/css/javascript 到jsp/jquery/ajax再到现在流行的vue/angular/react等。工作中有幸学习到vue技术开发，结合工作心得以及参考网络资料学习特整理此文章，作为vue开发的一些心得体会和总结吧。
02
—
VUE简介
2.1 什么是vue？
vue是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整。
渐进式表现：声明式渲染—组件系统—客户端路由—大数据状态管理—构建工具。
2.2 模板引擎
模板引擎大概是 Vue 里最主要、又最核心的一个能力。前面也讲到，在模板引擎还没有出现的时候，前端需要手动更新前端页面的内容，需要维护一大堆的 HTML 和变量拼接的动态内容，虽然 jQuery 的出现提升了 DOM 元素的操作性，但依然难以避免代码的可读性、可维护性上存在的一些问题。
以前我们更新页面的内容，大概的流程是：监听操作 -> 获取数据变量 -> 使用数据拼接成 HTML 模板 -> 将 HTML 内容塞到页面对应的地方 -> 将 HTML 片段内需要监听的点击等事件进行绑定。
这么复杂的逻辑，如今使用 Vue，就可以方便地在模板里用插值表达式{{}}、v-bind绑定变量来展示，同时配合v-if、v-for这些内置指令，就可以很方便地写出可读性和维护性都很不错的代码了。什么是插值表达式？什么是指令？这些我们会放在后面的章节里介绍。这里我们主要来介绍下 Vue 框架做了什么事情，这里先讲一下数据绑定。
在 Vue 里渲染一块内容，一般会有以下流程：
(1) 解析语法生成 AST。
(2) 根据 AST 结果，完成 data 数据初始化。
(3) 根据 AST 结果和 data 数据绑定情况，生成虚拟 DOM。
(4) 将虚拟 DOM 生成真正的 DOM 插入到页面中，此时页面会被渲染。
03
—
VUE环境搭建
3.1 方式
前端使用 Vue 框架有两种方式：
(1) 简单的页面，可以通过<script>引入 CDN 资源来使用。
(2) 从项目可维护和拓展性上看，搭建本地调试环境来构建 Vue 项目会更合适。
3.2 直接引入 CDN
在前端页面中引入一段 Javascript 代码片段，直接引入 CDN 的方式来使用 Vue
代码语言：javascript复制<!-- 参考 code/2/1-import-cdn.html 文件 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Vue直接引入Script资源</title>
<!-- 引入 CDN 资源 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
// 初始化 Vue 实例
new Vue({
el: "#app",
data() {
return {
message: "欢迎来到Vue的世界"
};
}
});
</script>
</body>
</html>浏览器在解析了 Vue 框架的代码并执行之后，我们通过new Vue()启动了一个 Vue 根实例，而<div id="app"></div>中使用双括号{{}}绑定的message变量也被替换成了对应的值。
3.3 Vue CLI 脚手架
使用 Vue 框架，脚手架一般会优先选择官方提供的 Vue CLI，Vue CLI 其实也是基于 Webpack 封装的便捷脚手架。
有了脚手架，我们可以通过简单的命令就能快速生成 Demo 代码、构建本地测试环境、编译和打包代码、发布到现网等等功能。
代码语言：javascript复制// 安装脚手架
npm install -g @vue/cli
// 脚手架生成 vue 项目，同时会自动安装依赖
vue create vue-cli-demo生成之后的代码目录：
3.4 启动项目
使用npm来运行启动项目，npm run serve来运行。一般来说，开发环境是dev、serve等，生产环境是build，scripts里是一些任务，运行命令 npm run dev/serve就可以启动了。
这里以笔者本地启动的项目为例，运行命令 npm run dev后访问输出的地址（这里是http://localhost:9200/或者 http://192.168.1.101:9200/）就能看到本地的项目跑起来了。
04
—
VUE常用组件的使用
4.1 注册方式
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。Vue 中有两种组件的注册类型：全局注册和局部注册。
4.1.1 全局注册
全局注册可以通过Vue.component()的方式进行，该方法第一个参数要传入组件的名称，第二个参数传入该组件的选项：
代码语言：javascript复制Vue.component("my-button", {
// 选项
// 除了 el 以外，组件的选项与 Vue 实例相同
});4.1.2 局部注册
局部注册可通过在实例中的components选项进行配置：
代码语言：javascript复制// 获取组件
import MyComponent from "../components/my-button";
new Vue({
components: { MyComponent }
});而以这种方式使用组件的时候，则需要在组件里通过name选项进行命名：
代码语言：javascript复制// my-button.vue
new Vue({
name: "my-button"
});这种方式定义的组件，如果也进行了全局注册，其命名会以全局注册的名字为准，也就是全局注册的命名优先级更高。
4.2 单文件组件
一个组件是一些逻辑和功能完整的代码片段组成的，同时也包括了 HTML、CSS 和 Javascript 的代码。在 Vue 里，我们常常使用单文件组件，使用.vue 后缀命名的文件，一般也包括这三部分：
代码语言：javascript复制<template>
<!-- 组件模板 -->
</template>
<script>
// 组件逻辑
// 在.vue文件中，需要默认export一个Vue实例
export default {
name: "MyComponent"
};
</script>
<style>
/* 组件样式 */
</style>05
—
组件间通信
5.1 Prop 数据传递
我们会将部分的代码抽象成组件，是因为该部分的内容在别处也有使用到，而抽象成组件，可以提供更简单的复用方式。例如常用的按钮，我们可以对它进行封装。在 Vue 实例的选项中，我们可以用一个props选项将其包含在该组件可接受的 prop 列表中：
代码语言：javascript复制<template>
<button
class="my-button"
@click="handleClick"
:disabled="disabled || loading"
:type="type"
:class="[
type ? 'my-button--' type : '',
buttonSize ? 'my-button--' buttonSize : '',
{
'is-disabled': disabled,
'is-loading': loading
}
]"
>
<i class="el-icon-loading" v-if="loading"></i>
<i :class="icon" v-if="icon && !loading"></i>
<span v-if="$slots.default"><slot></slot></span>
</button>
</template>
<script>
export default {
name: "MyButton",
props: {
// 按钮类型，如info、warn、error等
type: {
type: String,
default: "default"
},
// icon类型，匹配样式
icon: {
type: String,
default: ""
},
loading: Boolean, // 是否在加载中
disabled: Boolean // 是否不可用
},
methods: {
// 点击触发click事件
handleClick(evt) {
this.$emit("click", evt);
}
}
};
</script>可以看到，该组件封装了按钮类型、图标和状态，通过 prop 提供给外部配置使用。Prop 是我们可以在组件上注册的一些自定义特性，常常用于接收来自父组件的数据/属性值，我们可以直接在需要的地方使用：
代码语言：javascript复制<my-button>原按钮</my-button>
<!-- 可以像这样给 prop 传入一个静态的值 -->
<my-button type="info" icon="config">提示样式按钮（带管理图标）</my-button>
<!-- 也可以通过 v-bind 动态赋值 -->
<my-button type="info" :loading="true">提示样式按钮（加载中）</my-button>
<my-button type="error" :disabled="true">错误样式按钮（不可用）</my-button>一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
5.2 父子组件通信
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。除了父组件给子组件传递数据之外，有时候我们也需要在子组件中和父级组件进行沟通。
在 Vue 中，父级组件可以像处理原生的 DOM 事件一样通过v-on监听子组件实例的任意事件:
代码语言：javascript复制<my-button @click="handleClick">自定义按钮</my-button>06
—
常用指令
6.1 v-if 系列
代码语言：javascript复制<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Default Type</div>6.2 key
代码语言：javascript复制<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>6.3 表单绑定 v-model
v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。实际上v-model是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
使用 Tips
当v-model使用在多选或者选择框上时，需要注意的是：
(1) 多选时，v-model会绑定到一个数组。
(2) 对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串。
(3) 复选框可以使用true-value和false-value来设置绑定的值。
代码语言：javascript复制<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a" />
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle" />
<!-- `toggle` 为 'yes' 或 'no' -->
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" />
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>07
—
总结
以上介绍了vue的基本知识，从基本介绍到环境搭建和通信方式到常用指令，了解这些基本知识可以对vue前端开发技术有了更清晰的认识和更深入的理解。
