01:实用至上主义的VUE3 - 单击计数器

通过口语化的方式结合实战场景,详细讲解vue3执行中的每一步。希望能帮助大家理解基础的vue3运行逻辑和其中运用的方式方法。

现在,你是一名高级前端开发。接到一个业务需求如下:

需要在页面上添加一个按钮,用户单击一次,就加一,同时显示单击次数,

但是你最近在学 VUE3 ,于是,你想研究下,看看是原生 JS 好用,还是 VUE3 更适合。

流程

01:实用至上主义的VUE3 - 单击计数器

原生 JS 实现

代码如下

    <button onclick="myClick()">单击我</button>
    <span id="clickCount">0</span>次
    <script>
        let count = 0; // 初始化计数器为0
        const clickCount = document.getElementById("clickCount"); // 获取显示次数的元素
        function myClick() {
            count++; // 每次单击计数器加1
            clickCount.innerHTML = count; // 将计数器的值显示在页面上
        }
    </script>

相信你在注释的帮助下,可以简单看懂代码的大概含义。

VUE3 实现

代码如下

    <script src="https://unpkg.com/vue@3.3.4"></script>
    <div id="Application">
        <button v-on:click="myClick()">单击我</button>
        <p>单击了{{ins}}次</p>
        <h3>VUE3</h3>
    </div>
    <script>
        const App = Vue.createApp({
            setup() {
                let ins = Vue.ref(0)
                function myClick() {
                    ins.value = ins.value + 1
                }
                return { ins, myClick }
            }
        })
        App.mount("#Application")
    </script>

以上为实现目标功能的全部代码,接下来,我们一一介绍

Vue 使用一种基于 HTML 的模板语法,使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML,可以被符合规范的浏览器和 HTML 解析器解析。

引入资源

为了方便演示,我们没有使用常见的 NODE 管理方法,而是在单个页面上使用 VUE3 的各种功能特性,基于“渐进式开发”理念,我们可以很方便的在某一个功能中使用 VUE3 的特性。

同一般的框架类似,我们在页面上,直接使用 CDN 链接,在页面上载入 VUE3 资源。

 <script src="https://unpkg.com/vue@3.3.4"></script>

这里,我们指定了当前 VUE3 的最新的版本 - 3.3.4

准备节点

<div id="Application">
</div>

为了让我们准备好的值和方法能有用武之地,准备一块地方,让他们施展拳脚

绑定单击事件

 <button v-on:click="myClick()">单击我+1</button>

我们为按钮绑定一个单击事件,单击则触发效果。

但是, Application 这块地盘,JS 中已经交给 VUE3 管理了,

所以,现在得听 VUE3 的话。

我们通过 v-on:click 来绑定我们在 VUE3 中准备好的 myClick() 函数。

展示数据

 <p>单击了{{ins}}次</p>

在 VUE3 管理的地方,展示 VUE3 中的数据是通过特殊语法 {{}} 来实现的

双大括号标签会被替换为相应组件实例中 ins 属性(监控)的值。同时每次 ins 属性(监控)更改时它也会同步更新。

创建组件

有了 VUE3 框架,我们就可以使用其中提供的 createApp 方法来创建实例了,也可以理解为组件

const App = Vue.createApp({}): 创建一个Vue应用实例,并将其赋值给变量App。

初始化数据

setup(): 在组件中定义一个 setup 函数,该函数会在组件初始化时被调用。

在页面加载的一开始,我们就开始准备各种数据,

此时,页面中还啥都没有。

创建响应式变量

let ins = Vue.ref(0): 使用 VUE3 的 ref 方法创建一个响应式引用 ins ,初始值为 0 。

在此功能中,我们需要一个变量来存储当前的初始单击次数,我们使用 VUE3 中提供的 ref 方法,来创建一个初始值为 0 的响应式变量。

响应式的意思,就是这个值被一个盒子装起来,里面有个摄像头。

变量值被摄像头( value )全程监视着,这个变量发生的每一个细微变化,都可以通过摄像头( value )一清二楚的展示出来。

创建单击方法

function myClick() {
    ins.value = ins.value + 1
}

function myClick() { ... }: 定义一个名为 myClick 的函数,用于将 ins 的值加1。

我们无法直接知道当前 ins 的值,但是,我们可以通过摄像头( value )来了解,目前的 ins 的值是多少,那就是 ins.value

因为变量 ins 被盒子装起来了,我们只记得 ins 刚刚被装进去的样子(0)。

如果我们直接拿 ins 的值,那么他的值一直都是被盒子关起来之前的样子,那就是 0 。

返回值

return { ins, myClick }

return { ins, click }: 将 insclick 作为对象返回,以便在模板中使用。

在展示数据时,我们需要用到初始值和单击的方法,所以,我们把 setup 函数中,我们需要的值返回出来,以供组件使用。

挂载到文档模型

App.mount("#Application")

我们准备好了一切,应该给他们一个可以用的上的地方,将 Application 节点托管给 VUE3 管理。

App.mount("#Application"): 将 App 挂载到 id 为 "Application" 的 DOM 元素上,从而在页面中显示出这个组件的内容。

总结

这么简单的需求,我用原生 JS ,10行代码就搞定了,哪还用的上 VUE3 的17行代码这么复杂。

但你发现,虽然效果一样,但在具体的实现逻辑上,好像又有些不一样的体验。

你知道,

一个人可以走的快,但一群人能走的更远

作为一个有着20.4K星星的框架,应该有着更多的可能待你发掘。

于是,你准备模拟一个简单的登录和退出场景,再分析分析,看看其中有啥不同。

最新文章

  • 后续文章不定期撰写中,点个关注,获取平台最新文章推送。
  • 技术有限,还望诸位协助勘误,于评论区指出,
  • 常一文多发,最新勘定和增补文章于下方链接给出
  • https://www.npc.ink/277361.html
VUE模块

使用Vite打包项目用的JS和CSS 文件,改善开发体验

2023-5-16 20:59:30

国外主题

Fame - 数字技术/服务WordPress主题

2019-12-27 7:57:57

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 1355471563#qq.com 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索