这是一个创建于 2116 天前的主题，其中的信息可能已经有所发展或是发生改变。
自学了 1 年 Python 后, 学了 3 天 Golang, 能用 Go 写个爬虫,Python 也可以, 但大多用 Django 或者 Flask 写后端, , 简单的 HTML 和 JS css 都会用,能做出前端, 能用但是太丑了
发现很多人说 Vue 做前端好用, 而且也好看.
之后我看了 Vue 官网和网上教程 不知道怎么下手, 看了很久没明白这东西是什么, 像 react 和 Vue 一直没明白,
目前陷入懵逼状态, 就像在找撕开胶带的那一条边, 只要找到了便能一路学下去
请问各位: 如何入门 Vue 呢, 需要先了解哪些前提条件呢
 | 1 shintendo 2020-02-20 22:08:11 +08:00 vue 跟丑还是好看没有任何关系 |
 | 2 airyland 2020-02-20 22:08:44 +08:00  1 Vue 官方文档很详细了，不要只看，开始照着写，很快就入门了。 |
 | 3 pastgift 2020-02-20 22:11:52 +08:00 via iPhone vue 看官网教程就行了，一般 vuex，vue-router 一起来 UI 想好看直接 element-UI 就好，一样看官网文档即可 两个都是国产，文档和设计都挺符合国人脑洞的 |
 | 4 3K1yf6UvnVz5w008 2020-02-20 22:17:03 +08:00 好看不好看 跟 vue 无关吧 跟框架有关吧 |
 | 5 EyreYoung 2020-02-20 22:19:11 +08:00 这是 js 框架，单纯方便写代码，跟好不好看没关系。ant design element-ui 啥的才是外观。 |
 | 6 tonytonychopper 2020-02-20 22:24:01 +08:00 via Android 好不好看跟 Vue 没有关系 |
 | 7 AV1 2020-02-20 22:29:56 +08:00 官网教程 https://cn.vuejs.org/v2/guide/ 先从最简单的标签引入开始，不要急着就上构建工具。 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
 | 8 cmdOptionKana 2020-02-20 22:42:10 +08:00 4 我猜你的问题在于，一直学习的编程方式都是线性逻辑的，也就是说，必须先写第 1、2、3 行代码，然后第 4 行代码才有意义，它们的前后顺序非常明确。 而 Vue 的编程方式是非线性的，数据驱动的。 学习 Vue 的时候，请注意把思维拆成两个部分：1.界面布局，2.填充数据。 一般来说，你应该先大概弄好界面布局，然后通过改变数据来出发界面的变化。 比如你看这里 https://cn.vuejs.org/v2/guide/ 其中 “条件与循环” 部分，它教你 “在控制台输入 app3.seen = false，你会发现之前显示的消息消失了”，这个通过改变数据来改变界面的思想是关键，请仔细品味这个例子。 |
 | 9 labulaka521 2020-02-20 22:44:57 +08:00 via Android 看下 js html vue 官网过一遍就 OK 了 |
 | 10 zhw2590582 2020-02-20 23:42:10 +08:00 via iPhone 前期什么都不要配置，像 webpack，bable 什么的不要管，像 jq 直接引入先熟练一下 |
 | 11 cuberlzy 2020-02-21 05:07:40 +08:00 vue 和开发体验、性能等有关系……好不好看的，瞅瞅 antd 之类的吧 |
 | 12 mrcotter2013 2020-02-21 05:18:46 +08:00 via iPhone UI 可以从参考别人的开始，这个需要学习一些入门的设计和配色，包括工具的使用 |
 | 13 murmur 2020-02-21 07:45:43 +08:00 1 1、掌握最基本的 css、html、js 基础 2、找个 ui 框架，直接 init 一个空项目 3、了解 vue 的 data、模板、组件化、三段式写法 4、恭喜你已经可以开始干活了 |
| 14 murmur 2020-02-21 07:46:11 +08:00 丑是正常的，要么抄要么用模板，不要一开始就自己做设计 |
 | 16 justin2018 2020-02-21 08:47:03 +08:00 |
 | 17 gg53kjh 2020-02-21 08:58:47 +08:00 via Android 做前后端分离项目就行了 |
 | 18 KuroNekoFan 2020-02-21 09:00:47 +08:00 先学 html js css |
 | 19 zdxddt 2020-02-21 09:07:16 +08:00 个人觉得，先快速看一眼文档，了解一下语法， 然后找一个脚手架项目， 然后在它的基础上修改成一个自己的项目， 这样入门会比较快。 这样不需要在新手阶段花大量的时间去关注配置，只需要关心 vue 的代码就好了。 |
 | 20 catch 2020-02-21 09:15:20 +08:00 via iPhone 看过不少后端说学 vue 只要一天 |
| 21 murmur 2020-02-21 09:17:48 +08:00 @catch 那是得有前端基础，或者直接用 element 这种框架干活的，最后出产东西一般。。看是能看，细节不忍直视，见过多少兼职前端写的代码连[].join 都不知道用 |
 | 22 azcvcza 2020-02-21 09:17:48 +08:00 vue 比 react 好的地方就在于可以单文件和 JQuery 一样引入单个页面直接开始写。 比较传统的前端，都是写好后页面，然后用选择器，document.querySelector('xxx')来筛选要更改的元素，简单的页面还好，如果涉及复杂的联动，还有复杂的状态转换，很容易就淹没在函数里。 vue 和 react 做了什么，建议去看官方的 tutorial，一步一步跟下去 |
 | 23 garlics 2020-02-21 09:33:58 +08:00 估计你跟我以前学 vue 的问题一样，看不出 vue 到底和 jQuery 有什么区别 建议你看下 https://cli.vuejs.org/zh/guide/ 感觉这个可以帮助你理解现代化的前端开发 之后可以看下 vue 的框架 element，移动端的话可以看 2 楼写的 vux，这也是我接触 vue 的第一个框架 |
 | 24 nullundefined 2020-02-21 12:00:06 +08:00 不用觉得 vue 难学，只要你基础好，从入门到资深只需要一个上午的时间 |
 | 25 hongch 2020-02-21 12:21:16 +08:00 前天晚上花了 2 个小时看了 vue 官方文档，照着 demo 撸一边，然后直接搜 element-ui，接下去就是复制粘贴的事 |
 | 26 leonard916 2020-02-21 12:27:42 +08:00 Vue 不包括 UI，想要面好看可以去找 CSS 框架 |
 | 27 hubqin 2020-02-21 12:30:39 +08:00 |
 | 28 AM2coder 2020-02-21 12:37:22 +08:00 via Android 1 vue 还是很好上手的吧。把数据驱动这个概念搞清楚了，就好理解了。我的理解是，就是自己把需要呈现的网页的架子搭好，需要动态变化的地方留一个变量，然后用逻辑方法去改这个变量，网页就会自动渲染了。这整个过程都是由 vue 框架自己完成，我们只要写改变变量的那个逻辑。至于那个架子，可以找一个组件库来美化 UI。建议先不要用脚手架搭项目，先做一个单页的搞清楚原理再层层深入。 |
 | 29 wiluxy 2020-02-21 12:45:08 +08:00 vue 和页面好看没有关系，如果说网站写的丑的话，应该看看 css，vue 就算用组件库也是别人已经定义好的样式，css 写的不 6 的话也是很难自定义样式的 |
 | 30 zhbzhbzhbz 2020-02-21 12:48:01 +08:00 @pastgift 才发现 element-UI 是饿了么搞的？ |
 | 31 sairoa 2020-02-21 13:55:21 +08:00 借宝地一问，代码如下： ``` <!DOCTYPE html> <html> <head> <meta charset='utf-8'> <script src="{{url_for('static', filename='js/vue.js')}}"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body> </html> ``` 为啥没反应啊！在浏览器看到 vue 都加载成功了啊！ vue 学习之路卡在第一步了。 |
 | 32 clino 2020-02-21 14:06:44 +08:00 要好看可以找一些用 vue 的框架,比如 iview element 之类的,可以在这个上面找找: https://github.com/vuejs/awesome-vue |
| 34 cmdOptionKana 2020-02-21 15:17:46 +08:00 @sairoa 借题发挥歪个楼，有现代化 IDE/编辑器支持之下，还是静态类型语言好用，如果是静态语言，data 那里就会有类型错误提示了。 |
| 35 murmur 2020-02-21 15:25:18 +08:00 @cmdOptionKana @guolaopi data 不是 function 不是 fatal，如果是用 webpack 构建会报 warning，我刚才看了我写的 20 多个直接引用的 vue 页面，所有的 data 都是直接写 object，所有页面工作正常，浏览器不报提示 当然我这是写漏了 |
 | 36 letitbesqzr 2020-02-21 15:31:33 +08:00 如果只有比较“古老”的 js 基础 u，建议学 vue 之前，学下 es6 ,否则后面会一脸懵逼的。http://es6.ruanyifeng.com/ |
 | 37 dcoder 2020-02-21 15:35:34 +08:00 你们都不等着 Vue3 出来后再学么? "你们"指的是业余前端, 比如日常是写后端的人 |
 | 38 DoyouRocket 2020-02-21 15:39:36 +08:00 1 vue 是数据驱动框架 管理数据用的 好看不好看是 UI 库 建议你看看 ElementUI 有 Vue 版本,然后推荐看 B 站上黑马的 Vue 商城项目视频 |
 | 39 kosmosr 2020-02-21 15:39:40 +08:00 via Android 我是看别人的开源项目学会的，边学边写 配合官方文档 |
| 40 shintendo 2020-02-21 15:42:40 +08:00 |
 | 41 Hanggi 2020-02-21 15:48:40 +08:00 为什么要学 Vue ？学别的不好吗？ |
| 42 murmur 2020-02-21 15:53:59 +08:00 @Hanggi 在有前端基础的情况下，学 vue 和学 jquery 难度差不多，你如果一个页面一个页面 script 标签引用，把 vue 当高端模板引擎用都可以 显然 react 这种连模板 if 和模板 for 都没有的，不得行 |
| 43 cmdOptionKana 2020-02-21 16:01:36 +08:00 @sairoa 我复制黏贴你的代码，能正确显示。在控制台输入 app.$data.message = 'Ha ha ha!'，也能使页面内容发生变化。 <script src="{{url_for('static', filename='js/vue.js')}}"></script>这句，显然你用了一个 html 模板，而这个模板恰好也是用双重大括号来转义，那么，{{ message }} 可能会被转义为别的东西。 我猜就是这里有冲突。 |
 | 44 hackyuan 2020-02-21 16:22:53 +08:00 看你说丑，那跟 Vue 是没有什么关系的。 1. 首先你得先看大量的设计、学习布局样式配色。 2. 然后再学习 CSS 来实现上步。 |
| 45 sairoa 2020-02-21 16:44:56 +08:00 @cmdOptionKana 多谢啊，亏得我前两天还去查 jinja2 和 vue 冲突问题来的，一下子就点醒我了，在 vue 代码部分禁用 jinja2 就好了。 |
 | 46 cndydb 2020-02-21 16:58:35 +08:00 b 站上不是一大堆教程吗 刚还在看呢 看几天了解一下大概 想熟练就多敲敲 前提是你要有 js 基础 前端框架都是大同小异 |
 | 48 pushyzheng 2020-02-21 17:34:01 +08:00 vue 美的原因是有很多 UI 框架可以信手拈来？ |
 | 49 hmxxmh 2020-02-21 17:42:35 +08:00 ps：我之前有发过类似的帖子，粘贴了一段我觉得挺不错的回复 1.直接引入 vue.js ，跟着官方文档把前面的基础语法撸一遍； 2.在 1 的基础上写一个简单的 todolist ； 3.看一下 vue 脚手架，再在脚手架上把 todolist 写一遍并跑起来； 4.学习一波 vue-router，去 github 上找一个简单的 vue 项目练手； 5.学习一波 vuex，再找个稍微复杂的项目练手。 一起学习，楼主有啥好的基础项目可以发一下我呀 |
 | 50 grewer 2020-02-21 17:48:22 +08:00 @murmur 因为 react 不需要 模板 if 和模板 for ,直接用 js 的 && ?: 数组的 map 就可以实现,何必多此一举 |
| 51 murmur 2020-02-21 18:01:38 +08:00 @pushyzheng 你写企业应用的话，复杂的表格、表单，写出来的 template 和最终渲染结果几乎没什么区别 同样的内容，用 vue 写，不做他几层封装，乱的没法看 我每写一个 class 就比你 className 少四个字母，我不换行一屏能看完的东西你得分几段 还有 dangerouslySetInnerHTML 这是什么垃圾命名，你说我危险我就不敢用了，欺负我是厦大的？ 我就需要一个模板系统，我只做单纯的展示页面，curd，你给我那么多特性我也没用啊 |
| 53 murmur 2020-02-21 18:09:19 +08:00 *更正，第二行 vue->react |
| 54 KuroNekoFan 2020-02-21 18:43:10 +08:00 via iPhone 看了一些评论感觉：不想细看 js 就算了，但是要好歹懂得 html how to work，基本的 html 元素了解一下，基本的用户交互流程，概念，事件了解一下好吧…… |
 | 55 alphardex 2020-02-21 21:19:08 +08:00 1 UI 好看跟 Vue 关系不大，纯 HTML+CSS+JS 也能写出高颜值的 UI，可以参考下我的原生作品集： https://codepen.io/alphardex/pens/public |
 | 56 soho176 2020-02-21 21:21:35 +08:00 vue 不是适合做单页面应用吗？如果是 pc 网站 用 vue 好像不合适吧，不利于 seo |
 | 57 fescover 2020-02-21 23:07:26 +08:00 via Android 直接去搜 vuetify，跟着官网敲页面，立马就能明白 |
 | 58 WilliamLin 2020-02-21 23:59:39 +08:00 看 vue 官方文档，然后用上 vux，抄 demo 去，再加上看看 vux 的源码，很快就能来感觉了 |
 | 60 tuomasi 2020-02-22 08:24:21 +08:00 后端不要学前端，把时间用在精通后端上面，牛逼一点的后端都是套模板，敢于承认自己前端水，然后把繁琐的前端工作推给别人，但是在老板心里，掌握数据的那个人最重要 |
 | 61 encro 2020-02-22 13:27:29 +08:00 vue，ng，react 的核心事项就是数据绑定。 我发现很多做了 2 年前端都不理解，写代码时候往往还是直接操作 dom。 数据绑定的意思是：展示和数据分离，通过行为事件操作数据，实现界面自动更新。 用 vue 下几个例子看就行了。 不一定要一次全看懂。 比如你看一个简单的 todo 例子，再看复杂一点的商城，然后再看网易云音乐模仿的， 然后自己照着写一个其他的应用。 可以参考一些 vue 的框架，如 bootstrap,ele,ant design 等 |
 | 62 Zchary 2020-02-22 22:13:17 +08:00 后端学啥 vue blazor 不香吗 |
 | 63 Cy86 OP 感谢大家的提供的建议 目前我会的前端技能: HTML Javascript JQuery CSS 目前学前端有三点原因: 1. 做个人项目时, 找别人写前端, 感觉项目这个孩子不是一个爹的种, 心里的成就感大大降低 2. 自己写前端也能写, 功能能达到, 但不完美, 很不标准 3. 使用 Jinja2 或者 Django 模板腻了, 希望丰富下自己技能树 目前看了大家的建议, 打算从官网学起来 未来工作还是要主攻后端, 前端的话交给更专业的人来做 |
| 64 shintendo 2020-02-23 11:23:11 +08:00 @Cy86 你的这些技能里，Vue 是用来代替其中的 jQuery 的，而好不好看是 CSS 决定的，所以你需要的是 CSS 框架如 bootstrap。也可以用封装程度更高的组件库如 ant design，element 等，这些就需要搭配 Vue 或者 React 用了 |
 | 65 Feva 2020-02-23 14:54:01 +08:00 前端学习范围广 先看看 ES6、HTML5、CSS3 基础 打包工具 页面适配、设计 业务框架、页面框架 慢慢踩坑吧 |
 | 66 cyberpoint 2020-02-23 18:34:43 +08:00 学习后端是最推荐的，前端坑太多，要适配的端太多。后端学好了，像你这种又懂一点前端的，稍微问一下前端人员，拉取下自己公司的项目，vue 很快上手了。 |
 | 67 YuTengjing 2020-02-23 19:41:49 +08:00 学框架要先把核心思想给弄清楚，以及用框架的好处在哪里。 vue 是数据驱动，比起 jquery 的事件驱动，直接操作 DOM 更加简便直观， vue 是组件化的，界面都是由一个个组件拼起来的，为了更灵活的操作组件，又引进了生命周期的概念 建议有时间先把 webapack 那一套东西给看一遍，不然你总会感觉 vue-cli 就像是黑魔法，想改个配置都不敢改。 最近写了一个从零开始配置 react + typescript 的教程，有兴趣可以看一下： https://github.com/tjx666/react-typescript-boilerplate |
| 68 Cy86 OP @YuTengjing 感谢 [捂脸] 我之前一直以为 react 和 typescript 是同一款东西 |
 | 69 79lawyer 2020-02-25 09:23:47 +08:00 @cmdOptionKana 对对对就是这样，感觉跟自己的思维方式完全不一样，所以一直没怎么看懂，谢谢大佬 |
| 70 Hanggi 2020-02-26 13:47:43 +08:00 我觉得你应该是试试分别把 Angular，React，Vue 官网上的例子跑一遍，看看哪个适合你，哪个用着更趁手。 |
Select Language