VUE开发心得体会

程序大视界

已于 2023-03-20 22:14:02 修改

阅读量4.6k

点赞数 5

分类专栏：《前端专栏》文章标签： vue.js javascript node.js

于 2021-09-19 17:53:24 首次发布

本文链接：https://blog.csdn.net/xuri24/article/details/120372173

版权

《前端专栏》专栏收录该内容

6 篇文章 1 订阅

订阅专栏

一、前言

从事web开发的技术工程师，不再只是单纯的只会后端语言技术就可以了，还需要掌握前端知识，做一些常用的页面开发，尤其是在一些企业应用管理系统中。前端技术从最初的html/css/javascript 到jsp/jquery/ajax再到现在流行的vue/angular/react等。工作中有幸学习到vue技术开发，结合工作心得以及参考网络资料学习特整理此文章，作为vue开发的一些心得体会和总结吧。

二、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 插入到页面中，此时页面会被渲染。

三、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="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 代码、构建本地测试环境、编译和打包代码、发布到现网等等功能。

// 安装脚手架
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/）就能看到本地的项目跑起来了。

四、Vue常用组件的使用

4.1 注册方式

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。Vue 中有两种组件的注册类型：全局注册和局部注册。

4.1.1 全局注册

全局注册可以通过Vue.component()的方式进行，该方法第一个参数要传入组件的名称，第二个参数传入该组件的选项：

Vue.component("my-button", {
  // 选项
  // 除了 el 以外，组件的选项与 Vue 实例相同
});

4.1.2 局部注册

局部注册可通过在实例中的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 父子组件通信

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。除了父组件给子组件传递数据之外，有时候我们也需要在子组件中和父级组件进行沟通。

在 Vue 中，父级组件可以像处理原生的 DOM 事件一样通过v-on监听子组件实例的任意事件:

<my-button @click="handleClick">自定义按钮</my-button>

六、常用指令

6.1 v-if 系列

<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

<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来设置绑定的值。

<!-- 当选中时，`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>

七、总结

以上介绍了vue的基本知识，从基本介绍到环境搭建和通信方式到常用指令，了解这些基本知识可以对vue前端开发技术有了更清晰的认识和更深入的理解。

参考资料文献：

快手上手

动态组件 & 异步组件 — Vue.jsVue.js - The Progressive JavaScript Frameworkhttps://cli.vuejs.org/zh/guide/