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

前端基础（二）

news 2026/4/7 22:00:58

前言：前端开发框架——Vue框架学习。

准备工作：添加Vue devtools扩展工具

具体可查看下面的这篇博客

添加vue devtools扩展工具+添加后F12不显示Vue图标_MRJJ_9的博客-CSDN博客

Vue官方学习文档

Vue.js - 渐进式 JavaScript 框架 | Vue.js

MVVM 

MVVM是Model-View-ViewModel的简写。它本质上就是MVC的改进版。MVVM模式有助于将应用程序的业务和表示逻辑与用户界面 (UI) 清晰分离。 保持应用程序逻辑和UI之间的清晰分离有助于解决许多开发问题，并使应用程序更易于测试、维护和演变。 它还可以显著提高代码重用机会，并允许开发人员和UI设计人员在开发应用各自的部分时更轻松地进行协作。 （百度百科）

基本概念

属性：在对象中定义的变量

函数：普通的定义在js顶层或其他函数里

方法：在对象中被定义的函数是方法

组件：组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。（官网）

下面这篇博客介绍得很详细

Vue详细介绍及使用（组件）_vue组件_穆瑾轩的博客-CSDN博客

学习成功展示

选项式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue项目</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script></head>
</head><body><div id="test"><span>欢迎你，{{name}}</span><span :id="gender">{{leibie}}</span><span v-html="welcome">lisen to me{{welcome}}</span><div>请输入你的名字：<input v-bind:value="name" @click="changeName"><input v-model:value="name"></div>请选择你的性别：<label><input type="radio" :name="sex" value=先生 v-model="gender">male</label><label><input type="radio" :name="sex" value=女士 v-model="gender">female</label><label><input type="radio" :name="sex" value=none v-model="gender">none</label></div><script>// const {createApp}=Vue//定义一个vue组件实例对象Vue.createApp({//属性 data属性后是方法data: function () {return {name: 'MRJJ_9',gender: 'male',welcome: '<strong>下午好</strong>',}},//方法methods: {changeName(event) {console.log(this.name);console.log(event);this.name = event.target.value}},computed: {//计算属性 leibie: {get() {if (this.gender == "先生") {return "先生"}else if (this.gender == "女士") {return "女士"}else {return "人";}}},set(value) {console.log(value);this.gender=value;}}//mount(document.getElementById("test"))}).mount("#test")</script>
</body></html>

组合式 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue项目组合式</title><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head><body><div id="test"><span>欢迎你，{{username}}</span><span :id="gender">{{leibie}}</span><span v-html="welcome">lisen to me{{welcome}}</span><div>请输入你的名字：<input v-bind:value="username" @click="changeName"><input v-model:value="username"></div>请选择你的性别：<label><input type="radio" :name="sex" value=先生 v-model="gender">male</label><label><input type="radio" :name="sex" value=女士 v-model="gender">female</label><label><input type="radio" :name="sex" value=none v-model="gender">none</label></div><script>const {createApp,computed,ref}=Vue;createApp({setup() {let username = ref("MRJJ_9");let gender = ref("famale");let welcome = ref("下午好");//在方法中定义一个函数function changeName() {console.log("在setup中调用了changeName方法", username);}let leibie = computed({get() {if (gender.value == "先生") {return "先生"}else if (gender.value == "女士") {return "女士"}else {return "人";}},set(value) {console.log("setup方法中输出修改后的computed属性leibie的值")}})return {username,gender,welcome,leibie,changeName}},  }).mount("#test");</script>
</body></html>

相关文章：

前端基础（二）

前言&#xff1a;前端开发框架——Vue框架学习。 准备工作&#xff1a;添加Vue devtools扩展工具 具体可查看下面的这篇博客 添加vue devtools扩展工具添加后F12不显示Vue图标_MRJJ_9的博客-CSDN博客 Vue官方学习文档 Vue.js - 渐进式 JavaScript 框架 | Vue.js MVVM M…...

编程日记 2023/8/15 6:54:04

ORB-SLAM2学习笔记7之System主类和多线程

文章目录 0 引言1 整体框架1.1 整体流程 2 System主类2.1 成员函数2.2 成员变量 3 多线程3.1 ORB-SLAM2中的多线程3.2 加锁 0 引言 ORB-SLAM2是一种基于特征的视觉SLAM&#xff08;Simultaneous Localization and Mapping&#xff09;系统&#xff0c;它能够从单个、双目或RBG…...

编程日记 2023/8/15 6:53:03

gin的占位符:和通配符*

1、用法 在 Gin 路由中&#xff0c;可以使用一个通配符&#xff08;*&#xff09;或一个占位符&#xff08;:&#xff09;来捕获 URL 的一部分。 r.GET("/royal/:id", func(c *gin.Context) {id : c.Param("id")//fmt.Println("into :id")c.Str…...

编程日记 2023/8/15 6:52:01

【量化课程】08_2.深度学习量化策略基础实战

文章目录 1. 深度学习简介2. 常用深度学习模型架构2.1 LSTM 介绍2.2 LSTM在股票预测中的应用 3. 模块分类3.1 卷积层3.2 池化层3.3 全连接层3.4 Dropout层 4. 深度学习模型构建5. 策略实现 1. 深度学习简介 深度学习是模拟人脑进行分析学习的神经网络。 2. 常用深度学习模型架…...

编程日记 2023/8/15 6:51:00

12-数据结构-数组、矩阵、广义表

数组、矩阵、广义表 目录 数组、矩阵、广义表 一、数组 二.矩阵 三、广义表 一、数组 这一章节理解基本概念即可。数组要看清其实下标是多少&#xff0c;并且二维数组&#xff0c;存取数据&#xff0c;要先看清楚是按照行存还是按列存&#xff0c;按行则是正常一行一行的去读…...

编程日记 2023/8/15 6:49:58

Idea 反编译jar包

实际项目中&#xff0c;有时候会需要更改jar包源码来达到业务需求&#xff0c;本文章将介绍一下如何通过Idea来进行jar反编译 1、Idea安装decompiler插件 2、找到decompiler插件文件夹 decompiler插件文件夹路径为&#xff1a;idea安装路径/plugins/java-decompiler/lib 3、…...

编程日记 2023/8/15 6:48:56

【Git】安装以及基本操作

目录 一、初识Git二、 在Linux底下安装Git一&#xff09;centOS二&#xff09;Ubuntu 三、 Git基本操作一&#xff09; 创建本地仓库二&#xff09;配置本地仓库三&#xff09;认识工作区、暂存区、版本库四&#xff09;添加文件五&#xff09;查看.git文件六&#xff09;修改文…...

编程日记 2023/8/15 6:47:55

Spring创建Bean的过程（2）

上一节介绍了Spring创建过程中的两个重要的接口&#xff0c;那么它们在创建Bean的过程中起到了什么作用呢&#xff1f;接下来请看&#xff1a; Spring有三种方式寻找 xml 配置文件&#xff0c;根据 xml 文件内容来构建 ApplicationContext&#xff0c;分别为ClassPathXmlAppli…...

编程日记 2023/8/15 6:46:54

Linux 终端操作命令（2）内部命令

Linux 终端操作命令 也称Shell命令&#xff0c;是用户与操作系统内核进行交互的命令解释器&#xff0c;它接收用户输入的命令并将其传递给操作系统进行执行&#xff0c;可分为内部命令和外部命令。内部命令是Shell程序的一部分&#xff0c;而外部命令是独立于Shell的可执行程序…...

编程日记 2023/8/15 6:45:53

【Git】大大大问题之syntax error near unexpected token `(‘ 的错误解决办法

话不多说&#xff0c;先上图&#xff1a; 如图&#xff0c;因为在linux环境里&#xff0c;文件路径中含有括号&#xff08;&#xff09;&#xff0c;因此报错&#xff01; 解决办法 等同于 &#xff1a;linux下解决bash: syntax error near unexpected token (’ 的错误&am…...

编程日记 2023/8/15 6:44:52

Flink源码之TaskManager启动流程

从启动命令flink-daemon.sh可以看出TaskManger入口类为org.apache.flink.runtime.taskexecutor.TaskManagerRunner TaskManagerRunner::main TaskManagerRunner::runTaskManagerProcessSecurely TaskManagerRunner::runTaskManager //构造TaskManagerRunner并调用start()方法 …...

编程日记 2023/8/15 6:43:51

加入微软MCPP有什么优势？

目录 专业认可 技术支持 销售和市场推广支持 培训和认证 业务机会和合作伙伴网络...

编程日记 2023/8/15 6:42:50

leetcode做题笔记78子集

给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 思路一&#xff1a;回溯 void backtracking(int* nums, int numsSize, int** res, int* ret…...

编程日记 2023/8/15 6:41:49

Skywalking-9.6.0系列之本地源码编译并启动

Skywalking相信有很多人使用过&#xff0c;通过容器或者下载安装包进行安装的&#xff0c;今天从源代码角度&#xff0c;拉取、构建、启动。 官方文档步骤简洁明了&#xff0c;我这边会结合自己遇到的一些问题做出总结。 当前构建资源版本&#xff1a; MAC 10.15.7IDEA 2021.…...

编程日记 2023/8/15 6:40:48

proteus结合keil-arm编译器构建STM32单片机项目进行仿真

proteus是可以直接创建设计图和源码的&#xff0c;但是源码编译它需要借助keil-arm编译器&#xff0c;也就是我们安装keil-mdk之后自带的编译器。 下面给出一个完整的示例&#xff0c;主要是做一个LED灯闪烁的效果。 新建工程指定路径&#xff0c;Schematic,PCB layout都选择默…...

编程日记 2023/8/15 6:39:46

第五十三天

●剪辑——Pr 剪辑(Film editing)&#xff0c;即将影片制作中所拍摄的大量素材&#xff0c;经过选择、取舍、分解与组接&#xff0c;最终完成一个连贯流畅、含义明确、主题鲜明并有艺术感染力的作品。 •线性编辑 将素材按时间顺序连接成新的连续画面的技术 •非线性编辑 …...

编程日记 2023/8/15 6:38:44

gorm基本操作

一、gorm安装 1.下载gorm go get -u gorm.io/gorm //gorm框架 go get -u gorm.io/driver/mysql //驱动2.mysql准备工作 mysql> create database godb; mysql> grant all on *.* to admin% identified by golang123!; mysql> flush privileges;3.导入gorm框架 impo…...

编程日记 2023/8/15 6:37:44

华为OD机试 - 排队游戏（Java JS Python）

题目描述 新来的老师给班里的同学排一个队。 每个学生有一个影力值。 一些学生是刺头，不会听老师的话，自己选位置，非刺头同学在剩下的位置按照能力值从小到大排。 对于非刺头同学，如果发现他前面有能力值比自己高的同学，他不满程度就增加，增加的数量等于前面能力值比…...

编程日记 2023/8/15 6:36:43

滚动条样式更改

::-webkit-scrollbar 滚动条整体部分&#xff0c;可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scrollbar-track 外层轨道 ::-webkit-scrollbar-track-piece 内层滚动槽 ::-webkit-scrollbar-thumb 滚动的滑块 ::-webkit-scrollbar…...

编程日记 2023/8/15 6:35:42

掌握Python的X篇_33_MATLAB的替代组合NumPy+SciPy+Matplotlib

numPy 通常与 SciPy( Scientific Python )和 Matplotlib (绘图库)一起使用&#xff0c;这种组合广泛用于替代 MatLab&#xff0c;是一个强大的科学计算环境&#xff0c;有助于我们通过 Python 学习数据科学或者机器学习。 文章目录 1. numpy1.1 numpy简介1.2 矩阵类型的nparra…...

编程日记 2023/8/15 6:34:40

实在 Agent 在医药行业有哪些合规能力？2026年药企数字化合规转型深度实战指南

在2026年4月&#xff0c;中国医药行业进入了“全域穿透、动态升级”的严苛监管新纪元。随着《关于深入开展打击医保药品领域违法违规问题专项行动的通知》的正式下发&#xff0c;以及《生物制品分段生产操作指南》等法规的密集施行&#xff0c;传统依赖人力与固定规则的合规模式…...

编程新知 2026/4/7 21:57:10

LAMMPS高级功能：如何实现量子力学/分子力学(QM/MM)耦合模拟

LAMMPS高级功能&#xff1a;如何实现量子力学/分子力学(QM/MM)耦合模拟 【免费下载链接】lammps Public development project of the LAMMPS MD software package 项目地址: https://gitcode.com/gh_mirrors/la/lammps 量子力学/分子力学(QM/MM)耦合模拟是计算化学和材…...

编程新知 2026/4/7 21:49:09

分切机程序开发：上下收放卷张力控制实现

分切机程序 &#xff0c;上下收放卷张力控制&#xff0c;无电子凸轮功能。 触摸屏威纶通&#xff0c;PLC是三菱FX3U系列 在自动化生产领域&#xff0c;分切机的稳定运行至关重要&#xff0c;尤其是上下收放卷张力的精准控制。本文将探讨基于威纶通触摸屏和三菱FX3U系列PLC&…...

编程新知 2026/4/7 21:06:14

unner = unittest.TextTestRunner() 详细解释

Python 自带单元测试框架 unittest 的核心用法，作用是：创建一个「文本模式的测试运行器」，专门用来执行你的测试用例，并在控制台 / 终端输出测试结果。 1. 逐行拆解含义 python 运行 runner = unittest.TextTestRunner()unittest：Python 内置的单元测试标准库，不用额外…...

编程新知 2026/4/7 20:50:05

基于粒子群算法的主动配电网经济优化调度系统分析

基于IEEE33的主动配电网优化&#xff0c;采用IEEE33节点配电网进行仿真&#xff0c;搭建了含风光&#xff0c;储能&#xff0c;柴油发电机和燃气轮机的配电网经济调度模型&#xff0c;以总的运行成本最小为目标&#xff0c;考虑了储能以及潮流等约束&#xff0c;采用粒子群算法…...

编程新知 2026/4/7 19:47:05

【C++ constexpr 高阶实战指南】：20年专家亲授7个颠覆认知的编译期优化案例

第一章&#xff1a;constexpr 的本质与编译期语义再认知constexpr 并非简单的“编译期可求值”标记&#xff0c;而是 C 类型系统与求值模型深度耦合的语义契约&#xff1a;它要求表达式在编译期具备确定性、无副作用、且所有操作均落在标准定义的常量求值&#xff08;constant …...

编程新知 2026/4/7 19:22:34

毕业论文“通关秘籍”：好写作AI的神奇魔法盒

毕业季的钟声敲响&#xff0c;对于众多即将毕业的大学生来说&#xff0c;毕业论文就像是一场必须跨越的“终极挑战”。从选题时的迷茫&#xff0c;到文献收集的繁琐&#xff0c;再到大纲搭建的纠结&#xff0c;每一步都让人头疼不已。不过别担心&#xff0c;好写作AI这位论文写…...

编程新知 2026/4/7 18:42:07

OpenClaw技能市场巡礼：Top10Qwen3.5-9B增强插件测评

OpenClaw技能市场巡礼&#xff1a;Top10 Qwen3.5-9B增强插件测评 1. 为什么需要关注OpenClaw技能市场&#xff1f; 第一次接触OpenClaw时&#xff0c;我被它"AI操控电脑"的核心能力震撼&#xff0c;但真正让我持续使用的原因是它的技能市场&#xff08;ClawHub&…...

编程新知 2026/4/7 18:25:46

揭秘银行核心系统C++内存池配置：如何将GC停顿从200ms压至8μs？

第一章&#xff1a;银行核心系统内存管理的金融级挑战银行核心系统是金融基础设施的中枢&#xff0c;其内存管理不仅关乎性能&#xff0c;更直系交易一致性、资金安全与监管合规。毫秒级延迟抖动可能引发跨行清算超时&#xff0c;未释放的内存泄漏可在高并发批量代发场景下数小…...

编程新知 2026/4/7 17:51:13

Qwen3-VL:30B部署实操：Clawdbot配置文件详解、飞书Bot权限申请与事件订阅最佳实践

Qwen3-VL:30B部署实操&#xff1a;Clawdbot配置文件详解、飞书Bot权限申请与事件订阅最佳实践 1. 项目概述与准备工作 1.1 项目介绍 本项目将带你从零开始&#xff0c;在CSDN星图AI云平台上私有化部署最强的多模态大模型Qwen3-VL:30B&#xff0c;并通过Clawdbot搭建一个既能…...

编程新知 2026/4/7 16:12:26