这是一个创建于 1776 天前的主题，其中的信息可能已经有所发展或是发生改变。
自学了 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
DOLLOR 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
xuqiccr 2020-02-25 09:23:47 +08:00
@cmdOptionKana 对对对就是这样，感觉跟自己的思维方式完全不一样，所以一直没怎么看懂，谢谢大佬
|
|
70
Hanggi 2020-02-26 13:47:43 +08:00
我觉得你应该是试试分别把 Angular，React，Vue 官网上的例子跑一遍，看看哪个适合你，哪个用着更趁手。
|
Select Language