Vue初体验

左直拳 2020-11-13 11:12:51
vue CSDN 体验 技术开发 初体验


这段时间忙里偷闲,见缝插针,试验了一下Vue。demo只有2个页面,一个弹出窗口,如下:

一、成果

1、首页
在这里插入图片描述
底部点击【Test】出次页,点击【About】弹出关于。

2、次页
在这里插入图片描述
3、弹出窗口
在这里插入图片描述

二、感受

这个demo里面,有部件,有路由,有JSON读取并展示,有集成第三方框架layUI,等等,麻雀虽小,脏腑却也差不多齐全。一路摸索,不少感慨。

1、学习成本
老实说,学习成本并不低,出乎我意料。据说react完全抛弃了HTML,另起炉灶,独辟蹊径,完全采用JS来书写dom,所以你要用react的话,相当于新学习一门语言。虽然也号称是js,但那些规则、含义应该是不一样的。相比之下,vue大概好一点,还保留了一些html标记,又有css,又有script,真好。

但实际应用起来,不是完全一回事。大概是为了书写方便,vue使用了一些简写,即将一些JS的语法做了简化,我刚开始接触时,丈二金刚摸不着头脑。如:

在这里插入图片描述
不是json吗?应该是key-value,像上面那个computed一样,有冒号,后面有值才对啊。其实这就是简化了,相当于:

render: function(h){

return h(this.ViewComponent);
}

几年前我用过coffeescript来编写node.js,对这种模式还算理解,然而这些就是学习成本。更何况,vue又加了不少自己特有的东西。

加上VUE官方本身的文档,完全就是一份手册,缺少例子且支离破碎,对于初学者是很不利的。

除此之外,这些开源框架,总是喜欢重构,用力过猛,动不动就声称一些属性不再支持,外围的许多第三方包也有过期的嫌疑,在互联网上搜索,看到一些不合时宜的文档,就一头栽到坑里去了。

2、前后端分离
什么是前后端分离?

就是前端程序和后端程序完全分开,前端与后端唯一的交互,就是通过提交啦,ajax啦,websocket啦,之类进行联系。传统程序中,前端页面中包含着服务器端标记的现象不复存在(典型的像jsp,asp,重灾区;后来使用模板引擎,razor,thymeleaf,好一点,但仍然未能彻底分开)。

但是前后端分离的思想是很简单的,不用VUE这类的框架也能实现,但是,开发起来非常繁琐。我去年接触到了前后端分离这个概念,想体验一把,结果很快就放弃了。因为无法解决复用的问题。在传统的开发中,部件,模板页,这类东东随手拈来,而单纯用记事本来编写HTML+JS之类,很难做到复用。

但是像VUE这类的框架,在开发阶段,其实并不是写HTML+CSS+JS,它是写另外一种代码,然后再编译、发布成HTML+CSS+JS,这就跟我们平时开发,先编写java,C#代码,然后再编译、发布,最后部署到服务器是一样的。开发过程中,我们使用了模板,组合各种部件,而build的过程中,系统已经帮我们处理好了一切,该连接的连接,该放在一起的放在一起。

原来,前后端分离,与其说是程序的前后端分离,不如说是前后端的开发工作分离,前端、后端工程师各干各的,代码再也不会混在一起。前端再也不是以往那种号称用记事本,人人都能写一点的,似乎没有技术含量的网页了。它有各种各样的框架,开发工具,打包发布工具,层出不穷的概念,日新月异的语法,足以让攻城狮们疲于奔命,或者开启一条鄙视链。

醉后不知天在水,满船清梦压星河。

版权声明
本文为[左直拳]所创,转载请带上原文链接,感谢
https://leftfist.blog.csdn.net/article/details/109080242

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple