V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zhoudaiyu
V2EX  ›  Vue.js

运开初学前端(Vue),请问从哪个网站或者书入门开始?

  •  
  •   zhoudaiyu · 2020-03-07 18:38:16 +08:00 · 4227 次点击
    这是一个创建于 1517 天前的主题,其中的信息可能已经有所发展或是发生改变。
    被逼无奈,以后可能要自己写前端和后端了。公司基本已经定死了公司内项目的前端就用 Vue+ElementUI (为了保持风格统一)。看了大家发的一些帖子感觉学 Vue 还是学一下 html、css、js 才好,那么请问在学 Vue 之前打基础从哪里学好? w3cschool、MDN 或者别的什么网站?还有想问问 html、css、js 要学到什么程度可以开始看 Vue ? Vue 从官方文档开始学最好吧?想听听大家的建议。十分感谢!
    25 条回复    2020-03-13 21:50:02 +08:00
    creanme
        1
    creanme  
       2020-03-07 19:40:31 +08:00   ❤️ 2
    js 可以看这个网站 https://zh.javascript.info/
    mdn 太多了
    vue 一边看文档,一边去 github 上找点 demo 照着写,如果熟悉 js 的话很快就能上手。
    yhxx
        2
    yhxx  
       2020-03-07 19:44:19 +08:00
    https://edu.51cto.com/course/799.html
    HTML CSS 随便看看这个就差不多了,然后就可以照着 Vue 文档堆页面了
    毕竟也不是要成为专业前端,只是为了最快的有产出
    zhoudaiyu
        3
    zhoudaiyu  
    OP
       2020-03-07 19:48:30 +08:00
    @creanme 感谢推荐,请问 html 和 css 有啥好的网站吗
    zhoudaiyu
        4
    zhoudaiyu  
    OP
       2020-03-07 19:49:12 +08:00
    @yhxx 谢谢,请问还有没有非视频类教程推荐呢
    pux2020
        5
    pux2020  
       2020-03-07 19:49:28 +08:00
    基础的东西照着文档走一遍就行,javascript 以 es6 为主,涉及到原理层面上的内容最好还是找套系统的课过一遍
    这些框架的核心终究还是组件 路由那点东西,理解了写起来就简单了
    uxstone
        6
    uxstone  
       2020-03-07 21:07:03 +08:00
    ElementUI 慎用,github 上面都不怎么更新了
    vue2 和 vue3 不一样
    另外还要学学 TypeScript

    React+Antd 不香吗?
    murmur
        7
    murmur  
       2020-03-07 21:08:17 +08:00
    vue 用 es5 的语法就够了,楼上那群危言耸听的是干嘛,vue 有前端基础从学到编码不会超过半天,这学了还成负担了?
    zhoudaiyu
        8
    zhoudaiyu  
    OP
       2020-03-07 21:12:53 +08:00 via iPhone
    @uxstone 公司规定的必须用 vue 这套....
    GzhiYi
        9
    GzhiYi  
       2020-03-07 21:36:50 +08:00
    看文档就行了。
    murmur
        10
    murmur  
       2020-03-07 21:39:34 +08:00   ❤️ 2
    我来说一下 vue 怎么学
    首先,你们既然指定 vue+饿了么,那么就不需要学单文件,直接学三段式结构
    vue 的 template 部分在不使用特性的时候跟 html 完全一样,学习成本 0,style 部分跟 css、scss、less 完全一样,学习成本 0,script 你只需要学会一句 export default 你的组件 /页面,剩下都是 es5 语法
    现在你要控制组件动态显示,几乎所有语言都有 if,那么 vue 就是 v-if,你需要循环,几乎所有语言都有 for,现在你又学了 v-for,不对,这 2 个是不背就记住了
    你需要绑定事件,那么我们知道 at 这个符号有在...的意思,所以你又学会了 at 前缀绑定事件
    难么?
    hnbcinfo
        11
    hnbcinfo  
       2020-03-07 21:42:41 +08:00
    我也准备开始学呢,我没有前端基础。先学了 html、css 等,用的这个网站:
    https://www.freecodecamp.org/learn

    具体到 vue,因为我从来没搞过前端,准备先找个视频,只看前几段视频,照着吧环境和一些常用操作搞明白,然后就找官方文档,或一些大牛整理的文档教程对着学。
    murmur
        12
    murmur  
       2020-03-07 21:46:18 +08:00
    接下来,你突然意料到元素动态删减可能不好,你需要 display:none,那么你的初中英语告诉你显示是 show,现在你又学会了 v-show
    你想玩点花样,不想让模板引擎的过滤束缚你的思维,你需要显示 html,学了这么多指令,你都可以抢答了,那么你自然就会了 v-html
    你需要绑定变量,给模板的变量赋值需要 setState 这种函数么?当然不需要,this.xxx 一把梭,你需要了解什么叫不可变对象么?绝大多数的时候其实你是遇不到这类坑的,vue 的 diff 和对 object、array 等的埋点会帮你去检查那些东西有变动
    如果说 react 是 es6 的一种完美转写,那么 vue 则是 es5 年代前端的完美组件化实现,你认为这是语法糖,但是这个英语是你初中就学会的,而不是 dangerouslySetInnerHtml 这种又长又臭的东西
    zhuangzhuang1988
        13
    zhuangzhuang1988  
       2020-03-07 22:05:11 +08:00
    尽量把官方文档看完整就好了
    记得跟着做实验
    ps:
    能不能把标题打全 "运开" 是啥鬼,
    xuzhzzz
        14
    xuzhzzz  
       2020-03-07 23:31:27 +08:00
    @zhuangzhuang1988 像是运维开发,还得写前端,真全干工程师
    Pichai
        15
    Pichai  
       2020-03-07 23:51:26 +08:00
    js 可以去廖雪峰官网,vue 可以去阿里云上有专门的视频课程,参考一下官方教程,一周基本就会撸了。
    zhoudaiyu
        16
    zhoudaiyu  
    OP
       2020-03-08 00:01:59 +08:00 via iPhone
    @zhuangzhuang1988
    @xuzhzzz
    是的,运维开发,啥都得会
    loading
        17
    loading  
       2020-03-08 16:43:24 +08:00
    @murmur 我想问下,如果浏览器不支持 es6 export,有办法不用 node 转吗?能不能全部用 cdn 方式,内网整 npm 太南了。
    zhoudaiyu
        18
    zhoudaiyu  
    OP
       2020-03-09 12:28:38 +08:00 via iPhone
    @murmur 谢谢您!我想问问学 vue 之前要学的 hcj 这三个从哪里学好些
    murmur
        19
    murmur  
       2020-03-09 12:32:31 +08:00   ❤️ 1
    @loading vue 的模块就是变量,可以直接用 script 标签引入,就是这样的工程化太累了
    murmur
        20
    murmur  
       2020-03-09 12:33:22 +08:00   ❤️ 1
    @loading 也可以选择在公网上建好工程拷贝分发给其他人,只用 less 是不涉及二进制文件的,scss 才要
    murmur
        21
    murmur  
       2020-03-09 15:07:30 +08:00   ❤️ 1
    @zhoudaiyu 菜鸟教程看个 helloworld 和语法,大概扫一遍有什么入门部分,然后照着设计稿开始抄,一定要学会面向搜索开发、面向需求学习,学着把你的需求用英文最简练的表达出来,比如你需要让东西居中,你不要搜索”怎么让元素居中“,而是应该搜索”css center",那么 google 第一个链接就会给你各种居中的写法,包括水平垂直。

    上来就看犀牛书这种东西除了劝退没任何好处,真的。

    等你抄完一个页面,你基本掌握了 js 和 css 的语法和常用部分,但是写出来的东西很丑,这个时候你可以用调试工具看知名网站的设计,看别人怎么实现的布局,至于 js,可以看网上开源的项目,因为 css 可以拿调试工具抄,js 都混淆了

    第三部是看网上的总结文章,比如居中怎么做,几分栏布局怎么做,也就是常说的回字有几个写法,在这个阶段你会接触到前面漏掉的一些 css 特性,比如 flex 布局。

    最后才是看犀牛书这些,准备面试了,因为如果你的代码不造轮子,很多 js 的糟粕特性是遇不到的
    zhoudaiyu
        22
    zhoudaiyu  
    OP
       2020-03-09 16:49:55 +08:00
    @murmur 明白了,感谢!
    geek720s
        23
    geek720s  
       2020-03-09 16:57:40 +08:00
    编译原理,谢谢
    shiwoya
        24
    shiwoya  
       2020-03-13 11:15:39 +08:00
    同为初学者,html,css 推荐燕十八的那个课,很快解决,js 的话过一遍基础语法和 dom,bom,
    有后端经验那就直接 vue,没有最好来个 node
    Reol
        25
    Reol  
       2020-03-13 21:50:02 +08:00
    @murmur 靠谱
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2345 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:48 · PVG 21:48 · LAX 06:48 · JFK 09:48
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.