小白分享：我的一次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。

相关文章

HTML5 getUserMedia API网页录音实现指南示例小结

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API，结合WebAudioAPI，实现网页录音功能,从获取音频流到处理和保存录音，整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3
阅读更多...
全面解析HTML5中Checkbox标签

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一，通过合理使用其属性和样式自定义方法，可以为用户提供丰富多样的交互体验，这篇文章给大家介绍HTML5中C... 在html5中，Checkbox（复选框）是一种常用的表单元素，允许用户在一组选项中选择多个项目。本
阅读更多...
HTML5 搜索框Search Box详解

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具，能够有效提升用户体验,通过结合自动补全功能和适当的样式，可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框（Search Box）详解搜索框是一个用于输入查询内容的控件，通常用于网站或应用程
阅读更多...
Python虚拟环境与Conda使用指南分享

Python虚拟环境与Conda使用指南分享

《Python虚拟环境与Conda使用指南分享》：本文主要介绍Python虚拟环境与Conda使用指南,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python 虚拟环境概述1.1 什么是虚拟环境1.2 为什么需要虚拟环境二、Python 内置的虚拟环境工具
阅读更多...
CSS3中的字体及相关属性详解

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》：本文主要介绍了CSS3中的字体及相关属性，详细内容请阅读本文，希望能对你有所帮助... 字体网页字体的三个来源：用户机器上安装的字体，放心使用。保存在第三方网站上的字体，例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字
阅读更多...
Go学习记录之runtime包深入解析

Go学习记录之runtime包深入解析

《Go学习记录之runtime包深入解析》Go语言runtime包管理运行时环境,涵盖goroutine调度、内存分配、垃圾回收、类型信息等核心功能,：本文主要介绍Go学习记录之runtime包的... 目录前言：一、runtime包内容学习1、作用：① Goroutine和并发控制：② 垃圾回收：③ 栈和
阅读更多...
html 滚动条滚动过快会留下边框线的解决方案

html 滚动条滚动过快会留下边框线的解决方案

《html滚动条滚动过快会留下边框线的解决方案》：本文主要介绍了html滚动条滚动过快会留下边框线的解决方案，解决方法很简单，详细内容请阅读本文，希望能对你有所帮助... 滚动条滚动过快时，会留下边框线但其实大部分时候是这样的，没有多出边框线的滚动条滚动过快时留下边框线的问题通常与滚动条样式和滚动行
阅读更多...
Android学习总结之Java和kotlin区别超详细分析

Android学习总结之Java和kotlin区别超详细分析

《Android学习总结之Java和kotlin区别超详细分析》Java和Kotlin都是用于Android开发的编程语言,它们各自具有独特的特点和优势,：本文主要介绍Android学习总结之Ja... 目录一、空安全机制真题 1：Kotlin 如何解决 Java 的 NullPointerExceptio
阅读更多...
使用vscode搭建pywebview集成vue项目实践

使用vscode搭建pywebview集成vue项目实践

《使用vscode搭建pywebview集成vue项目实践》：本文主要介绍使用vscode搭建pywebview集成vue项目实践,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录环境准备项目源码下载项目说明调试与生成可执行文件核心代码说明总结本节我们使用pythonpywebv
阅读更多...
Python处理大量Excel文件的十个技巧分享

Python处理大量Excel文件的十个技巧分享

《Python处理大量Excel文件的十个技巧分享》每天被大量Excel文件折磨的你看过来！这是一份Python程序员整理的实用技巧,不说废话,直接上干货,文章通过代码示例讲解的非常详细,需要的朋友可... 目录一、批量读取多个Excel文件二、选择性读取工作表和列三、自动调整格式和样式四、智能数据清洗五、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2