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

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

  •  
  •   Kohana · 26 天前 · 2455 次点击

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

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

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

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

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


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

    Vue React 这些框架,就是提供了一整套思路,和配套的工具,让你按他的思路去组织代码,底层的一些细节它们包解决。
    最后由框架将其编译回三件套。
    chenliangngng
        22
    chenliangngng  
       25 天前
    你先自己用 js,html,css 写一个页面,然后再用 jquery 写一个页面,然后再用 vue3 写一个页面,这种效率的递进和思维模式的转变,是显而易见的
    maymay5
        23
    maymay5  
       15 天前
    .NET MVC 也有类似数据驱动页面的方式,但我很不喜欢这种方式,方便是方便了,总有一种 html 脏了的感觉,更多时候我喜欢用 jquery 糊😑
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2720 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 03:10 · PVG 11:10 · LAX 20:10 · JFK 23:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.