VUE开发⼼得体会
⼀、前⾔
从事web开发的技术⼯程师，不再只是单纯的只会后端语⾔技术就可以了，还需要掌握前端知识，做⼀些常⽤的页⾯开发，尤其是在⼀些企业应⽤管理系统中。前端技术从最初的html/css/javascript 到jsp/jquery/ajax再到现在流⾏的vue/angular/react等。⼯作中有幸学习到vue技术开发，结合⼯作⼼得以及参考⽹络资料学习特整理此⽂章，作为vue开发的⼀些⼼得体会和总结吧。
⼆、VUE简介
2.1 什么是vue？
jquery是什么功能组件
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 插⼊到页⾯中，此时页⾯会被渲染。
三、VUE环境搭建
3.1 ⽅式
前端使⽤ Vue 框架有两种⽅式：
(1) 简单的页⾯，可以通过<script>引⼊ CDN 资源来使⽤。
(2) 从项⽬可维护和拓展性上看，搭建本地调试环境来构建 Vue 项⽬会更合适。
3.2 直接引⼊ CDN
在前端页⾯中引⼊⼀段 Javascript 代码⽚段，直接引⼊ CDN 的⽅式来使⽤ Vue
<!-- 参考 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="cdn.jsdelivr/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 代码、构建本地测试环境、编译和打包代码、发布到现⽹等等功能。
// 安装脚⼿架
npm install -g @vue/cli
// 脚⼿架⽣成 vue 项⽬，同时会⾃动安装依赖
vue create vue-cli-demo
⽣成之后的代码⽬录：
四、Vue常⽤组件的使⽤
4.1 注册⽅式
为了能在模板中使⽤，这些组件必须先注册以便 Vue 能够识别。Vue 中有两种组件的注册类型：全局注册和局部注册。
局部注册可通过在实例中的components选项进⾏配置：
// 获取组件
import MyComponent from "../components/my-button";
new Vue({
components: { MyComponent }
});
⽽以这种⽅式使⽤组件的时候，则需要在组件⾥通过name选项进⾏命名：
// my-button.vue
new Vue({
name: "my-button"
});
这种⽅式定义的组件，如果也进⾏了全局注册，其命名会以全局注册的名字为准，也就是全局注册的命名优先级更⾼。
4.2 单⽂件组件
⼀个组件是⼀些逻辑和功能完整的代码⽚段组成的，同时也包括了 HTML、CSS 和 Javascript 的代码。在 Vue ⾥，我们常常使⽤单⽂件组件，使⽤.vue 后缀命名的⽂件，⼀般也包括这三部分：
<template>
<!-- 组件模板 -->
</template>
<script>
// 组件逻辑
// 在.vue⽂件中，需要默认export⼀个Vue实例
export default {
name: "MyComponent"
};
</script>
<style>
/* 组件样式 */
</style>
五、组件间通信
5.1 Prop 数据传递
我们会将部分的代码抽象成组件，是因为该部分的内容在别处也有使⽤到，⽽抽象成组件，可以提供更简单的复⽤⽅式。例如常⽤的按钮，我们可以对它进⾏封装。在 Vue 实例的选项中，我们可以⽤⼀个props选项将其包含在该组件可接受的 prop 列表中：
<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 是我们可以在组件上注册的⼀些⾃定义特性，常常⽤于接收来⾃⽗组件的数据/属性值，我们可以直接在需要的地⽅使⽤：
<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 ⽗⼦组件通信

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。