本文主要是介绍小白分享：我的一次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学习非寻常之路（章一）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
