自学了 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 官网上的例子跑一遍,看看哪个适合你,哪个用着更趁手。
|