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

初次上手 Vue.js 开发效率确实高!从此跟 Jquery 说拜拜!

  •  
  •   pytth · 2022-05-11 16:28:58 +08:00 · 10154 次点击
    这是一个创建于 764 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一些看法

    在 V2 看了一些吐槽 Vue 的项目构建的一些文章,有说 node_module 目录太大,webpack 等工具的缺点等问题,但这就是构建 Vue 项目所需的一些操作,嫌麻烦,嫌笨重,可以用其他办法。也可以用官方脚手架等方式,还有新兴的 Vite ,还可以用传统的<script>标签引入 Vue.js 文件去写。

    当然这个都是看需求的,如果一个非常简单的页面,用不上太多的 API ,其实用传统的方法去写也是可以的。本人 html 也写了几年,Vue 还真没有认真去学过,偶尔搜一些相关文章看看,也没有认真去写过。

    趋势

    但越来越多平台、网站已经向单页应用的趋势发展,浏览器无刷新,路由等方式,这种页面体验起来也是非常舒服的,Vue 、React 都是目前构建项目的主流。

    有些人觉得学习成本挺高的,还不如直接 jquery 操作 Dom 实在一些,至少不需要将时间和经历花在环境调试和构建。实际上这些都是有很多解决方案的,不想那么复杂就直接 Vite 也可以快速构建。

    初体验

    顺着 Vue.js 官网的文档,我还是尝试先用传统的引入 Vue.js 文件的方式,花了 2 个上午(因为下午要忙工作),简单得撸了一个项目熟悉一下 Vue 的特性。与 jquery 不同的是,jquery 是操作 Dom ,而 Vue 是操作数据。

    后面还是需要认认真真学一下脚手架、Vite 等方式构建项目。。。

    95 条回复    2022-05-13 18:23:40 +08:00
    Ashore
        1
    Ashore  
       2022-05-11 17:07:46 +08:00
    厉害了 想拥抱 vue 但是又不知道从何入手。。。
    Issuema
        2
    Issuema  
       2022-05-11 17:13:37 +08:00
    vue 毕竟是国人写的嘛,看着中文文档,cv 就可用。只是官网的教程有些功能提都没提,得去 github 看英文说明
    codefever
        3
    codefever  
       2022-05-11 17:14:17 +08:00
    jQuery 以后会退出前端世界,但 jQuery 会长期存活在教科书里成为活化石一样的存在。
    hhhanako
        4
    hhhanako  
       2022-05-11 17:14:38 +08:00   ❤️ 32
    你也网上冲浪啦
    jswh
        5
    jswh  
       2022-05-11 17:24:49 +08:00
    致远星战况如何(狗头
    darksword21
        6
    darksword21  
       2022-05-11 17:26:24 +08:00 via iPhone
    纯后端,对前端还停留在那种写好文件在游览器打开的程度,所以有个比较蠢的问题想问一下

    我看前端现在运行后也都是会开启一个服务,有个端口,这是也类似于后端开发吗?
    liyang5945
        7
    liyang5945  
       2022-05-11 17:26:39 +08:00 via Android
    3G 网速真快
    windyboy
        8
    windyboy  
       2022-05-11 17:26:50 +08:00
    既然是新技术不如试一下 svelte
    qzsi001
        9
    qzsi001  
       2022-05-11 17:29:40 +08:00
    今年是 2017 年?
    pengtdyd
        10
    pengtdyd  
       2022-05-11 17:30:14 +08:00
    村里通网了?
    horseInBlack
        11
    horseInBlack  
       2022-05-11 17:30:55 +08:00   ❤️ 1
    @darksword21 #6

    前端用 webpack 等打包工具,可以在开发调试的时候配置各种命令,比如开启一个本地 Web 服务,一旦源代码有修改自动重新构建刷新页面,还有跨域代理、处理兼容性等功能,运行这套服务依赖 NodeJS ,确实是后端

    开发调试完成,项目上线之前打包程序,也是生成浏览器直接可以读取运行的 HTML/CSS/JS ,本质上还是前端构建页面、处理从后端获取的数据
    abersheeran
        12
    abersheeran  
       2022-05-11 17:33:21 +08:00
    @windyboy svelte 不能操起 html 就写吧
    darksword21
        13
    darksword21  
       2022-05-11 17:33:32 +08:00 via iPhone
    @horseInBlack 那发到部署后还需要 node 吗还是只是本地调试方便的时候用
    cmdOptionKana
        14
    cmdOptionKana  
       2022-05-11 17:34:40 +08:00
    其实 jquery 不一定比 vue 差,看具体需求,比如楼主做的论坛网站,一般不会动态拉取数据,更可能是做静态化,这种情况下 vue 并没有明显的优势。

    (你说为了工作练手、为了好玩我同意用 vue 很好,但你说做论坛明显比 jquery 好却不见得)

    (以上 jquery 包含 dom api 抄 jquery 的语法)
    HelloWorld556
        15
    HelloWorld556  
       2022-05-11 17:36:50 +08:00
    部署后一般用 Nginx @darksword21
    chloerei
        16
    chloerei  
       2022-05-11 17:37:00 +08:00
    vue/react 和 jQuery 不是直接替换关系。

    可以看看 https://youmightnotneedjquery.com/ ,jQuery 现在变得不重要的原因主要是被浏览器原生 API 替代了,例如 querySelector 和 Fetch API ,这些新的原生 API 都从 jQuery 学了不少东西。

    SPA 比 SSR + 少量 js 操作开发效率要高吗?我觉得不一定。像顶楼的例子是个论坛,考虑下 SEO 咋整?
    horseInBlack
        17
    horseInBlack  
       2022-05-11 17:41:41 +08:00   ❤️ 2
    @darksword21 #13

    打包以后就是 HTML/CSS/JS 和其他静态资源啊,都是浏览器直接运行的文件,现在前端写的那些框架,.vue / .jsx / .less 也不可能直接让浏览器全都支持,还是要翻译成浏览器能认识的文件

    就好比高级语言写的代码要 编译以后运行

    现在前端的框架就是用更加简单更加符合人类直觉的写法写程序,把管理资源、处理兼容性等问题交给框架处理,最后让打包工具打包出来浏览器运行的文件

    前端框架能做的那些事,直接手写 JS 肯定也能做到,理论上来说可以更好,但是那得要求编码人员拥有相当不错的水平,作为平庸的大多数之一我还是喜欢把这些事交给框架处理
    FreshOldMan
        18
    FreshOldMan  
       2022-05-11 17:43:29 +08:00
    大清亡辣
    misaka19000
        19
    misaka19000  
       2022-05-11 17:48:24 +08:00   ❤️ 2
    我倒,你也网上冲浪啊🙃
    libook
        20
    libook  
       2022-05-11 17:52:48 +08:00   ❤️ 3
    https://youmightnotneedjquery.com/
    这些新出的原生 Web API 替代了 jQuery 。强烈建议自己用原生 Web API 写一个具备一定交互功能的现代网页试试,借助最新的 Web 特性,写起来也挺方便的。

    框架其实以前也有,比如 Backbone 和 Angualr ,Vue 如今也是发展到了第三代; jQuery 提供给开发者更方便地操作 DOM 的方案,框架是从另一个角度来满足生产需求,即不需要自己操作 DOM ,而是由框架来完成 DOM 的操作,自己只需要写业务逻辑。

    Vue 的文档是我度过的最贴心的的文档之一,总能在我看到产生疑问的地方马上就解答我的疑问。
    darksword21
        21
    darksword21  
       2022-05-11 17:58:03 +08:00 via iPhone
    @horseInBlack 感谢!
    Liuman
        22
    Liuman  
       2022-05-11 17:58:21 +08:00
    我晕,你也网上冲浪啊
    windyboy
        23
    windyboy  
       2022-05-11 18:01:39 +08:00
    @abersheeran 没看明白,什么叫 “不能操起 html 就写吧”
    wonderfulcxm
        24
    wonderfulcxm  
       2022-05-11 18:01:52 +08:00 via iPhone
    seo 不好
    feitxue
        25
    feitxue  
       2022-05-11 18:01:54 +08:00
    @darksword21 哈哈.大兄弟你这 100%纯后端啊,一点前端东西不用碰..羡慕...
    byx
        26
    byx  
       2022-05-11 18:23:47 +08:00
    你是 MM 还是 GG~
    learningman
        27
    learningman  
       2022-05-11 18:37:47 +08:00
    @codefever 你这个以后是多少年啊,IE 都还没退出呢
    Troevil
        28
    Troevil  
       2022-05-11 18:41:04 +08:00
    @windyboy #23 他应该指的应该是无需编译可以直接运行吧
    shakukansp
        29
    shakukansp  
       2022-05-11 18:43:04 +08:00
    现在如果是面向传统多页面的应用,要使用现代框架还有 ssg 这个办法
    也基本上就是操起 html 就写
    darknoll
        30
    darknoll  
       2022-05-11 19:15:07 +08:00
    大明亡了啊
    codingBug
        31
    codingBug  
       2022-05-11 19:16:53 +08:00
    上个世纪???
    grewer
        32
    grewer  
       2022-05-11 19:19:48 +08:00
    这已经不是火星了
    konata
        33
    konata  
       2022-05-11 19:30:48 +08:00
    管它前端怎么样美化,我只用写好能返回的 json 就可以了
    yaphets666
        34
    yaphets666  
       2022-05-11 20:09:29 +08:00
    @wonderfulcxm serve side render 了解下
    dcsuibian
        35
    dcsuibian  
       2022-05-11 20:25:57 +08:00
    乐观估计 5 年内还能看到这种帖子。
    但还是恭喜。
    wonderfulcxm
        36
    wonderfulcxm  
       2022-05-11 20:35:28 +08:00 via iPhone
    @yaphets666 简单问题复杂化,又包一层而已,没有什么计算机问题不是多加一层能解决的,而后端渲染天然就是 ssr 。现在不是增加一层解决了一个原来不存在的问题,同时增加了就业机会。
    DOLLOR
        37
    DOLLOR  
       2022-05-11 20:39:28 +08:00
    @wonderfulcxm
    现在的后端都不愿接触 HTML 、CSS 、JS 了,前端也不想在自己电脑上跑个后端项目写页面。
    不如干脆彻底分工,前后端各自在自己的领域卷卷卷。
    star7th
        38
    star7th  
       2022-05-11 20:40:57 +08:00
    如果你是后端程序员的话,还可以理解,毕竟对你来说是打开了一个新世界大门。如果你是前端开发,我只能说你要学的还有很多很多。。。
    licoycn
        39
    licoycn  
       2022-05-11 21:45:55 +08:00
    不管怎么变,前端后端我都要!!!
    zeroxia
        40
    zeroxia  
       2022-05-11 21:48:50 +08:00
    请推荐 vue.js v3 的书籍!
    fayetitus
        41
    fayetitus  
       2022-05-11 21:54:49 +08:00
    我,我在 2022 ?
    yeqizhang
        42
    yeqizhang  
       2022-05-11 21:58:56 +08:00 via Android
    骚年,来写 jsx 吧
    iwdmb
        43
    iwdmb  
       2022-05-11 22:06:29 +08:00
    記得 all in TESLA
    pytth
        44
    pytth  
    OP
       2022-05-11 22:08:05 +08:00 via iPhone
    @liyang5945
    @pengtdyd
    @qzsi001
    @hhhanako
    @FreshOldMan
    @misaka19000
    @Liuman
    @darknoll
    @codingBug
    @grewer
    @fayetitus

    平时写后端比较多,前端知识还停留在 2016 年那时候的水平,只是觉得这两年很火爆,被吸引到了,就尝试拥抱时代,拥抱新技术。
    pytth
        45
    pytth  
    OP
       2022-05-11 22:09:20 +08:00 via iPhone
    @libook 确实原生的写法可能会更纯粹吧
    pytth
        46
    pytth  
    OP
       2022-05-11 22:11:21 +08:00 via iPhone
    @darksword21 现在的前端写好了不一定可以在浏览器打开,因为浏览器不认识,通过一些工具编译后,编译成 html,csa,js 才能部署到服务器。

    开发的时候,需要浏览器进行预览,调试,所以需要开启这个本地服务作为开发环境。
    pytth
        47
    pytth  
    OP
       2022-05-11 22:13:13 +08:00 via iPhone
    @codefever 就像谭浩强的 C 语言程序设计那本书一样,很多代码已经不能跑了,而现在大部分的学校还作为课堂的教科书。
    duke807
        48
    duke807  
       2022-05-11 22:25:13 +08:00 via Android   ❤️ 1
    用了一圈下來,發現還是這個框架最好:vanilla-js.com
    acoldfox
        49
    acoldfox  
       2022-05-11 22:25:33 +08:00
    看了楼主又看了一楼的回复,有种翻到坟贴的感觉
    haah
        50
    haah  
       2022-05-11 22:43:23 +08:00
    我个人觉得——你可能想多了!
    quanjw
        51
    quanjw  
       2022-05-11 22:43:33 +08:00
    然后又要学 ES6 一个头两个大
    techstay
        52
    techstay  
       2022-05-11 23:07:54 +08:00
    vue3 是真的不错,速度很快感觉
    crazykay
        53
    crazykay  
       2022-05-12 01:01:53 +08:00 via Android
    缩圈了,拥抱纯 Web component 和 deno.js 。别的我都没兴趣搞。
    abcd191898105
        54
    abcd191898105  
       2022-05-12 01:15:56 +08:00 via Android
    @Issuema 鱿大是外国人,别套近乎,搞得好像跟你很熟似的。人家气场也和你不一样。
    agagega
        55
    agagega  
       2022-05-12 01:30:59 +08:00
    或许你还可以了解一下 Stimulus ?
    vHypnos
        56
    vHypnos  
       2022-05-12 01:33:55 +08:00 via iPhone
    作为 react 老手,刚开始写 vue2 真的被 sfc 折磨的不行。正在积极推进组内换 vue3+nuxt 。。然后看看能不能写 tsx
    Felldeadbird
        57
    Felldeadbird  
       2022-05-12 09:14:21 +08:00
    VUE 合适单页应用,不在于 SEO 的应用环境。VUE 相比起传统的模式,编写的业务更加需要细致化。例如:如何保存历史页,刷新保持当前页。页面跳转,页面回顶部。而不是停留在当前浏览区域。 官方文档都有说到上面的问题,也有解决方案。但是正常开发如果没留意这些,很容易就造成体验很奇怪的现象。

    JQ 我现在还在用,两者我觉得是互补,而不是谁替代谁的关系。
    ikaros
        58
    ikaros  
       2022-05-12 09:23:15 +08:00
    我还在用服务端渲染和 jQuery, 主要优势是对于内容平台来说 SEO 比较友好 vue 这些有什么解决方案吗
    yaphets666
        59
    yaphets666  
       2022-05-12 09:35:15 +08:00
    @wonderfulcxm 啥叫简单问题复杂化。。。vue 能极大提升开发效率啊,使用工具叫简单问题复杂化?
    shanghai1998
        60
    shanghai1998  
       2022-05-12 09:50:21 +08:00
    flutter 是为了移动端和嵌入式;
    h5 太臃肿了,或者不好用;就比如有了 jquery 为什么还要 vue ,虽然 vue 做的事,jquery 大部分也能做,只是繁琐很多
    abersheeran
        61
    abersheeran  
       2022-05-12 09:51:14 +08:00
    @windyboy 在 html 里写一个 script 从 CDN 引入一下,就可以开始写,而不是需要下载一个 nodejs 环境跑各种命令。
    longzn
        62
    longzn  
       2022-05-12 09:51:51 +08:00
    什么明年北京要办奥运会了!!!!
    sickoo
        63
    sickoo  
       2022-05-12 09:57:16 +08:00
    solid.js
    iovekkk
        64
    iovekkk  
       2022-05-12 09:59:37 +08:00
    赶紧买房,21 年会暴涨一波
    DreamCMS
        65
    DreamCMS  
       2022-05-12 10:01:24 +08:00
    我还是觉得 jq 好,如果以后前端都打包形式的话,不利于前端技术的发展
    LavaC
        66
    LavaC  
       2022-05-12 10:02:25 +08:00
    页面不太复杂的话可以用 Alpine.js 这种轻量化框架。
    Dragonphy
        67
    Dragonphy  
       2022-05-12 10:09:12 +08:00
    @zeroxia #40
    《 Vue 设计与实现》
    seamonster
        68
    seamonster  
       2022-05-12 10:17:10 +08:00
    我自学 vue 写的舔狗网站: https://wedog.ru
    h1104350235
        69
    h1104350235  
       2022-05-12 10:17:17 +08:00
    俺们村也连上 4G 了
    pytth
        70
    pytth  
    OP
       2022-05-12 10:31:42 +08:00
    @iovekkk 刚好去年买了~坐标广州
    pytth
        71
    pytth  
    OP
       2022-05-12 10:32:47 +08:00
    @shanghai1998 因为我看到太多人吐槽 jquery 来秀 vue 的优越感了...
    pytth
        72
    pytth  
    OP
       2022-05-12 10:33:58 +08:00
    @Felldeadbird jquery 我还在用的原因就是有个比较方便的 ajax
    iovekkk
        73
    iovekkk  
       2022-05-12 10:35:47 +08:00
    @pytth 你这是高位的时候买的啊
    DOLLOR
        74
    DOLLOR  
       2022-05-12 10:59:42 +08:00 via Android
    @DreamCMS
    恰好相反,正是打包工具链的存在促进了前端的发展,否则前端今天还在写 ES3 调兼容。
    cangcang
        75
    cangcang  
       2022-05-12 11:15:23 +08:00
    @pytth 嗯,现在前端代码要用 babel 编译已经是基操了
    gam2046
        76
    gam2046  
       2022-05-12 11:22:18 +08:00
    vue 真心入门简单,有点其他语言基础的,缝缝补补,看一天就能写个还凑合的前端了。屏蔽的很多技术细节。

    electron 这种采用 vue 开发 UI ,速度也挺快的。我已经好几个需要 UI 的项目都采用 electron + vue 开发了,不图别的,就是简单。当然如果只需要 Windows ,C#那一套也很简单。
    dvsilch
        77
    dvsilch  
       2022-05-12 11:24:50 +08:00
    @DreamCMS https://www.v2ex.com/t/851925 #reply66 是个很形象的比喻,放到前端这边也适用
    Abbeyok
        78
    Abbeyok  
       2022-05-12 11:32:28 +08:00
    我也想上手 vue 了
    agdhole
        79
    agdhole  
       2022-05-12 11:47:04 +08:00
    @pytth #72 ajax 方便在哪里?轻量级 fetch 几行就弄好了,或者引入一个 axios
    ciki
        80
    ciki  
       2022-05-12 11:53:00 +08:00
    本能的看了下发帖时间
    creanme
        81
    creanme  
       2022-05-12 11:55:34 +08:00
    不管是 vue, react, 还是 angular ,单页 seo 都太恼火了,如果为了 seo 而上 nuxt.js 或者 next.js 的话,听说工作量至少增加 50%。
    awesomes
        82
    awesomes  
       2022-05-12 12:00:23 +08:00
    是我穿越了吗,为什么 2022 还能看到这种文章
    Blanke
        83
    Blanke  
       2022-05-12 13:38:18 +08:00
    本能的看了下发帖时间 +1
    NoKey
        84
    NoKey  
       2022-05-12 13:55:27 +08:00
    哎。。。我还以为谁挖坟了呢。。。
    TomPig0216
        85
    TomPig0216  
       2022-05-12 14:32:10 +08:00
    vue 的官方文档真的详细 看起来不要太爽
    TomPig0216
        86
    TomPig0216  
       2022-05-12 14:32:41 +08:00
    尤其是现在 vue3 的版本的语法写起来更得劲了
    PEAL
        87
    PEAL  
       2022-05-12 15:07:03 +08:00
    @creanme 根本原因还是百度垃圾,不支持爬取 js 渲染的内容
    pytth
        88
    pytth  
    OP
       2022-05-12 15:31:25 +08:00
    @PEAL 用爬虫没办法爬到单页的内容吧,毕竟都是需要浏览器去渲染。所以 seo 这块真的不友好。
    zengzizhao
        89
    zengzizhao  
       2022-05-12 16:24:22 +08:00
    " 就像谭浩强的 C 语言程序设计那本书一样,很多代码已经不能跑了,而现在大部分的学校还作为课堂的教科书。"
    op ,你确定很多代码都已经不能跑了吗
    FightPig
        90
    FightPig  
       2022-05-12 17:02:09 +08:00
    我远 svelte
    PonysDad
        91
    PonysDad  
       2022-05-12 17:56:53 +08:00
    现在是北京时间 2022-05-12 17:56
    pytth
        92
    pytth  
    OP
       2022-05-12 20:27:53 +08:00 via iPhone
    @zengzizhao 可以跑,用旧的办法~
    mostkia
        93
    mostkia  
       2022-05-13 08:24:37 +08:00
    场景不同,各有优劣,不能说 vue 肯定比 jquery 好,精细化操作 dom ,还得原生 js ,而简化原生代码开发难度的,就是 jquery 这类库,vue 在自己能力范围内工作的很好,可以大幅提高效率,但超出能力范围后简直就是捏着鼻子开发。
    snow0
        94
    snow0  
       2022-05-13 14:24:40 +08:00   ❤️ 1
    @darksword21 在 ide 中开发时确实需要一个端口启动,但是最终打包好后,还是一些 js 、html 文件,放在 nginx 上指定一个端口访问
    unco020511
        95
    unco020511  
       2022-05-13 18:23:40 +08:00
    我以为我看的是五年前的帖子
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5526 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 02:09 · PVG 10:09 · LAX 19:09 · JFK 22:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.