Vue 学习笔记 总结

Vue.js 教程 | 菜鸟教程 (runoob.com)

放一下课上的内容

image-20240528104918188

image-20240528105021354

image-20240528105143887

image-20240528105159301

image-20240528105212331

image-20240528105317403

image-20240528105351815

image-20240528105423246

image-20240528105535954

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240528105612665

image-20240528105839263

image-20240528112313004

image-20240528112327892

image-20240528112654179

image-20240528112716686

image-20240528113015008

image-20240528115449280

image-20240528115458389

image-20240528115508930

image-20240602200811076

image-20240602200820916

image-20240602200831100

image-20240602200840141

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602200859855

image-20240602200911159

image-20240602200920261

image-20240602200929458

image-20240602200936998

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602201047488

image-20240602201053925

image-20240602201100570

image-20240602201108678

image-20240602201115399

image-20240602201120902

image-20240602201129842

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602201141976

image-20240602201147356

image-20240602201152740

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

image-20240602201204609

image-20240602201212348

image-20240602201217546

image-20240602201223181

image-20240602201228580

image-20240602201236949

image-20240602201246688

image-20240602201252770

image-20240602201257597

Vue练习

1、练习要求和实验2的用户注册一样,当用户输入后,能在下方显示用户输入的各项内容(不需要实现【重置】按钮)

2、实验报告中的实验小结部分来谈谈用JS、jQuery和 vue.js来实现用户注册的使用差别

原生 JavaScript

优势

  • 无依赖:不需要额外的库或框架。
  • 控制:开发者可以更精确地控制代码行为,不受库或框架的限制。

劣势

  • 代码量:可能需要编写更多的代码来处理DOM操作和状态管理。
  • 兼容性:需要手动处理不同浏览器之间的兼容性问题。
jQuery

优势

  • 简化DOM操作:jQuery提供了一套简洁的API来处理DOM操作,使得代码更简洁易读。
  • 插件丰富:有大量现成的插件可以使用,可以快速实现复杂功能。
  • 跨浏览器兼容性:jQuery处理了大部分的浏览器兼容性问题。

劣势

  • 性能:相对于原生JavaScript,jQuery的操作可能会稍慢。
  • 体积:引入jQuery库会增加页面的加载时间。
  • 现代化问题:随着前端技术的发展,纯粹依赖jQuery的开发模式已逐渐被现代框架所替代。
Vue.js

优势

  • 数据双向绑定:Vue.js的双向绑定机制可以简化表单输入与数据模型之间的同步。
  • 组件化:支持将界面拆分成可重用的组件,有利于代码的组织和复用。
  • 现代化工具支持:配合Vue CLI等工具,可以快速搭建项目,支持热重载、代码分割等现代开发实践。
  • 生态系统:有丰富的插件和库可以使用,社区活跃。

劣势

  • 学习曲线:相比于jQuery,Vue.js的学习曲线稍陡,需要理解组件化和MVVM模式。
  • 依赖:项目需要依赖Vue.js框架本身,可能会有一定的学习和维护成本。
应用场景
  • 原生JavaScript:适用于不需要额外库依赖且追求最小化或教育目的的项目。
  • jQuery:适合快速开发,特别是在旧项目中已经广泛使用jQuery的情况。
  • Vue.js:适用于需要高度组织的代码和前端驱动的复杂应用,例如SPA(单页应用)。

3、启动项目后出现登录页面(路由为“ http://站点地址/”)

4、输入正确的用户名和密码(常量)后,单击【登录】按钮跳转到预设的首页(咖啡屋页,路由为“ http://站点地址/coffee/:userName”,userName为登录输入的正确用户名),首页巨幕显示登录的用户名信息,导航要设置成单独的组件,并引用到网站所需的页面上

5、输入不正确则显示“登录失败”等字样

6、单击【注册】按钮跳转到注册页(路由为“ http://站点地址/reg”)

7、进入咖啡页首页后,可单击顶部导航“点单”,进入点单页面(路由为“ http://站点地址/order”),能根据用户点单实时计算总价。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/683164.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

流量分析——一、蚁剑流量特征

君衍. 一、Webshell特征流量分析二、环境介绍三、使用Wireshark进行流量分析1、环境说明2、HTTP追踪流分析3、蚁剑请求体中代码块解读 四、使用BurpSurite进行流量分析1、环境配置2、抓包分析 六、总结 一、Webshell特征流量分析 对于重保、护网等攻防演练的防守方来说&#x…

AIGC专栏11——EasyAnimateV2结构详解与Lora训练 最大支持768x768 144帧视频生成

AIGC专栏11——EasyAnimateV2结构详解与Lora训练 最大支持768x768 144帧视频生成 学习前言源码下载地址EasyAnimate V2简介技术储备Diffusion Transformer (DiT)Motion ModuleU-VITLora 算法细节算法组成视频VAE视频DIT 数据处理视频分割视频筛选视频描述 模型训练视频VAE视频D…

【数智化CIO展】吉家宠物CIO张志伟:深度挖掘数据价值是数字化发展趋势,才能实现企业精细化运营...

张志伟 本文由吉家宠物CIO张志伟投递并参与由数据猿联合上海大数据联盟共同推出的《2024中国数智化转型升级优秀CIO》榜单/奖项评选。丨推荐企业:观远数据 大数据产业创新服务媒体 ——聚焦数据 改变商业 中国“宠物经济”热潮不断攀升,国内宠物市场的竞…

InnoDB存储引擎非常重要的一个机制--MVCC(多版本并发控制)

Mysql是如何实现隔离性的?(锁MVCC) 隔离性是指一个事务内部的操作以及操作的数据对正在进行的其他事务是隔离的,并发执行的各个事务之间不能相互干扰。隔离性可以防止多个事务并发执行时,可能存在交叉执行导致数据的不…

Android 如何保证开启debug模式之后再启动

很多时候会需要debug看Android启动时候的一些数据,但很多时候会存在自己开启debug后app已经过了自己要debug的那段代码的时机了。 那么怎么样可以保证一定能让启动后不会错过自己要debug的那段代码执行的时机呢? 可以用下面这行命令,其中co…

记忆化搜索汇总

记忆化搜索简介 记忆化搜索(Memoization Search):是一种通过存储已经遍历过的状态信息,从而避免对同一状态重复遍历的搜索算法。 记忆化搜索是动态规划的一种实现方式。在记忆化搜索中,当算法需要计算某个子问题的结果…

Nginx+Tomcat负载均衡、动静分离集群

目录 1.Nginx负载均衡 1.1 负载均衡概念 1.2 负载均衡原理 1.3 Nginx配置反向代理 1.3.1 反向代理概念 1.3.2 反向代理主要参数 2.Nginx动静分离 2.1 动静分离的概念 2.2 Nginx 静态处理优势 2.3 动静分离原理 3. NginxTomcat动静分离的实验设计 3.1 准备三台虚拟机…

Java速成要多久?这篇文章告诉你答案!

Java速成要多久?这篇文章告诉你答案! Java作为一门用途广泛且经久不衰的编程语言,吸引了无数学习者的目光。许多人希望能够快速掌握Java,以便进入软件开发行业或者提升自身的竞争力。那么,Java速成究竟要多久呢&#x…

【遗传算法】【机器学习】【Python】常见交叉方法(二)、多点交叉和均匀交叉

一、遗传算法流程图 交叉过程即存在于上图的”交叉“(crossover)步骤中。 二、多点交叉 多点交叉的原理就是,随机地从父代两个基因型中,选择n个位点进行交换,其中n小于等于父代基因型长度(假设双亲基因长…

基于小波变换和峰值搜索的光谱检测matlab仿真,带GUI界面

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于小波变换和峰值搜索的光谱检测matlab仿真,带GUI界面.对光谱数据的成分进行提取,分析CO2,SO2,CO以及CH4四种成分比例。 2.…

【越界写null字节】ACTF2023 easy-netlink

前言 最近在矩阵杯遇到了一道 generic netlink 相关的内核题,然后就简单学习了一下 generic netlink 相关概念,然后又找了一到与 generic netlink 相关的题目。简单来说 generic netlink 相关的题目仅仅是将用户态与内核态的交互方式从传统的 ioctl 变成…

使用from…import语句导入模块

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在使用import语句导入模块时,每执行一条import语句都会创建一个新的命名空间(namespace),并且在该命名…

类的特殊成员函数

使用类的嵌套&#xff0c;并自定义析构函数 #include <iostream>using namespace std; class Per{ private:string name;int age;double hight;double weight; public:Per(string name,int age,double hight,double weight):name(name),age(age),hight(hight),weight(we…

当边缘计算用在定位设备

什么是边缘计算&#xff1f; 边缘计算是个比较高大上的概念&#xff0c;在这里就不提众多官方与非官方的定义了&#xff0c;只说说自己的理解。 边缘计算就是在最靠近物理设备的使用现场&#xff0c;利用有限的硬件资源&#xff0c;完成设备层数据采集、协议转换、数据上传、…

微信小程序开发的详细解读

目录 小程序的ID 小程序的项目结构 小程序调试基础库 小程序调试 小程序配置文件 Pages配置 Windows配置 tabbar配置 页面配置 项目配置文件 sitemap文件配置 样式与组件 小程序常用组件 轮播图组件 图片组件 Text组件 跳转方式 滚动方式 字体图表使用 背景…

用python写一个基于PyQt5和OpenAI的智能问答项目

摘要&#xff1a; 使用python写一个可以对话的智能问答机器人&#xff0c;界面是使用PyQt5写的&#xff0c;通过调用OpenAl的免费接口&#xff0c;实现实时聊天功能。 1.申请免费的API key 前往页面https://github.com/chatanywhere/GPT_API_free 点击下面链接&#xff1a; …

寻找 llvm v3.5 的目标代码生成模块

summ.c --(clang -emit-llvm -S)--> summ.ll --(llvm-as)----> summ.bc --(llc)---> summ.s opt -S -O2 实施机器无关优化&#xff0c;跟后端目标代码生成无关&#xff0c;故llc是llvm的后端。 1&#xff0c;示例代码 summ.c int adddd(int aaa, in…

Rethinking overlooked aspects in vision-language models

探讨多模态视觉语言模型的一些有趣结论欢迎关注 CVHub!https://mp.weixin.qq.com/s/zouNu-g-33_7JoX3Uscxtw1.Introduction 多模态模型架构上的变化不大,数据的差距比较大,输入分辨率和输入llm的视觉token大小是比较关键的,适配器,VIT和语言模型则不是那么关键。InternVL-…

【ArcGIS微课1000例】0017:ArcGIS中如何将kml(kmz)文件转json(geojson)?

文章目录 一、kml获取方式二、kml转图层三、图层转json一、kml获取方式 kml文件是一种很常用的数据格式,可以从谷歌地球(googleearth)获取某一个地区的kml范围文件,如青海湖(做好的kml文件可以从配套实验数据包0117.rar中获取)。 二、kml转图层 打开【KML转图层】工具,…

java判断对象是否还在被引用

1、代码取消强引用后&#xff0c;gc回收对象 public static void main(String[] args) {Object obj new Object();WeakReference<Object> weakRef new WeakReference<>(obj);System.out.println(weakRef.get());obj null; // 取消强引用,后续gc会被回收,如果不…