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

如何自学 Vue 呢

  •  
  •   Cy86 · 2020-02-20 21:55:26 +08:00 · 10544 次点击
    这是一个创建于 1722 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自学了 1 年 Python 后, 学了 3 天 Golang, 能用 Go 写个爬虫,Python 也可以, 但大多用 Django 或者 Flask 写后端, , 简单的 HTML 和 JS css 都会用,能做出前端, 能用但是太丑了

    发现很多人说 Vue 做前端好用, 而且也好看.

    之后我看了 Vue 官网和网上教程 不知道怎么下手, 看了很久没明白这东西是什么, 像 react 和 Vue 一直没明白,

    目前陷入懵逼状态, 就像在找撕开胶带的那一条边, 只要找到了便能一路学下去

    请问各位: 如何入门 Vue 呢, 需要先了解哪些前提条件呢

    70 条回复    2020-02-26 13:47:43 +08:00
    shintendo
        1
    shintendo  
       2020-02-20 22:08:11 +08:00
    vue 跟丑还是好看没有任何关系
    airyland
        2
    airyland  
       2020-02-20 22:08:44 +08:00   ❤️ 1
    Vue 官方文档很详细了,不要只看,开始照着写,很快就入门了。
    pastgift
        3
    pastgift  
       2020-02-20 22:11:52 +08:00 via iPhone
    vue 看官网教程就行了,一般 vuex,vue-router 一起来
    UI 想好看直接 element-UI 就好,一样看官网文档即可
    两个都是国产,文档和设计都挺符合国人脑洞的
    3K1yf6UvnVz5w008
        4
    3K1yf6UvnVz5w008  
       2020-02-20 22:17:03 +08:00
    好看不好看 跟 vue 无关吧
    跟框架有关吧
    EyreYoung
        5
    EyreYoung  
       2020-02-20 22:19:11 +08:00
    这是 js 框架,单纯方便写代码,跟好不好看没关系。ant design element-ui 啥的才是外观。
    tonytonychopper
        6
    tonytonychopper  
       2020-02-20 22:24:01 +08:00 via Android
    好不好看跟 Vue 没有关系
    DOLLOR
        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>
    cmdOptionKana
        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,你会发现之前显示的消息消失了”,这个通过改变数据来改变界面的思想是关键,请仔细品味这个例子。
    labulaka521
        9
    labulaka521  
       2020-02-20 22:44:57 +08:00 via Android
    看下 js html vue 官网过一遍就 OK 了
    zhw2590582
        10
    zhw2590582  
       2020-02-20 23:42:10 +08:00 via iPhone
    前期什么都不要配置,像 webpack,bable 什么的不要管,像 jq 直接引入先熟练一下
    cuberlzy
        11
    cuberlzy  
       2020-02-21 05:07:40 +08:00
    vue 和开发体验、性能等有关系……好不好看的,瞅瞅 antd 之类的吧
    mrcotter2013
        12
    mrcotter2013  
       2020-02-21 05:18:46 +08:00 via iPhone
    UI 可以从参考别人的开始,这个需要学习一些入门的设计和配色,包括工具的使用
    murmur
        13
    murmur  
       2020-02-21 07:45:43 +08:00   ❤️ 1
    1、掌握最基本的 css、html、js 基础
    2、找个 ui 框架,直接 init 一个空项目
    3、了解 vue 的 data、模板、组件化、三段式写法
    4、恭喜你已经可以开始干活了
    murmur
        14
    murmur  
       2020-02-21 07:46:11 +08:00
    丑是正常的,要么抄要么用模板,不要一开始就自己做设计
    mikulch
        15
    mikulch  
       2020-02-21 08:45:38 +08:00 via iPhone
    @murmur 每个前端的帖子里面都有你
    justin2018
        16
    justin2018  
       2020-02-21 08:47:03 +08:00
    看官方文档 或者 看视频

    https://91maipian.com/lives/find?keyword=vue 这个网站有的教程还不错 可瞅瞅 😅
    gg53kjh
        17
    gg53kjh  
       2020-02-21 08:58:47 +08:00 via Android
    做前后端分离项目就行了
    KuroNekoFan
        18
    KuroNekoFan  
       2020-02-21 09:00:47 +08:00
    先学 html js css
    zdxddt
        19
    zdxddt  
       2020-02-21 09:07:16 +08:00
    个人觉得,先快速看一眼文档,了解一下语法, 然后找一个脚手架项目, 然后在它的基础上修改成一个自己的项目, 这样入门会比较快。 这样不需要在新手阶段花大量的时间去关注配置,只需要关心 vue 的代码就好了。
    catch
        20
    catch  
       2020-02-21 09:15:20 +08:00 via iPhone
    看过不少后端说学 vue 只要一天
    murmur
        21
    murmur  
       2020-02-21 09:17:48 +08:00
    @catch 那是得有前端基础,或者直接用 element 这种框架干活的,最后出产东西一般。。看是能看,细节不忍直视,见过多少兼职前端写的代码连[].join 都不知道用
    azcvcza
        22
    azcvcza  
       2020-02-21 09:17:48 +08:00
    vue 比 react 好的地方就在于可以单文件和 JQuery 一样引入单个页面直接开始写。
    比较传统的前端,都是写好后页面,然后用选择器,document.querySelector('xxx')来筛选要更改的元素,简单的页面还好,如果涉及复杂的联动,还有复杂的状态转换,很容易就淹没在函数里。
    vue 和 react 做了什么,建议去看官方的 tutorial,一步一步跟下去
    garlics
        23
    garlics  
       2020-02-21 09:33:58 +08:00
    估计你跟我以前学 vue 的问题一样,看不出 vue 到底和 jQuery 有什么区别
    建议你看下 https://cli.vuejs.org/zh/guide/ 感觉这个可以帮助你理解现代化的前端开发
    之后可以看下 vue 的框架 element,移动端的话可以看 2 楼写的 vux,这也是我接触 vue 的第一个框架
    nullundefined
        24
    nullundefined  
       2020-02-21 12:00:06 +08:00
    不用觉得 vue 难学,只要你基础好,从入门到资深只需要一个上午的时间
    hongch
        25
    hongch  
       2020-02-21 12:21:16 +08:00
    前天晚上花了 2 个小时看了 vue 官方文档,照着 demo 撸一边,然后直接搜 element-ui,接下去就是复制粘贴的事
    leonard916
        26
    leonard916  
       2020-02-21 12:27:42 +08:00
    Vue 不包括 UI,想要頁面好看可以去找 CSS 框架
    hubqin
        27
    hubqin  
       2020-02-21 12:30:39 +08:00
    AM2coder
        28
    AM2coder  
       2020-02-21 12:37:22 +08:00 via Android   ❤️ 1
    vue 还是很好上手的吧。把数据驱动这个概念搞清楚了,就好理解了。我的理解是,就是自己把需要呈现的网页的架子搭好,需要动态变化的地方留一个变量,然后用逻辑方法去改这个变量,网页就会自动渲染了。这整个过程都是由 vue 框架自己完成,我们只要写改变变量的那个逻辑。至于那个架子,可以找一个组件库来美化 UI。建议先不要用脚手架搭项目,先做一个单页的搞清楚原理再层层深入。
    wiluxy
        29
    wiluxy  
       2020-02-21 12:45:08 +08:00
    vue 和页面好看没有关系,如果说网站写的丑的话,应该看看 css,vue 就算用组件库也是别人已经定义好的样式,css 写的不 6 的话也是很难自定义样式的
    zhbzhbzhbz
        30
    zhbzhbzhbz  
       2020-02-21 12:48:01 +08:00
    @pastgift 才发现 element-UI 是饿了么搞的?
    sairoa
        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 学习之路卡在第一步了。
    clino
        32
    clino  
       2020-02-21 14:06:44 +08:00
    要好看可以找一些用 vue 的框架,比如 iview element 之类的,可以在这个上面找找: https://github.com/vuejs/awesome-vue
    guolaopi
        33
    guolaopi  
       2020-02-21 14:42:00 +08:00
    @sairoa data 属性是个函数
    cmdOptionKana
        34
    cmdOptionKana  
       2020-02-21 15:17:46 +08:00
    @sairoa 借题发挥歪个楼,有现代化 IDE/编辑器支持之下,还是静态类型语言好用,如果是静态语言,data 那里就会有类型错误提示了。
    murmur
        35
    murmur  
       2020-02-21 15:25:18 +08:00
    @cmdOptionKana
    @guolaopi
    data 不是 function 不是 fatal,如果是用 webpack 构建会报 warning,我刚才看了我写的 20 多个直接引用的 vue 页面,所有的 data 都是直接写 object,所有页面工作正常,浏览器不报提示
    当然我这是写漏了
    letitbesqzr
        36
    letitbesqzr  
       2020-02-21 15:31:33 +08:00
    如果只有比较“古老”的 js 基础 u,建议学 vue 之前,学下 es6 ,否则后面会一脸懵逼的。http://es6.ruanyifeng.com/
    dcoder
        37
    dcoder  
       2020-02-21 15:35:34 +08:00
    你们都不等着 Vue3 出来后再学么?
    "你们"指的是业余前端, 比如日常是写后端的人
    DoyouRocket
        38
    DoyouRocket  
       2020-02-21 15:39:36 +08:00   ❤️ 1
    vue 是数据驱动框架 管理数据用的 好看不好看是 UI 库 建议你看看 ElementUI 有 Vue 版本,然后推荐看 B 站上黑马的 Vue 商城项目视频
    kosmosr
        39
    kosmosr  
       2020-02-21 15:39:40 +08:00 via Android
    我是看别人的开源项目学会的,边学边写 配合官方文档
    shintendo
        40
    shintendo  
       2020-02-21 15:42:40 +08:00
    @guolaopi
    @cmdOptionKana
    data 只是推荐用函数,并没有强制,vue 官方文档就用 object,当然也不会报错
    Hanggi
        41
    Hanggi  
       2020-02-21 15:48:40 +08:00
    为什么要学 Vue ?学别的不好吗?
    murmur
        42
    murmur  
       2020-02-21 15:53:59 +08:00
    @Hanggi 在有前端基础的情况下,学 vue 和学 jquery 难度差不多,你如果一个页面一个页面 script 标签引用,把 vue 当高端模板引擎用都可以
    显然 react 这种连模板 if 和模板 for 都没有的,不得行
    cmdOptionKana
        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 }} 可能会被转义为别的东西。

    我猜就是这里有冲突。
    hackyuan
        44
    hackyuan  
       2020-02-21 16:22:53 +08:00
    看你说丑,那跟 Vue 是没有什么关系的。
    1. 首先你得先看大量的设计、学习布局样式配色。
    2. 然后再学习 CSS 来实现上步。
    sairoa
        45
    sairoa  
       2020-02-21 16:44:56 +08:00
    @cmdOptionKana 多谢啊,亏得我前两天还去查 jinja2 和 vue 冲突问题来的,一下子就点醒我了,在 vue 代码部分禁用 jinja2 就好了。
    cndydb
        46
    cndydb  
       2020-02-21 16:58:35 +08:00
    b 站上不是一大堆教程吗 刚还在看呢 看几天了解一下大概 想熟练就多敲敲 前提是你要有 js 基础 前端框架都是大同小异
    Hanggi
        47
    Hanggi  
       2020-02-21 17:09:53 +08:00
    @murmur 今天才知道有这么多人被 Vue 忽悠成这样。难怪 Vue 在国内这么火,洗脑成果?
    pushyzheng
        48
    pushyzheng  
       2020-02-21 17:34:01 +08:00
    vue 美的原因是有很多 UI 框架可以信手拈来?
    hmxxmh
        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,再找个稍微复杂的项目练手。
    一起学习,楼主有啥好的基础项目可以发一下我呀
    grewer
        50
    grewer  
       2020-02-21 17:48:22 +08:00
    @murmur
    因为 react 不需要 模板 if 和模板 for ,直接用 js 的 && ?: 数组的 map 就可以实现,何必多此一举
    murmur
        51
    murmur  
       2020-02-21 18:01:38 +08:00
    @pushyzheng 你写企业应用的话,复杂的表格、表单,写出来的 template 和最终渲染结果几乎没什么区别
    同样的内容,用 vue 写,不做他几层封装,乱的没法看
    我每写一个 class 就比你 className 少四个字母,我不换行一屏能看完的东西你得分几段
    还有 dangerouslySetInnerHTML 这是什么垃圾命名,你说我危险我就不敢用了,欺负我是厦大的?
    我就需要一个模板系统,我只做单纯的展示页面,curd,你给我那么多特性我也没用啊
    gz911122
        52
    gz911122  
       2020-02-21 18:02:37 +08:00
    @dcoder 不等了,我们讲究能用就行,不 care 什么 2 啊 3 啊的
    murmur
        53
    murmur  
       2020-02-21 18:09:19 +08:00
    *更正,第二行 vue->react
    KuroNekoFan
        54
    KuroNekoFan  
       2020-02-21 18:43:10 +08:00 via iPhone
    看了一些评论感觉:不想细看 js 就算了,但是要好歹懂得 html how to work,基本的 html 元素了解一下,基本的用户交互流程,概念,事件了解一下好吧……
    alphardex
        55
    alphardex  
       2020-02-21 21:19:08 +08:00   ❤️ 1
    UI 好看跟 Vue 关系不大,纯 HTML+CSS+JS 也能写出高颜值的 UI,可以参考下我的原生作品集: https://codepen.io/alphardex/pens/public
    soho176
        56
    soho176  
       2020-02-21 21:21:35 +08:00
    vue 不是适合做单页面应用吗?如果是 pc 网站 用 vue 好像不合适吧,不利于 seo
    fescover
        57
    fescover  
       2020-02-21 23:07:26 +08:00 via Android
    直接去搜 vuetify,跟着官网敲页面,立马就能明白
    WilliamLin
        58
    WilliamLin  
       2020-02-21 23:59:39 +08:00
    看 vue 官方文档,然后用上 vux,抄 demo 去,再加上看看 vux 的源码,很快就能来感觉了
    dcoder
        59
    dcoder  
       2020-02-22 04:05:00 +08:00
    @gz911122 回头 Vue3 出来后, 又新学一波新的 best practices, 好麻烦...
    tuomasi
        60
    tuomasi  
       2020-02-22 08:24:21 +08:00
    后端不要学前端,把时间用在精通后端上面,牛逼一点的后端都是套模板,敢于承认自己前端水,然后把繁琐的前端工作推给别人,但是在老板心里,掌握数据的那个人最重要
    encro
        61
    encro  
       2020-02-22 13:27:29 +08:00
    vue,ng,react 的核心事项就是数据绑定。
    我发现很多做了 2 年前端都不理解,写代码时候往往还是直接操作 dom。
    数据绑定的意思是:展示和数据分离,通过行为事件操作数据,实现界面自动更新。

    用 vue 下几个例子看就行了。
    不一定要一次全看懂。
    比如你看一个简单的 todo 例子,再看复杂一点的商城,然后再看网易云音乐模仿的,
    然后自己照着写一个其他的应用。

    可以参考一些 vue 的框架,如 bootstrap,ele,ant design 等
    Zchary
        62
    Zchary  
       2020-02-22 22:13:17 +08:00
    后端学啥 vue blazor 不香吗
    Cy86
        63
    Cy86  
    OP
       2020-02-23 10:14:36 +08:00
    感谢大家的提供的建议

    目前我会的前端技能:
    HTML JavaScript JQuery CSS

    目前学前端有三点原因:
    1. 做个人项目时, 找别人写前端, 感觉项目这个孩子不是一个爹的种, 心里的成就感大大降低
    2. 自己写前端也能写, 功能能达到, 但不完美, 很不标准
    3. 使用 Jinja2 或者 Django 模板腻了, 希望丰富下自己技能树

    目前看了大家的建议, 打算从官网学起来

    未来工作还是要主攻后端, 前端的话交给更专业的人来做
    shintendo
        64
    shintendo  
       2020-02-23 11:23:11 +08:00
    @Cy86 你的这些技能里,Vue 是用来代替其中的 jQuery 的,而好不好看是 CSS 决定的,所以你需要的是 CSS 框架如 bootstrap。也可以用封装程度更高的组件库如 ant design,element 等,这些就需要搭配 Vue 或者 React 用了
    Feva
        65
    Feva  
       2020-02-23 14:54:01 +08:00
    前端学习范围广
    先看看 ES6、HTML5、CSS3 基础
    打包工具
    页面适配、设计
    业务框架、页面框架
    慢慢踩坑吧
    cyberpoint
        66
    cyberpoint  
       2020-02-23 18:34:43 +08:00
    学习后端是最推荐的,前端坑太多,要适配的端太多。后端学好了,像你这种又懂一点前端的,稍微问一下前端人员,拉取下自己公司的项目,vue 很快上手了。
    YuTengjing
        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
    Cy86
        68
    Cy86  
    OP
       2020-02-24 22:21:42 +08:00
    @YuTengjing 感谢 [捂脸] 我之前一直以为 react 和 typescript 是同一款东西
    xuqiccr
        69
    xuqiccr  
       2020-02-25 09:23:47 +08:00
    @cmdOptionKana 对对对就是这样,感觉跟自己的思维方式完全不一样,所以一直没怎么看懂,谢谢大佬
    Hanggi
        70
    Hanggi  
       2020-02-26 13:47:43 +08:00
    我觉得你应该是试试分别把 Angular,React,Vue 官网上的例子跑一遍,看看哪个适合你,哪个用着更趁手。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2852 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:29 · PVG 21:29 · LAX 05:29 · JFK 08:29
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.