当前位置： 首页 > news >正文

GDPU Vue前端框架开发 计数器

news 2026/5/17 15:31:57

计数器算不到你双向绑定的进度。

重要的更新公告

！！！GDPU的小伙伴，感谢大家的支持，希望到此一游的帅哥美女能有所帮助。本学期的前端框架及移动应用，采用专栏订阅量达到50才开始周更了哦( •̀ .̫ •́ )✧

计数器案例

 1.实现计数器程序

前端新手必看，在vscode编译器中，新建一个html文件，按一个叹号，然后按回车，会出现一个模板。这里学的是vue的基础，修改body标签里的内容即可。

  <body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app"><h2>当前计数：{{counter}}</h2><button @click="add">+</button><button @click="sub">-</button></div><script>App = {data() {return {counter: 0,};},methods: {add: function () {console.log("add被执行！");this.counter++;},sub: function () {console.log("sub被执行！");this.counter--;},},};const vm = Vue.createApp(App).mount("#app");</script></body>

然后点执行，选浏览器。

 

或许你会看到这样的警告。

 

这是编辑器找不到你的浏览器，那咋办，可以安装一个插件，如

Open Browser Preview，然后点Ctrl F1即可。

 

 修改计数器案例，实现Data与Vue实例的分离

<body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>//view层，即dom层<div id="app">{{message}}</div><script>const {createApp}=Vue;//model层，分离出的objconst obj={message:'你好，Vuejs！'}//viewmodel层，即vue实例，没有挂载到dom的对象const app=createApp({data(){return obj;}}).mount('#app')</script>
</body>

这段代码使用了 MVVM 模式，实现了 Vue 中的数据绑定。代码中的{{}}是插值语法，用于在视图层展示数据。在script标签内，定义了 Vue 实例，处理数据对象、属性和方法，利用这些属性和函数实现数据绑定和动态视图更新。

 

观察Vue的生命周期

<body><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><div id="app">{{message}}</div><script>const { createApp } = Vue; //const createApp = Vue.createApp;//   import { createApp } from 'vue'const App = {data() {return {message: "你好啊，小可爱！",};},beforeCreate() {console.log("before Create");},created() {console.log("created");},beforeMount() {console.log("before Mount");},mounted() {console.log("mounted");setTimeout(() => {app.unmount();}, 5000);},beforeUpdate() {console.log("before Update");},updated() {console.log("updated");},beforeUnmount() {console.log("before Unmount");},unmounted() {console.log("unmounted");},};//记得要分开写，这个app是vue实例const app = createApp(App);app.mount("#app");//挂载到dom</script></body>

 

 

2.思考题：MVVM，在计数器案例中，哪个体现了Model？View？以及ViewModel？

View层：
视图层
在前端开发中，通常就是DOM层，主要的作用是给用户展示各种信息。

Model层：
数据层
数据可能是我们固定的数据，更多的是来自我们服务器，从网络上请求下来的数据。
在计数器的案例中，就是后面抽取出来的obj。

VueModel层：vue实例
视图模型层
视图模型层是View和Model沟通的桥梁。
一方面，它实现了Data Binding，即数据绑定，将Model的改变实时的反应到View中；
另一方面它实现了DOM Listener，即DOM监听，当DOM触发一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

在计数器案例中，View：DOM层，Model：抽离出来的obj，ViewMode：创建的Vue对象实例。

vue入门教程

作为一个vue前端框架的初学者，想学好vue，把前端三大件基础打好是不可少的，尤其是js。js常用的数组及对象的初始化还记得不，简单复习一下吧。

//数组初始化
//使用字面量
let array = [1, 2, 3];
//使用Array构造函数：
let array = new Array(3); // 创建一个长度为3的空数组
let array2 = new Array(1, 2, 3); // 创建一个包含1, 2, 3的数组
//对象初始化
//使用字面量
let obj = { key1: 'value1', key2: 'value2' };
//使用Object构造函数
let obj = new Object();
obj.key1 = 'value1';
obj.key2 = 'value2';

还有属性、回调函数、dom等基础，要注重复习——重vue之我学js，这一次，要夺回属于你的框架。此外，还要学习es6基本语法，数据绑定等，可以先下nodejs，学一下npm构建。学完基础语法后面就是主要学的部分如构建工具vue cli或vite、UI界面、前端路由、与服务端通信、状态管理等等，学完便可以做项目部署了。

在学的过程中，编辑器的一些插件也可以方便敲代码。 浏览器的插件也可以帮助更好了解vue的一些数据属性，点击扩展，在应用商店下Vue.js devtools等，进入vue的界面，可以在F12后点击vue选项看节点属性。

实验心得

多注意防晒阿。

 

相关文章：

GDPU Vue前端框架开发 计数器

计数器算不到你双向绑定的进度。 重要的更新公告 &#xff01;&#xff01;&#xff01;GDPU的小伙伴&#xff0c;感谢大家的支持&#xff0c;希望到此一游的帅哥美女能有所帮助。本学期的前端框架及移动应用&#xff0c;采用专栏订阅量达到50才开始周更了哦( •̀ .̫ •́ )✧…...

编程日记 2024/9/15 2:03:06

最大流笔记

概念 求两点间的路径中可在同一时间内通过的最大量 EK算法 通过bfs找通路&#xff0c;找到后回溯&#xff1b; 每确定一条边时&#xff0c;同时建立一天反方向的边以用来进行反悔操作&#xff08;毕竟一次性找到正确方案的概率太低了&#xff09; code #include<bits/st…...

编程日记 2024/9/15 2:02:04

el-tree父子不互相关联时，手动实现全选、反选、子级全选、清空功能

el-tree父子不互相关联时&#xff0c;手动实现全选、反选、子级全选、清空功能 1、功能实现图示 2、实现思路 当属性check-strictly为true时&#xff0c;父子节点不互相关联&#xff0c;如果需要全部选中或选择某一节点下的全部节点就必须手动选择每个节点&#xff0c;十分麻…...

编程日记 2024/9/15 2:01:03

模板与泛型编程笔记（一）入门篇

1. 推荐书籍 《C新经典 模板与泛型编程》难得的很容易看得懂的好书&#xff0c;作者讲技术不跳跃&#xff0c;娓娓道来&#xff0c;只要花点时间就能看懂。 2. 笔记 2.1 模板基础 模板为什么要用尖括号&#xff1f;因为便于编译器解析&#xff0c;可以将模板和普通函数声明…...

编程日记 2024/9/15 1:57:59

浅谈WebApi

一、基本介绍 Web API&#xff08;Web应用程序编程接口&#xff09;是一种用于构建应用程序的接口&#xff0c;它允许软件应用程序通过HTTP请求与Web服务器进行交互。Web API通常用于构建客户端-服务器应用程序&#xff0c;其中客户端可以是Web浏览器、移动应用程序、桌面应用程…...

编程日记 2024/9/15 1:54:56

9月14日，每日信息差

第一、宝马集团宣布对设计部门进行重组&#xff0c;并将于 2024 年 10 月 1 日成立一个跨品牌设计团队&#xff0c;由范・霍伊顿克领导。该团队将引入极星汽车设计主管马克西米利安・米索尼&#xff0c;负责宝马中高档和豪华车型以及宝马 Alpina 的设计工作。 第二、小鹏汇天飞…...

编程日记 2024/9/15 1:53:55

无人机控制与三维AI感知处理平台正式上线！

低空经济被誉为推动我国经济高质量发展的全新增长引擎&#xff0c;是一种以民用有人驾驶和无人驾驶航空器的各类低空飞行活动为牵引&#xff0c;辐射带动相关领域融合发展的综合性经济形态&#xff0c;2024年全国两会首次被纳入政府工作报告。 大势智慧积极响应国家低空经济政…...

编程日记 2024/9/15 1:52:54

9.11-kubeadm方式安装k8s

一、安装环境 编号主机名称ip地址1k8s-master192.168.2.662k8s-node01192.168.2.773k8s-node02192.168.2.88 二、前期准备 1.设置免密登录 [rootk8s-master ~]# ssh-keygen [rootk8s-master ~]# ssh-copy-id root192.168.2.77 [rootk8s-master ~]# ssh-copy-id root192.168…...

编程日记 2024/9/15 1:49:27

限流，流量整形算法

写在前面 源码 。 本文看下流量整形相关算法。 目前流量整形算法主要有三种&#xff0c;计数器&#xff0c;漏桶&#xff0c;令牌桶。分别看下咯&#xff01; 1&#xff1a;计数器 1.1&#xff1a;描述 单位时间内只允许指定数量的请求&#xff0c;如果是时间区间内超过指…...

编程日记 2024/9/15 1:48:24

【C++知识扫盲】------C++ 中的引用入门

在 C 中&#xff0c;引用&#xff08;reference&#xff09; 是一个非常重要的概念&#xff0c;它提供了一种别名机制&#xff0c;让我们可以给已经存在的变量起一个新的名字&#xff0c;并且能够通过这个别名直接操作原始变量。本文将详细介绍引用的定义、使用场景及其与指针的…...

编程日记 2024/9/15 1:45:16

【机器学习】6 ——最大熵模型

机器学习6——最大熵模型 目录 机器学习6——最大熵模型最大熵&#xff08;maximum entropy&#xff09;模型模型模型学习&#xff08;估计参数&#xff09;模型评价应用 最大熵&#xff08;maximum entropy&#xff09;模型 选择熵最大的概率模型 熵是衡量不确定性的&#xf…...

编程日记 2024/9/15 1:44:16

小程序——生命周期

文章目录 运行机制更新机制生命周期介绍应用级别生命周期页面级别生命周期组件生命周期生命周期两个细节补充说明总结 运行机制 用一张图简要概述一下小程序的运行机制 冷启动与热启动&#xff1a; 小程序启动可以分为两种情况&#xff0c;一种是冷启动&#xff0c;一种是热…...

编程日记 2024/9/15 1:43:15

基于微信小程序的宠物之家的设计与实现

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的宠物之家/宠物综合…...

编程日记 2024/9/15 1:42:14

自定义EPICS在LabVIEW中的测试

继续上一篇&#xff1a;LabVIEW中EPICS客户端/服务端的测试 变量定义 You can use CaLabSoftIOC.vi to create new EPICS variables and start them. CA Lab - LabVIEW (Realtime) EPICS INPUT: PV set Cluster-array of names, data types and field definitions to crea…...

编程日记 2024/9/15 1:40:12

基于深度学习的农作物病害检测

基于深度学习的农作物病害检测利用卷积神经网络&#xff08;CNN&#xff09;、生成对抗网络&#xff08;GAN&#xff09;、Transformer等深度学习技术&#xff0c;自动识别和分类农作物的病害&#xff0c;帮助农业工作者提高作物管理效率、减少损失。 1. 农作物病害检测的挑战…...

编程日记 2024/9/15 1:37:09

【C#】命名规范

文章目录 C# 命名规范使用Pascal case使用Camel case方法、属性、类命名见名知义LINQ查询变量使用有意义的名称如何声明成员变量和字段正确格式化和缩进代码如何撰写备注 通用C#编码最佳实践如何将值与空字符串进行比较使用异常处理使用&&和||可获得更好的性能单一职责…...

编程日记 2024/9/15 1:35:07

超级帐本（Hyperledger)

1. Hyperledger 项目 Hyperledger 下有两类项目:第一类是区块链框架项目;第二类是支持这些区块链的相关工具或模块。 在 Hyperledger 框架下&#xff0c;目前有 5 个区块链框架项目&#xff1a;Fabric、Sawtooth Lake、Iroha、Burrow 和 Indy。 在模块类下&#xff0c;则有 Hyp…...

编程日记 2024/9/15 1:34:06

如何精细优化网站关键词排名：实战经验分享

在数字营销日益激烈的今天&#xff0c;我深知每一个关键词的排名都关乎着网站的流量与转化。凭借多年的实战经验&#xff0c;我深刻体会到&#xff0c;要想在浩如烟海的网络世界中脱颖而出&#xff0c;精细化的关键词优化策略至关重要。今天&#xff0c;我将从实战角度出发&…...

编程日记 2024/9/15 1:32:05

Ruoyi Cloud 本地启动

本文视频版本&#xff1a;https://www.bilibili.com/video/BV1SNtueBE9M 参考 http://doc.ruoyi.vip/ https://gitee.com/y_project/RuoYi-Cloud https://blog.csdn.net/cs_dnzk/article/details/135289966 https://doc.ruoyi.vip/ruoyi-cloud/cloud/seata.html#%E5%9F%BA%E6…...

编程日记 2024/9/15 1:30:02

Nginx解析：入门笔记

&#x1f308; 个人主页&#xff1a;danci_ &#x1f525; 系列专栏&#xff1a;《设计模式》《MYSQL》 &#x1f4aa;&#x1f3fb; 制定明确可量化的目标&#xff0c;坚持默默的做事。 ✨欢迎加入探索nginx之旅✨ &#x1f44b; 大家好&#xff01;文本学习和探索Nginx配置。…...

编程日记 2024/9/15 1:29:02

proxy-doctor：自动化诊断与修复开发工具代理配置的利器

1. 项目概述与核心价值最近在折腾一些需要稳定网络连接的项目时&#xff0c;遇到了一个老生常谈但又极其恼人的问题&#xff1a;代理配置。无论是开发环境里的包管理工具&#xff0c;还是日常使用的命令行工具&#xff0c;一旦涉及到网络请求&#xff0c;代理设置不对&#xff…...

编程新知 2026/5/17 10:42:01

【HarmonyOS 6.1 全场景实战】《灵犀厨房》之【营养分析引擎】计算个性化卡路里建议：给《灵犀厨房》装上“营养大脑”

【营养分析引擎】计算个性化卡路里建议&#xff1a;给《灵犀厨房》装上“营养大脑” 摘要&#xff1a;从“爱吃什么”到“该吃什么”&#xff0c;是《灵犀厨房》进化的关键一步。上一篇我们刚打通了 Health Kit 数据&#xff0c;今天&#xff0c;我们就要基于 Mifflin-St Jeor …...

编程新知 2026/5/17 9:02:16

从开源AI导师项目GURU-Ai拆解：如何构建具备教学能力的智能体

1. 项目概述&#xff1a;一个“AI导师”的诞生与定位最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“Guru322/GURU-Ai”。光看名字&#xff0c;你可能会觉得这又是一个平平无奇的AI工具仓库。但点进去细看&#xff0c;你会发现它的野心不小——它想做的不是又一个聊天机…...

编程新知 2026/5/17 7:29:45

量化交易强化学习环境TradingGym：从Gym接口到实战策略训练

1. 项目概述&#xff1a;一个为量化交易策略量身定制的强化学习训练场如果你正在尝试将强化学习&#xff08;Reinforcement Learning, RL&#xff09;应用到股票、期货或加密货币的量化交易中&#xff0c;大概率会遇到一个共同的困境&#xff1a;环境太难搭了。市面上的回测框架…...

编程新知 2026/5/17 7:09:57

Shell脚本加固实战：用shellguard提升脚本健壮性与安全性

1. 项目概述&#xff1a;一个为Shell脚本穿上“防弹衣”的守护者 在运维开发、自动化部署乃至日常的系统管理工作中&#xff0c;Shell脚本是我们最忠实、最高效的伙伴。从简单的日志清理到复杂的CI/CD流水线&#xff0c;Shell脚本无处不在。然而&#xff0c;脚本的安全性、健壮…...

编程新知 2026/5/17 6:29:42

基于Nginx-Lua镜像构建高性能可编程网关的实践指南

1. 项目概述&#xff1a;一个为现代Web架构而生的Nginx镜像如果你和我一样&#xff0c;长期在容器化环境中部署和管理Web服务&#xff0c;那么你一定对Nginx的灵活性和Lua脚本的强大能力印象深刻。但将这两者结合&#xff0c;并打包成一个稳定、安全、功能齐全的Docker镜像&…...

编程新知 2026/5/17 5:39:43

Docker容器MCP服务镜像：AI安全运维与自动化实践

1. 项目概述&#xff1a;一个为Docker容器提供MCP服务的镜像最近在折腾一些自动化工作流&#xff0c;发现很多工具都开始支持一种叫做MCP&#xff08;Model Context Protocol&#xff09;的协议。简单来说&#xff0c;MCP就像是一个标准化的“插座”&#xff0c;让各种AI模型&a…...

编程新知 2026/5/17 4:25:04

5分钟学会创建专业交通网络可视化地图

5分钟学会创建专业交通网络可视化地图 【免费下载链接】transit-map The server and client used in transit map simulations like swisstrains.ch 项目地址: https://gitcode.com/gh_mirrors/tr/transit-map 你想在网页上展示动态的公共交通网络吗&#xff1f;Transit…...

编程新知 2026/5/17 3:25:35

RTX 5090功耗传闻解析：600W显卡对PC生态的挑战与应对

1. 项目概述&#xff1a;从一则功耗新闻到显卡生态的深度思考最近&#xff0c;英伟达下一代旗舰显卡RTX 5090的功耗传闻在硬件圈里炸开了锅。消息称其TGP&#xff08;总图形功耗&#xff09;可能高达600W&#xff0c;相比RTX 4090的450W&#xff0c;直接激增了150W。这不仅仅是…...

编程新知 2026/5/17 2:27:56

2026杭州本地GEO优化公司排名，优质机构一站式推荐

AI 搜索时代&#xff0c;不少杭州企业踩过这样的坑&#xff1a;花大价钱找服务商做 GEO 优化&#xff0c;每天产出大量文章&#xff0c;结果在豆包、DeepSeek 等 AI 大模型里搜不到品牌信息&#xff0c;询盘没涨、获客成本反倒飙升。GEO 优化从来不是 “堆文章”&#xff0c;而…...

编程新知 2026/5/17 1:27:04