小白分享：我的一次Vue学习非寻常之路（章一）

2023-12-03 12:58
文章标签 javascript 学习 vue 分享 frontend 小白 一次 寻常 章一

本文主要是介绍小白分享：我的一次Vue学习非寻常之路（章一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 1、功能分析
  • 2、语言形态
    • 2.1 视图模板
    • 2.2 逻辑脚本
    • 2.3 视图样式
  • 3、页面路由
  • 4、入门路线
  • 5、实践案例
  • 6、归纳总计

导读：坦白讲，我是Java服务端研发，只知道Vue这么个前端编程语言，未曾任何学习过，仅仅是个小白。但为何突然学习Vue呢，这得益于一次需求研发，无奈前端资源紧张，恰这次需求实现是面向运营端，非C端用户，产品可以接受自己自测，毕竟初期也仅是他负责这个模块的间断性周期数据维护。鉴于此，我尝试着是否可以自己实现这个模块，毕竟虽然不懂，但是可以模仿其他模块，有示例可以参考，实在搞不定也可以请教前端指教一番。鉴于此，花费几天完成该模块的功能实现（包括表格、表单、表单验证、弹出框等等），鉴于此，写此篇回顾自己的非寻常学习路线。

1、功能分析

准备实现这个功能模块，我看了一下原型图，我分析了一下功能，结论大致如下：

  • 包含三个功能子菜单，子菜单的主页面都是查询类条件+表格+分页。
  • 都包含导航批量设置功能（即可以选中多行记录），然后进行批量设置。
  • 行记录展现字段项一致，操作栏位的功能按钮也一样。
  • 无论对于批量弹出窗口批量设置，还是操作栏位功能按钮弹出窗口，都需要父子页面传值操作。
  • 功能中包含一个工作日设置（即可以为每行记录设定工作日），工作日窗口需要支持增加或删除，我想着可以用一个日历组件。

分析如上几条结论，剩下的我就看了一下现有的功能模块，并找到了相关参考样例，CP一下，然后按照项目源码规范，并在page页面创建一个文件夹为本模块，同时新增三个文件夹对应模块的三个子菜单。

2、语言形态

我试着先完成其中一个模块的表格类，我打开刚才负责的.vue文件，看了一下源代码结构。大致示例结构如下：

<template lang="jade">el-panelel-form(:inline="true")el-form-item(label="状态：")el-select(v-model="formData.status", size="mini", placeholder="请选择", @change="query", clearable, style="width:100px")el-option(v-for="(item, index) in statusList", :key="index", :label="item.name", :value="item.code")el-form-itemel-button(type="primary", size="mini", @click="query") 查询el-button(type="primary", size="mini", @click="addNew") 新增el-table(:data="tableData", border, height="550", ref="multipleTable", @selection-change="handleSelectionChange")el-table-column(type="selection", wdith="35", fixed="left")                             el-table-column(label="状态" width="80px")template(slot-scope="scope")span {{scope.row.status | state-val}}el-table-column(label="修改时间", prop="updatedTime")template(slot-scope="scope")span {{scope.row.updatedTime | date}}el-table-column(label="操作", width="240")template(slot-scope="scope")el-button(type="text", size="mini", @click="editDetail(scope.row)") 编辑el-button(type="text", size="mini", @click="showDetail(scope.row)") 查看el-pagination(@size-change="handleSizeChange",@current-change="handleCurrentChange",:current-page="pagination.current",:page-sizes="[30,60,90]",:page-size="pagination.pageSize",layout="total, sizes, prev, pager, next, jumper",:total="pagination.total")el-dialog(title="支持日配置", :visible.sync="showWeekdayConfigDialog", :close-on-click-modal="false", :fullscreen="false")weekday-config(ref="configWeekday",:relationId="relationId", @closeTimeConfigModal="closeWeekdayConfigModal")    
</template><script>import {modifyStatus, loadRecords, queryRecord, saveRecord} from "@/api/payment";import WeekdayConfig from "@/page/payment/components/weekday-config/index"export default {name: 'deductList',props: {belongType: {type: Number,required: true,},buzType: {type: Number,required: true,}},data() {return {// formformData: {status: '',}};},mounted(){this.init();},components:{WeekdayConfig},methods: {init(){}}};
</script><style scoped>.table {width: 100%;}.form {margin: 5px;}.dialog-content {padding-top: 20px;}
</style>

每个.vue模块分为三个结构，视图模板、逻辑脚本、视图样式。

2.1 视图模板

了解了一下，.vue视图模板也可以采用jade模板语法，这样就省去大量的闭合标签，看起来更清爽许多。

语法示例

doctype html
html(lang="en")headtitle= pageTitlescript(type='text/javascript').if (foo) bar(1 + 5)bodyh1 Jade - node template engine#container.colif youAreUsingJadep You are amazingelsep Get on it!p.Jade is a terse and simple templating language with astrong focus on performance and powerful features.

生成的 HTML：

<!DOCTYPE html>
<html lang="en"><head><title>Jade</title><script type="text/javascript">if (foo) bar(1 + 5)</script> </head><body><h1>Jade - node template engine</h1><div id="container" class="col"><p>You are amazing</p><p>Jade is a terse and simple templating language with a strong focus on performance and powerful features.</p></div></body>
</html>

又譬如

input(type='checkbox', checked)
input(type='checkbox'name='agreement'checked
)

生成的 HTML：

<input type="checkbox" checked>
<input type="checkbox" name="agreement" checked>

相关介绍：

https://www.npmjs.com/package/jade
https://blog.csdn.net/u011781521/article/details/53560987

2.2 逻辑脚本

vue可以把把重复使用的模块提取为组件，通过import引入。
譬如：

import {modifyStatus, loadRecords, queryRecord, saveRecord} from "@/api/payment";

另外，vue的构成包含如下结构

export default {name: '',props: {},data() {return {};},mounted(){},components:{WeekdayConfig},methods: {init(){}}};

其中

  • props为定义的属性，供模板视图中使用，类似java中Class的成员属性，外部可以引入组件，并设置组件视图属性值。
  • mouted为vue暴漏的对数据声明周期的钩子函数。
  • components为引入的组件
  • method可以自定义自己的成员函数。

2.3 视图样式

<style scoped>.table {width: 100%;}.form {margin: 5px;}.dialog-content {padding-top: 20px;}
</style>

这块对于有HTML/CSS基础的据非常熟悉了，现在CSS样式有SCSS特性编写，还有更高级的LESS语法用法。

这块的作用就是我们可以定义模板视图中组建的样式属性。

修改完成之后，我通过Visual Studio Code 这个开发IDE，启动编译运行开发环境。

启动
终端输出
如果代码编写顺利的话，运行start，终端可以输出如上，意味着编译成功，浏览器打开页面。

3、页面路由

如果页面想访问自己定义的页面，意味着需要配置自己的路由规则。
这里就不介绍源码示例了，类似Spring Controller暴漏的REST Api。

4、入门路线

经过前端指点，介绍了两个学习网站，从而帮助自己系统的学习一下，不至于在开发中，遇到星星怪怪的符号。

Vue基础学习：https://cn.vuejs.org/v2/guide/
UI组件学习：https://element.eleme.cn/#/zh-CN/component/installation

通过学习，了解到Vue的核心目标是为了实现视图层(View)数据绑定和逻辑处理的分离，使得前端开发只需要专注数据渲染逻辑的处理，数据的双向绑定从而实现无需页面刷新，数据变化而实现元素值的改变。

包括学习相关指令：v-bind、v-model、v-show、v-once、v-if、v-for等等。总而言之，系统大致过目了一下vue语言特性，以及相关特性代码的样例。

另外又看了一下组件库大致包含哪些东西，遇到问题时可以查看相关组件使用案例说明以及属性介绍。

上下班途中，微信读书又看了一遍Vue开发指南，进一步又了解到Vue只是JS类库，日常为了解决我们无需自己手写各种HTML组件，像Element、iViews组件的诞生使得我们拿来即用，就可以构建一套自己的前端应用，既有统一的布局样式，又有统一的组件。

5、实践案例

在功能实现中，需要实现一个日历功能，在日历组件中可以增加该日为工作日，也可以移除该日，对于已添加的支持删除，未添加的支持新增，需求很简单，那就开发吧。我看了一下Element的UI组件，看到一个Canlendar ( https://element.eleme.cn/#/zh-CN/component/calendar) 组件，顺便看了几个样例，觉得可行。最终实现了如下

在这里插入图片描述
介绍，黄色的代表已添加的，白色的代表未添加的，鼠标单击单元格，可以实现添加/删除功能。

源代码如下

<template lang="jade">el-form(label-width='180px', :model="formData", ref="form")el-calendar(v-model="value")template(slot="dateCell" slot-scope="{date, data}")p(v-if="weekdayList.includes(data.day)")  el-link(type="danger" @click="deleteWeekday(date)" title="点击删除") 【{{ data.day.split('-').slice(1).join('-') }}】p(v-else)  el-link(type="primary" @click="addWeekday(date)" title="点击添加") 【{{ data.day.split('-').slice(1).join('-') }}】
</template><script>import {loadWeekdayRecords,batchSaveWeekday,deleteWeekdayRecord} from "@/api/payment";export default {name: "weekdayConfig",props: {relationId: {type: Number,required: true,}},data() {return {value:new Date(),configList:[],weekdayList:[],formData: {relationId: ""}};},mounted() {this.init();},methods: {init(){this.loadWeekdays(this.value);},loadWeekdays(selectedData){var params = {};params.form = {relationId : this.relationId,year: selectedData.getFullYear()};console.log(params);params.paging = false;loadWeekdayRecords(params).then((_) =>{this.configList = _.data.data;this.weekdayList = this.configList.reduce((arr,it)=>[...arr,it.weekday],[])})},addWeekday(selectedData){var params = [{relationId: this.relationId,weekday: selectedData}];batchSaveWeekday(params).then((_) =>{this.$notify({message: _.msg,type: _.code === 1 ? 'success' : 'warning'});this.loadWeekdays(selectedData);});},deleteWeekday(selectedData){var selectedDate = format(new Date(selectedData),'YYYY-MM-DD');var find = this.configList.find(item => item.weekday == selectedDate);if(find){deleteWeekdayRecord(find.id).then((_) =>{this.$notify({message: _.msg,type: _.code === 1 ? 'success' : 'warning'});this.loadWeekdays(selectedData);});}}}};
</script><style>
.el-link--danger {display: block;width:72px;height: 62px;background-color:#ffe696;line-height: 65px;text-align: center;
}
.el-link--primary {display: block;width:72px;height: 62px;background-color:#fff;line-height: 65px;text-align: center;
}
</style>

事实上在代码编写过程中遇到一些问题，归纳如下：

  • 问题1：日历中日期是否返回的工作日数组中成员

使用了集合的includes函数

v-if="weekdayList.includes(data.day)"
  • 问题2：删除日期，但是后端需要根据id指定记录

使用了集合的find函数

deleteWeekday(selectedData){var selectedDate = format(new Date(selectedData),'YYYY-MM-DD');var find = this.configList.find(item => item.weekday == selectedDate);if(find){deleteWeekdayRecord(find.id).then((_) =>{this.$notify({message: _.msg,type: _.code === 1 ? 'success' : 'warning'});this.loadWeekdays(selectedData);});}
}
  • 问题3：ajax请求查询的工作日对象集合，如何获取工作日组合一个数组对象。

使用了集合的reduce函数(ES6语法、相对于map性能更高)

loadWeekdayRecords(params).then((_) =>{this.configList = _.data.data;this.weekdayList = this.configList.reduce((arr,it)=>[...arr,it.weekday],[])
})

6、归纳总计

通过此机会，认识到vue，又通过实践，进一步体会其乐趣。认识到，像我这样一个小白几天都可以快速完成几个模块，可见其学习门槛低，入门简单。

Element就像当初学习jQuery，遇到一系列实现的组件，使得我们拿来即用，无需自己摸索开发。

ES6带来的新特性使得前端JavaScript语言可以通过相关API或特性通过更少的代码实现功能。

  • 譬如定义函数支持默认值。
function foo(width= 20, height = 50) {console.log(width, height)
}
  • 譬如支持箭头函数
() => 1;(a, b) => a + b;() => ([1, 2]);() => ({a: 1,b: 2
});() => {alert()
}setTimeout(() => {// to do
}, 500)
  • 譬如模板字符串拼接以及变量支持
let str = `hello, ${name}, my name is ${myName}`;//类似
var str = 'hello, ' + name + ', my name is ' + myName;

等等，这使得刷新自己对传统的JavaScript语言开发的认识，还是蛮有趣的，就像Java8 Stream Api的出现，更多支持：https://www.jianshu.com/p/e2ba90e89754

下面的是我的公众号二维码图片，欢迎关注，或公众号搜索【秋夜无霜】。
秋夜无霜

这篇关于小白分享：我的一次Vue学习非寻常之路（章一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/449534。

相关文章

部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Java深度学习库DJL实现Python的NumPy方式

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操
阅读更多...
linux进程D状态的解决思路分享

linux进程D状态的解决思路分享

《linux进程D状态的解决思路分享》在Linux系统中,进程在内核模式下等待I/O完成时会进入不间断睡眠状态（D状态）,这种状态下,进程无法通过普通方式被杀死,本文通过实验模拟了这种状态,并分析了如... 目录1. 问题描述2. 问题分析3. 实验模拟3.1 使用losetup创建一个卷作为pv的磁盘3.
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
MySQL8.2.0安装教程分享

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
CentOS系统Maven安装教程分享

CentOS系统Maven安装教程分享

《CentOS系统Maven安装教程分享》本文介绍了如何在CentOS系统中安装Maven,并提供了一个简单的实际应用案例,安装Maven需要先安装Java和设置环境变量,Maven可以自动管理项目的... 目录准备工作下载并安装Maven常见问题及解决方法实际应用案例总结Maven是一个流行的项目管理工具
阅读更多...
10个Python自动化办公的脚本分享

10个Python自动化办公的脚本分享

《10个Python自动化办公的脚本分享》在日常办公中,我们常常会被繁琐、重复的任务占据大量时间,本文为大家分享了10个实用的Python自动化办公案例及源码,希望对大家有所帮助... 目录1. 批量处理 Excel 文件2. 自动发送邮件3. 批量重命名文件4. 数据清洗5. 生成 PPT6. 自动化测试
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2