不会Vue的Java程序员不是好的架构师

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

01前言


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

02VUE简介


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

03VUE环境搭建


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

生成之后的代码目录:

c0704530df839e338ec2990cda22b054_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

3.4 启动项目

使用npm来运行启动项目,npm run serve来运行。一般来说,开发环境是dev、serve等,生产环境是build,scripts里是一些任务,运行命令 npm run dev/serve就可以启动了。

15d89f2f7f3b3770a25556f5c4d77324_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

这里以笔者本地启动的项目为例,运行命令 npm run dev后访问输出的地址(这里是http://localhost:9200/或者 http://192.168.1.101:9200/)就能看到本地的项目跑起来了。

04VUE常用组件的使用


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.vuenew Vue({  name: "my-button"});

这种方式定义的组件,如果也进行了全局注册,其命名会以全局注册的名字为准,也就是全局注册的命名优先级更高。

4.2 单文件组件

一个组件是一些逻辑和功能完整的代码片段组成的,同时也包括了 HTML、CSS 和 Javascript 的代码。在 Vue 里,我们常常使用单文件组件,使用.vue 后缀命名的文件,一般也包括这三部分:

<template>  <!-- 组件模板 --></template>
<script>  // 组件逻辑  // 在.vue文件中,需要默认export一个Vue实例  export default {    name: "MyComponent"  };</script>
<style>  /* 组件样式 */</style>

05组件间通信


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>

06常用指令


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>

07总结


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

相关实践学习
Serverless极速搭建Hexo博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
相关文章
|
1月前
|
Java 程序员
JAVA程序员的进阶之路:掌握URL与URLConnection,轻松玩转网络资源!
在Java编程中,网络资源的获取与处理至关重要。本文介绍了如何使用URL与URLConnection高效、准确地获取网络资源。首先,通过`java.net.URL`类定位网络资源;其次,利用`URLConnection`类实现资源的读取与写入。文章还提供了最佳实践,包括异常处理、连接池、超时设置和请求头与响应头的合理配置,帮助Java程序员提升技能,应对复杂网络编程场景。
58 9
|
23天前
|
SQL 存储 Java
面向 Java 程序员的 SQLite 替代品
SQLite 是轻量级数据库,适用于小微型应用,但其对外部数据源支持较弱、无存储过程等问题影响了开发效率。esProc SPL 是一个纯 Java 开发的免费开源工具,支持标准 JDBC 接口,提供丰富的数据源访问、强大的流程控制和高效的数据处理能力,尤其适合 Java 和安卓开发。SPL 代码简洁易懂,支持热切换,可大幅提高开发效率。
|
1月前
|
SQL Java 程序员
倍增 Java 程序员的开发效率
应用计算困境:Java 作为主流开发语言,在数据处理方面存在复杂度高的问题,而 SQL 虽然简洁但受限于数据库架构。SPL(Structured Process Language)是一种纯 Java 开发的数据处理语言,结合了 Java 的架构灵活性和 SQL 的简洁性。SPL 提供简洁的语法、完善的计算能力、高效的 IDE、大数据支持、与 Java 应用无缝集成以及开放性和热切换特性,能够大幅提升开发效率和性能。
|
2月前
|
IDE Java 程序员
C++ 程序员的 Java 指南
一个 C++ 程序员自己总结的 Java 学习中应该注意的点。
24 5
|
1月前
|
JavaScript Java 项目管理
Java毕设学习 基于SpringBoot + Vue 的医院管理系统 持续给大家寻找Java毕设学习项目(附源码)
基于SpringBoot + Vue的医院管理系统,涵盖医院、患者、挂号、药物、检查、病床、排班管理和数据分析等功能。开发工具为IDEA和HBuilder X,环境需配置jdk8、Node.js14、MySQL8。文末提供源码下载链接。
|
2月前
|
架构师 安全 程序员
为什么大部分 PHP 程序员做不了架构师?
【10月更文挑战第23天】本文分析了PHP程序员向架构师转型时面临的挑战,包括语言特性限制认知范围、缺乏分布式系统经验、性能优化深度不足、安全意识和安全架构能力不足,以及对其他技术栈的融合能力有限等问题。这些问题限制了PHP程序员在系统设计和架构领域的全面发展。
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
基于Java+Springboot+Vue开发的大学竞赛报名管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的大学竞赛报名管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
230 3
基于Java+Springboot+Vue开发的大学竞赛报名管理系统
|
3月前
|
前端开发 JavaScript Java
基于Java+Springboot+Vue开发的蛋糕商城管理系统
基于Java+Springboot+Vue开发的蛋糕商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Java的蛋糕商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
171 3
基于Java+Springboot+Vue开发的蛋糕商城管理系统
|
2月前
|
Java 大数据 程序员
我的程序员之路:自学Java篇
我的程序员之路:自学Java篇
|
2月前
|
JavaScript Java
Java 控制台VUE.JS的使用
Java 控制台VUE.JS的使用
19 0