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

相关文章

JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
前端下载文件时如何后端返回的文件流一些常见方法

前端下载文件时如何后端返回的文件流一些常见方法

《前端下载文件时如何后端返回的文件流一些常见方法》：本文主要介绍前端下载文件时如何后端返回的文件流一些常见方法,包括使用Blob和URL.createObjectURL创建下载链接,以及处理带有C... 目录1. 使用 Blob 和 URL.createObjectURL 创建下载链接例子：使用 Blob
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
CSS Padding 和 Margin 区别全解析

CSS Padding 和 Margin 区别全解析

《CSSPadding和Margin区别全解析》CSS中的padding和margin是两个非常基础且重要的属性，它们用于控制元素周围的空白区域，本文将详细介绍padding和... 目录css Padding 和 Margin 全解析1. Padding: 内边距2. Margin: 外边距3. Padd
阅读更多...
CSS will-change 属性示例详解

CSS will-change 属性示例详解

《CSSwill-change属性示例详解》will-change是一个CSS属性，用于告诉浏览器某个元素在未来可能会发生哪些变化，本文给大家介绍CSSwill-change属性详解，感... will-change 是一个 css 属性，用于告诉浏览器某个元素在未来可能会发生哪些变化。这可以帮助浏览器优化
阅读更多...
CSS去除a标签的下划线的几种方法

CSS去除a标签的下划线的几种方法

《CSS去除a标签的下划线的几种方法》本文给大家分享在CSS中，去除a标签（超链接）的下划线的几种方法，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧... 在 css 中，去除a标签（超链接）的下划线主要有以下几种方法：使用text-decoration属性通用选择器设置：使用a标签选择器，将tex
阅读更多...
前端高级CSS用法示例详解

前端高级CSS用法示例详解

《前端高级CSS用法示例详解》在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一,随着前端技术的不断发展，CSS的用法也日益丰富和高级,本文将深... 前端高级css用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2