黑马程序员技术交流社区
标题:
前端学习总结
[打印本页]
作者:
蓝天六必治
时间:
2020-1-8 17:09
标题:
前端学习总结
前端的核心技术为HTML、CSS、JavaScript。这三个是前端最基础也是很容易入门的语言。HTML是网页的骨架，CSS是网页的妆容，JS是网页的灵魂，三者相辅相成才能成功地弄出一个简单的网页。这也是学习后续复杂的前端的基础。
在有了上述基础后，选择vue.Js来用于构建用户界面。在vue的学习中，我遇到了一些困难和一些挫折，在此总结这段时间的学习成果。
Vue用vue-cli在创建后自动生成一个工程，在命令行中运行npm run dev，
当显示如上图这样编译成功后，就可以在浏览器搜索localhost：8080/，浏览器将会显示该工程效果。如果显示报错，有以下两个可能：1、warnning，一般情况下显示的warnning为格式不严谨所报错的，只需要按照cmd提示的warnning以及第几行的指示一个一个纠正即可。2.error，这个就是你的程序报错，需要根据提示的错误进行修改。直到修改到上图为止。
而在后续写代码时也可以实时通过浏览器预览效果，同时可以按f12了解该页面的架构，也可以在页面上修改某处的css，预览效果。
Vue组件包括 <template> 、 <script> 和 <style>。<scirpt>中的data必须是函数。
以上是vue的最基础内容，为了更好地搭建页面，满足不同的需求，我们需要更深入的学习。
组件之间的跳转——通过npm安装vue-router，在新建的js中，引入组件，这其中可以显示组件之间的父子关系，兄弟关系。若是父子关系，父组件可以通过prop向子组件传递数据，子组件可以通过方法向父组件传递数据。如果是兄弟组件或者是无直接联系的组件，可以利用vuex来传递存储的数据。
使用v-if，v-else,，v-for，可以更好地满足需求，例如v-for可以按次序循环显示数组内的内容，v-if、v-else可以按照条件显示不同的内容。
前端与后台数据的交互，通过安装的axios，从url中获取后台的数据。并且可以对获取的数据进行处理。例如将数据显示在页面上，或者根据数据的json数组的个数渲染页面上表单的个数并将按次序显示在表单上，或者将后台的数据删除或者进行修改。一开始操作后台数据不清楚有没有操作成功时，可以使用console.log（）来打印后台数据。
移动端UI组件库可以选择vux，PC端UI组件库可以选择element。当需要用到一些组件（例如轮播图，表单等），在相应文档中寻找demo，并应用于程序之中。当需要进行一些改动的时候，可以从文档中了解它可以应用的属性，事件，样式变量，进行灵活应用。
为了工程清楚明了，可以将router放在一个js中，储存的数据放在一个js中，axios获取的后台放在一个js中，如果需要调用，可以在相应的vue中引用。
Vue为了能够正常使用，在用到axios，vux等的时候需要安装相应的依赖包。具体部分在相对应的文档都有显示。除了安装之外，使用方法等部分有不清楚的地方随时查阅官方文档，并以官方文档作为主，他人博客为辅助方便理解，来搞清楚相关部分。
在运行程序的时候发生了error，首先要明白出error的是哪个地方，然后在网上搜索相关问题，解决后或者在解决时，将解决思路记录下来，以便下次遇到同样的错误时能及时解决。
若是程序没有报错，但是没有出现预想中的功能，可以从执行相关步骤的那部分一步一步往前看，往深查，看看有没有什么逻辑遗漏的地方，或者什么地方的属性使用错误等。
写程序的时候应该有长远的目光，不应当只放在单独的页面，例如一个程序，跳转到某个隐藏的页面的时候（菜单主页没有直接跳转的方式），若需要传递数据，那应该统一用什么方式跳转，统一用什么方式存储传递的数据。
这些都是基础的学习，希望我能在接下来的学习中能更加灵活的使用并深入的了解前端的问题。
作者:
黑马润
时间:
2020-1-9 16:51
只要路是对的，就不怕路远。
作者:
流浪的猫~
时间:
2020-1-9 18:36
逆风的方向，才最适合飞翔。
作者:
25个蛋
时间:
2020-1-9 18:54
成功永远属于一直在跑的人。
作者:
雨下的芭蕉
时间:
2020-1-9 19:16
没有伞的孩子必须努力奔跑！
作者:
抓住青春的尾巴
时间:
2020-2-13 12:04
努力不一定成功，放弃一定失败。
作者:
情非得已。
时间:
2020-2-13 14:11
人，长得漂亮不如活得漂亮。
作者:
简单77777
时间:
2020-2-13 16:50
一万年太久，只争朝夕。
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2