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

想使用 vue3 做一个网站,不清楚 vue3 做了什么工作.

  •  
  •   Kohana · 4 天前 · 2054 次点击

    我是大二科班的学生,学了半年的三板斧,有做自己 blog 的经验. 刚刚接触 vue3,希望学习 vue3 并利用它做一个类似于 MBTI 性格测试的网站,我觉得凭 html 、css 、js 也能足够做出来,所以不是很清楚 vue3 在前端开发所做的事情.在此请教一下各位大神,vue3 到底做了什么工作?或者说 vue3 怎么利用到网站制作中? 如果有大佬指点一二,不胜感激 https://www.16personalities.com/(MBTI 官网)

    22 条回复    2024-06-24 11:57:35 +08:00
    hrdom
        1
    hrdom  
       4 天前
    1.数据的自动绑定(比如说,已经答的 mbti 测试题数量,不需要通过 queryselector 改 html 里的数量进度字符串。)
    2.模块化开发(主要指 html ,原生的话不好封装很多的 html 为一个个模块。)
    vituralfuture
        2
    vituralfuture  
       4 天前 via Android
    避免了手动操作 DOM 树
    LeeReamond
        3
    LeeReamond  
       4 天前
    如果只有博客插件使用(开发)经验,比如片面地理解 html 和 css/js 代码,那么不建议使用。
    如果你像 0 楼说的已经熟练理解 html/css/js 的知识,那么 vue 等 mvvm 前端框架起到的作用是统合三者代码,像楼上说的自动绑定,例如传统要实现“显示一个数字、按下下方按钮时数字发生变化”的功能对于 js 是较复杂的,而由框架实现这部分内容时,你只需要直接修改对应变量的值即可让 dom 发生变化,大幅节约开发时间。
    另外还有模块化、组件化的一系列功能
    angrylid
        4
    angrylid  
       4 天前   ❤️ 1
    有时间多的话,不妨先用 HTML CSS JS 写一遍。

    没空的话,直接告诉你结论,用 Vue 或者 React 提高了你的<strong>开发效率</strong>和工程的<strong>可维护性</strong>。

    换言之,不用 Vue 也能出活,但是效率没那么高,然后你会思考怎么提高效率,重新发明一个类似 Vue 的东西,完了这个东西只有你自己知道怎么运作,别人接手以后难以维护。
    airyland
        5
    airyland  
       4 天前
    这个问题我觉得问 AI 更合适,可以得到更详细的答案。
    BeijingBaby
        6
    BeijingBaby  
       4 天前   ❤️ 1
    做了让很多前端保住饭碗的工作
    windliang
        7
    windliang  
       4 天前
    自荐个课,梳理了前端相关的所有知识点,https://xiaobot.net/p/fe?refer=1c9e2277-4405-4c12-93a9-5e982f62c9c6
    Track13
        8
    Track13  
       4 天前 via Android
    那你用原生 js 写个大概在学 vue 不就知道了。除了楼上说的。
    这些框架不仅提升了效率,还提高了下限。vue 简单代码都写的屎一样,不敢想象用原生写得多糟糕。
    yrj
        9
    yrj  
       4 天前
    直接用脚手架,解决了工程化的问题:)
    renmu
        10
    renmu  
       4 天前 via Android
    两种方式你都写一遍就知道 vue 干了啥事
    paopjian
        11
    paopjian  
       4 天前
    如果一点一不知道怎么回事,先学 HTML 打基础吧,美化的事是最后做的.
    https://www.freecodecamp.org/chinese/learn/2022/responsive-web-design/
    这网站一步步写代码有指导
    senw603
        12
    senw603  
       4 天前 via iPhone
    管理应用全局状态
    DOLLOR
        13
    DOLLOR  
       4 天前
    不需要大量地使用
    document.createElement()
    document.getElementById()
    element.appendChild()
    element.addEventListener()
    这些 DOM API 了
    vituralfuture
        14
    vituralfuture  
       4 天前 via Android
    @vituralfuture 而且原生 HTML➕JS 需要完全控制浏览器加载资源顺序,而前端框架都有打包工具可以帮你解决这个问题
    leegoo
        15
    leegoo  
       4 天前
    以前建房子,外部的框架结构(或者说主体) 可能都是用竹子,木头等,虽然可以建,但是你得自己从山上拉竹子,锯树把,你得学会自己挑选竹子,自己锯木头,然后拉到建房子的地方,这样很慢对不对?

    那现在呢,大家都用钢筋混泥土,又快又好。你只要跟 卖钢材的老板说,我要多少钢筋,多少混泥土就行了。
    Kohana
        16
    Kohana  
    OP
       4 天前
    @hrdom 谢谢你,大概了解了
    Kohana
        17
    Kohana  
    OP
       4 天前
    @LeeReamond 谢谢谢谢~讲的真的很清楚
    Kohana
        18
    Kohana  
    OP
       4 天前
    @DOLLOR 谢谢,我会去谷歌一下常用的接口
    Kohana
        19
    Kohana  
    OP
       4 天前
    @vituralfuture 我之前确实是需要一步一步控制 dom 走向,我会去尝试使用 vue3 来代替这些操作的,谢谢!
    Chuckle
        20
    Chuckle  
       4 天前
    操作 dom 的代码通常都是大量而又重复的,和业务代码杂糅在一起非常阔怕,框架帮你去操作 dom 并进行了性能优化,实现将数据和页面视图进行绑定,而你只需要按照框架的规则去完成业务逻辑。很多业务也是相似的,比如表格、下拉框、表单,于是基于框架,就有了各种组件库,拿来就用,效率 max 。
    此外组件化、模块化,维护和添加功能都方便,状态管理让数据流清晰明了,还有生命周期、上下文之类的概念。js 是个很自由的语言,框架不仅提高了开发效率,还保证了代码质量的下限,当然最后打包出来还是原生 js 。学习框架就是学习它的规则,即各种 api 和写法,在这之前,前端工程化也需要了解了解。
    cnuser002
        21
    cnuser002  
       4 天前
    前端三件套本来是设计用来画网页的。类似传单的感觉。


    现在拿来做互动界面,类似游戏里的按钮、列表啊这些。 许多地方没有约定俗称的范式,要自己去编写,这就麻烦了。

    Vue React 这些框架,就是提供了一整套思路,和配套的工具,让你按他的思路去组织代码,底层的一些细节它们包解决。
    最后由框架将其编译回三件套。
    chenliangngng
        22
    chenliangngng  
       4 天前
    你先自己用 js,html,css 写一个页面,然后再用 jquery 写一个页面,然后再用 vue3 写一个页面,这种效率的递进和思维模式的转变,是显而易见的
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4912 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 05:51 · PVG 13:51 · LAX 22:51 · JFK 01:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.