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

如何自学 Vue 呢

  •  
  •   Cy86 · 47 天前 · 5241 次点击
    这是一个创建于 47 天前的主题,其中的信息可能已经有所发展或是发生改变。

    自学了 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   47 天前
    vue 跟丑还是好看没有任何关系
    airyland
        2
    airyland   47 天前   ❤️ 1
    Vue 官方文档很详细了,不要只看,开始照着写,很快就入门了。
    pastgift
        3
    pastgift   47 天前 via iPhone
    vue 看官网教程就行了,一般 vuex,vue-router 一起来
    UI 想好看直接 element-UI 就好,一样看官网文档即可
    两个都是国产,文档和设计都挺符合国人脑洞的
    gebishushu
        4
    gebishushu   47 天前
    好看不好看 跟 vue 无关吧
    跟框架有关吧
    EyreYoung
        5
    EyreYoung   46 天前
    这是 js 框架,单纯方便写代码,跟好不好看没关系。ant design element-ui 啥的才是外观。
    tonytonychopper
        6
    tonytonychopper   46 天前 via Android
    好不好看跟 Vue 没有关系
    DOLLOR
        7
    DOLLOR   46 天前
    官网教程
    https://cn.vuejs.org/v2/guide/

    先从最简单的标签引入开始,不要急着就上构建工具。
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    cmdOptionKana
        8
    cmdOptionKana   46 天前   ❤️ 3
    我猜你的问题在于,一直学习的编程方式都是线性逻辑的,也就是说,必须先写第 1、2、3 行代码,然后第 4 行代码才有意义,它们的前后顺序非常明确。

    而 Vue 的编程方式是非线性的,数据驱动的。

    学习 Vue 的时候,请注意把思维拆成两个部分:1.界面布局,2.填充数据。

    一般来说,你应该先大概弄好界面布局,然后通过改变数据来出发界面的变化。

    比如你看这里 https://cn.vuejs.org/v2/guide/ 其中 “条件与循环” 部分,它教你 “在控制台输入 app3.seen = false,你会发现之前显示的消息消失了”,这个通过改变数据来改变界面的思想是关键,请仔细品味这个例子。
    labulaka521
        9
    labulaka521   46 天前 via Android
    看下 js html vue 官网过一遍就 OK 了
    zhw2590582
        10
    zhw2590582   46 天前 via iPhone
    前期什么都不要配置,像 webpack,bable 什么的不要管,像 jq 直接引入先熟练一下
    cuberlzy
        11
    cuberlzy   46 天前
    vue 和开发体验、性能等有关系……好不好看的,瞅瞅 antd 之类的吧
    mrcotter2013
        12
    mrcotter2013   46 天前 via iPhone
    UI 可以从参考别人的开始,这个需要学习一些入门的设计和配色,包括工具的使用
    murmur
        13
    murmur   46 天前   ❤️ 1
    1、掌握最基本的 css、html、js 基础
    2、找个 ui 框架,直接 init 一个空项目
    3、了解 vue 的 data、模板、组件化、三段式写法
    4、恭喜你已经可以开始干活了
    murmur
        14
    murmur   46 天前
    丑是正常的,要么抄要么用模板,不要一开始就自己做设计
    mikulch
        15
    mikulch   46 天前 via iPhone
    @murmur 每个前端的帖子里面都有你
    justin2018
        16
    justin2018   46 天前
    看官方文档 或者 看视频

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

    <script src="{{url_for('static', filename='js/vue.js')}}"></script>这句,显然你用了一个 html 模板,而这个模板恰好也是用双重大括号来转义,那么,{{ message }} 可能会被转义为别的东西。

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

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

    可以参考一些 vue 的框架,如 bootstrap,ele,ant design 等
    Zchary
        62
    Zchary   45 天前
    后端学啥 vue blazor 不香吗
    Cy86
        63
    Cy86   44 天前
    感谢大家的提供的建议

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

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

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

    未来工作还是要主攻后端, 前端的话交给更专业的人来做
    shintendo
        64
    shintendo   44 天前
    @Cy86 你的这些技能里,Vue 是用来代替其中的 jQuery 的,而好不好看是 CSS 决定的,所以你需要的是 CSS 框架如 bootstrap。也可以用封装程度更高的组件库如 ant design,element 等,这些就需要搭配 Vue 或者 React 用了
    Feva
        65
    Feva   44 天前
    前端学习范围广
    先看看 ES6、HTML5、CSS3 基础
    打包工具
    页面适配、设计
    业务框架、页面框架
    慢慢踩坑吧
    cyberpoint
        66
    cyberpoint   44 天前
    学习后端是最推荐的,前端坑太多,要适配的端太多。后端学好了,像你这种又懂一点前端的,稍微问一下前端人员,拉取下自己公司的项目,vue 很快上手了。
    YuTengjing
        67
    YuTengjing   44 天前
    学框架要先把核心思想给弄清楚,以及用框架的好处在哪里。

    vue 是数据驱动,比起 jquery 的事件驱动,直接操作 DOM 更加简便直观,
    vue 是组件化的,界面都是由一个个组件拼起来的,为了更灵活的操作组件,又引进了生命周期的概念
    建议有时间先把 webapack 那一套东西给看一遍,不然你总会感觉 vue-cli 就像是黑魔法,想改个配置都不敢改。

    最近写了一个从零开始配置 react + typescript 的教程,有兴趣可以看一下: https://github.com/tjx666/react-typescript-boilerplate
    Cy86
        68
    Cy86   42 天前
    @YuTengjing 感谢 [捂脸] 我之前一直以为 react 和 typescript 是同一款东西
    xuqiccr
        69
    xuqiccr   42 天前
    @cmdOptionKana 对对对就是这样,感觉跟自己的思维方式完全不一样,所以一直没怎么看懂,谢谢大佬
    Hanggi
        70
    Hanggi   41 天前
    我觉得你应该是试试分别把 Angular,React,Vue 官网上的例子跑一遍,看看哪个适合你,哪个用着更趁手。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3176 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:17 · PVG 22:17 · LAX 07:17 · JFK 10:17
    ♥ Do have faith in what you're doing.