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

vue非组件的初学笔记

news 2025/12/1 4:47:36

1.创建Vue实例，初始化渲染的核心

准备容器
引包
创建Vue实例new Vue()
- el用来指定控制的盒子
- data提供数据

2.插值表达式

作用利用表达式插值，将数据渲染到页面中
格式{{表达式}}
注意点

表达式的数据要在data中存在
表达式是可计算结果的语句
插值表达式不能写在标签里面

3.Vue的相关指令

3.1 v-前缀的标签属性

v-html="表达式"设置当前标签元素的innerhtml
v-show="表达式"表达式的值为true时显示，false隐藏 ~~原理是display:none~~适用于频繁切换隐藏场景
v-if="表达式"表达式的值为true时显示为false时隐藏 ~~原理是创建或者移除元素节点~~适用于不频繁切换的场景
v-else=" “和v-else-if=” "辅助v-if进行判断渲染，需要紧挨着v-if一起使用
v-on可以简化为 @
- v-on:事件名=“内联语句”
- v-on:事件名="method中的函数名"methods里面的函数形式 fn(){}
  ~~如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数~~
v-bind可以简化为：
- :属性名=“表达式”
- **操作class属性 **
  - ：class=“{a:true~~或者fasle或者判断trueorfalse的语句~~}” 适用于一个类名来回切换比如tab导航栏
  - class=“[类名1,类名2,类名2]”适用于批量删除或者添加类

<div id="app"><ul><li v-for="(item,index) in list" :key="item.id" @click="activeindex=index"><a :class={active:index==activeindex} herf="#">{{item.name}}</a></li></ul></div>

v-for=“(item,index) in 数组"适用于数据循环，多次渲染整个元素，主要针对数组，对象，数字
如果不用index可以 ”item in 数组”

<ul>
<li v-for="(item,index) in list">{{item}}-{{index}}
</li>
</ul>

在这里插入图片描述

案例- 列表渲染和删除功能

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><ul><li v-for="(item,index) in alist" :key="item.id"><span>{{ item.name }}</span><span>{{ item.author }}</span><button v-on:click="del(item.id)">删除</button></li></ul></div><script>const app=new Vue({el:'#app',data:{alist:[{id:1,name:'《红》',author:'曹'},{id:2,name:'《绿》',author:'吴'},{id:3,name:'《蓝》',author:'施'},]},methods:{del(id){this.alist=this.alist.filter(item =>item.id !== id)}}})<!--methods写错了而且后面多加了逗号一直报错-->Vue.config.productionTip=false</script>
</body>
</html>

v-for里面key的作用：作为唯一标识
注意key的值只能是字符串或者数字类型，推荐使用id，因为需要具有唯一性

v-model重要，双向数据绑定既可以获取表单内容也可以设置表单元素的内容
- v-model=“表达式” 表达式和data里面的变量**双向联动 **
  如果有login和reset直接调用this.变量=''这样就可以reset了
  - 如果是表单输入框的话获取的就是输入的内容一般为字符，但是可以配合.trim和.number使用
  - 单选框获取的是true or false
  - 多选按钮获取的是选择项的value值~~一般会有value和name属性name用来同组相斥~~
  - 复选框写在selection里获取的是option的value值~~option一般有value值~~
  - 文本域获取的是文本值

案例- 列表的添加删除统计清空

<section id="app"><!-- 输入框 --><header class="header"><h1>小黑记事本</h1><input  placeholder="请输入任务" class="new-todo" v-model="todoname"/><button class="add" @click="add">添加任务</button></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(item, index) in list" :key="item.id"><div class="view"><span class="index">{{ index + 1 }}.</span> <label>{{ item.name }}</label><button @click="del(item.id)" class="destroy"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer" v-show="list.length>0"><!-- 统计 --><span class="todo-count">合 计:<strong> {{list.length}}</strong></span><!-- 清空 --><button class="clear-completed" @click="clear">清空任务</button></footer> </section><!-- 底部 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {todoname:'',list: [{ id: 1, name: '跑步一公里' },{ id: 3, name: '游泳100米' }]},methods: {del (id) {// console.log(id) => filter 保留所有不等于该 id 的项this.list = this.list.filter(item => item.id !== id)},add(){if(this.todoname.trim()==''){alert("请输入值")return}this.list.unshift({id:+new Date(),name:this.todoname,})},clear(){this.list=[]}}})</script>

总结

一次添加多个内容-属性添加法

{
属性名：属性值，
属性名：属性值<!--最后一个可以不加逗号-->
<!--new Vue({})这里也是这么个意思-->
}

数组的方法积累

.filter(item=>item.id!=id) <!--这样完了之后一定要赋值原数组回去-->
.unshift()<!--如果里面有多个属性就是{}这个-->
.reduce((sum,index)=>>sum+item.score,0)<!--数组里某一项求值-->

字符串的方法积累

.trim()
<!--应用：1.可以用来去除前后的空格后判断是不是空字符串-->

时间戳的应用

+new Date()

我的错误和思维漏洞

在data里面相互引用的时候不加this
清空操作字符串就赋值’'数组就就赋值[ ]
如果想实时动态改变值：就用@事件=“数值改变的表达式或者函数调用”
表达式可计算的特性很重要，插值表达式不放在标签里面，其他就不用考虑了
params：里面的默认写法是属性名：属性值（后端规定）但是如果穿的是多个属性组成的对象，直接params：对象就可以

3.2 指令修饰符

@keyup.enter=""键盘事件监听绑定回车键
v-model.trim=""双向互动绑定去除首尾空格
v-model.number=""双向互动绑定字转数字
@事件名.stop=""阻止冒泡
@事件名.prevent=“”*阻止默认行为 *~~例如a标签的跳转~~

4.Vue里面的各种属性

methods里面的函数形式 fn(){}

用途：发请求，事件触发

在v-on=“”如果不用传参直接写函数名就可以，如果要传参就括号然后里面写参数
如果在vue的其他地方和插值表达式里面要用的话还是要加括号

computed里面的属性形式 f’n(){}

和用data里面的其他值一样用这个f’n也就是当为属性在用,所以不管是vue的其他地方还是插值表达式都是f’n
缓存特性以提升性能
计算属性得出来的值是默认不能修改的，在任何地方修改都会报错，只有加上set方法之后才可以修改

computed:{
计算属性名字：{get(){return },set(修改的值value）{}//当在外部有修改计算属性的行为的时候，就会触发这个set方法，并把修改的值赋值给value,然后可以对value进行相关的操作。
}

但是注意要用computed里面的某个属性里的修改的话就应该是属性=‘修改值’(vue里面其他地方用还是要加this哦)

watch监视器

如果你写了某个数据的监视器，只要数据变化了，就会触发这个对应监视器

作用：可以根据数据的实时变化，来发送请求

little tips：用clearTimeout(a) const a=setTimeout()来实现防抖延迟执行 .

非整个对象的写法
在这里插入图片描述
整个对象的监听写法

deep是深度监视就是对对象里面每一个属性都监视，immmediate是一进页面就翻译一次。

5.生命周期

konwlegde

在这里插入图片描述
生命周期钩子：在vue的生命周期里自动运行的函数，可以在这些函数里面运行自己的代码。
created：发初始化请求
mounted：dom操作
destroy是在关闭页面后执行的，可以用app.$destroy()将数据变成死数据

example-自动获取焦点

在这里插入图片描述

6.工程化开发

index.html提供vue所管理的容器
App.vue是根目录
components是子组件
main.js导入vue,App.vue,用render方法将App.vue动态渲染到 index.html

vue非组件的初学笔记

1.创建Vue实例，初始化渲染的核心准备容器引包创建Vue实例new Vue() el用来指定控制的盒子data提供数据 2.插值表达式作用利用表达式插值，将数据渲染到页面中格式{{表达式}} 注意点表达式的数据要在data中存在表达式是可计算结果的语句插值表达式…...

编程日记 2025/2/18 11:48:21

LeetCode 热题 100_单词搜索（60_79_中等_C++）（深度优先搜索（回溯））(初始化二维vector的大小)

LeetCode 热题 100_单词搜索（60_79） 题目描述：输入输出样例：题解：解题思路：思路一（深度优先搜索（回溯））： 代码实现代码实现（思路一&am…...

编程日记 2025/2/18 11:47:15

js闭包，跨域

js闭包，跨域闭包想象一下，你家有个大仓库（函数），仓库里放着各种东西（变量）。一般情况下，你从仓库外面是看不到也拿不到仓库里的东西的。但是，闭包就像是你在仓库里留…...

编程日记 2025/2/18 11:45:12

算法练习（力扣-BFS）——102. 二叉树的层序遍历

题目描述（简要概括） 题目链接：102. 二叉树的层序遍历 - 力扣（LeetCode） 题目要求对给定的二叉树进行层序遍历（从上到下，从左到右），并返回遍历的结果。层序遍历是一种基…...

编程日记 2025/2/18 11:43:10

Jetson Agx Orin平台preferred_stride调试记录--1924x720图像异常

1.问题描述硬件： AGX Orin 在Jetpack 5.0.1和Jetpack 5.0.2上测试验证图像分辨率在1920x720和1024x1920下图像采集正常但是当采集图像分辨率为1924x720视频时，图像输出异常像素格式：yuv_uyvy16 gstreamer命令如下 gst-launch-1.0 v4l2src device=/dev/video0 ! …...

编程日记 2025/2/18 11:42:09

nlp|微调大语言模型初探索(2)，训练自己的聊天机器人

前言上篇文章记录了具体的微调语言大模型步骤，以及在微调过程中可能遇见的各种报错，美中不足的是只是基于开源数据集的微调，今天来记录一下怎么基于自己的数据集去微调大语言模型，训练自己的智能机器人！！&…...

编程日记 2025/2/18 11:37:57

win11安装wsl报错：无法解析服务器的名称或地址（启用wsl2）

1. 启用wsl报错如下 # 查看可安装的 wsl --install wsl --list --online此原因是因为没有开启DNS的原因，所以需要我们手动开启DNS。 2. 按照如下配置即可 Google的DNS（8.8.8.8和8.8.4.4) 全国通用DNS地址 (114.114.114.114) 3. 运行以下命令来重启 WSL…...

编程日记 2025/2/18 11:36:54

Gentleman：优雅的Go语言HTTP客户端工具包

gentlemen介绍，特点等插件驱动架构：Gentleman的核心特点是其插件系统，允许用户注册和重用各种自定义插件，如重试策略或动态服务器发现，以增强HTTP客户端的功能。中间件层：项目内置了一个上下文感知的层次…...

编程日记 2025/2/18 11:31:44

解锁豆瓣高清海报(三)从深度爬虫到URL构造，实现极速下载

脚本地址: 项目地址: Gazer PosterBandit_v2.py 前瞻之前的 PosterBandit.py 是按照深度爬虫的思路一步步进入海报界面来爬取, 是个值得学习的思路, 但缺点是它爬取慢, 仍然容易碰到豆瓣的 418 错误, 本文也会指出彻底解决旧版 418 错误的方法并提高爬取速度. 现在我将介绍…...

编程日记 2025/2/18 11:28:35

IDEA单元测试插件 SquareTest 延长试用期权限

SquareTest是一款强大的IDEA单元测试生成插件工具，具体使用方法就不过多介绍了，这里主要介绍变更试用期，方便大家使用配置信息我的电脑安装前提配置条件 IntelliJ IDEA 2023.2windows 系统软件安装 IntelliJ IDEA 直接安装插件Squar…...

编程日记 2025/2/18 11:27:30

PLC的五个学习步骤

五个学习步骤详解： 1. 夯实电气基础 (第一步) 核心思想: PLC控制技术是建立在传统电气控制技术之上的，因此扎实的电气基础至关重要。学习内容: 电气元件原理: 深入理解继电器、接触器、按钮、三相异步电机等常用电气元件的工作原理。这是理解电气控制回…...

编程日记 2025/2/18 11:26:19

深度学习05 ResNet残差网络

目录传统卷积神经网络存在的问题如何解决批量归一化BatchNormalization, BN 残差连接方式残差结构 ResNet网络 ResNet 网络是在 2015年由微软实验室中的何凯明等几位大神提出，斩获当年ImageNet竞赛中分类任务第一名，目标检测第一名。获得CO…...

编程日记 2025/2/18 11:20:01

卷积神经网络CNN

目录一、CNN概述二、图像基础知识三、卷积层 3.1 卷积的计算 3.2 Padding 3.3 Stride 3.4 多通道卷积计算 3.5 多卷积核卷积计算 3.6 特征图大小计算 3.7 Pytorch 卷积层API 四、池化层 4.1 池化计算 4.2 Stride 4.3 Padding 4.4 多通道池化计算 4.5 Pytorc…...

编程日记 2025/2/18 11:18:54

一.SurfaceView Mediaplayer XML中添加SurfaceView: <SurfaceViewandroid:id"id/surface_view"android:layout_width"match_parent"android:layout_height"match_parent"/> Activity代码： package com.android.rtsp;impor…...

编程日记 2025/2/18 11:16:47

web信息泄露 ctfshow-web入门web1-web10

01做题思路判断做题的思路是读取，写入，还是执行判断大概的类型，有登录逻辑就尝试sql注入，有下载逻辑就尝试文件读取，有源码就做源码审计 02信息泄露及利用 robots.txt 以ctfshow的web1为例，访问robots…...

编程日记 2025/2/18 11:12:41

Log4j在Spring项目中的应用与实践

在现代Java开发中，日志记录是不可或缺的一部分。它不仅帮助开发者调试和监控应用程序的运行状态，还能在出现问题时快速定位原因。今天，我们就来探讨如何在Spring项目中使用Log4j进行日志管理，并通过具体的实例来展示其强大的功能。…...

编程日记 2025/2/18 11:10:35

docker安装mysql:8.0

1.docker源目前docker国内的源基本上用不了了，建议去淘宝找一找，我整了一个大概是10R一个月。 2.拉取镜像 docker pull mysql:8.0 3.启动容器命令如下： docker run \-p 3306:3306 \-e MYSQL_ROOT_PASSWORD123456 \-v /home/data/mysq…...

编程日记 2025/2/18 11:08:30

搭建一个 Spring Boot 项目，解决jdk与springboot版本不匹配

搭建一个 Spring Boot 项目方式一：使用 Spring Initializr Spring Initializr 是一个基于 Web 的工具，用于快速生成 Spring Boot 项目的基础结构。访问 Spring Initializr 网站：https://start.spring.io/配置项目信息： …...

编程日记 2025/2/18 11:07:24

心心相系：十颗心

心心相系：十颗心【1】心脏；人心，热心 heart //注：h-通c-或k- warmhearted a.热心的，热心肠的；亲切的a warm-hearted person 为人古道热肠词根cardi(o)-(heart)，例词：cardiology(…...

编程日记 2025/2/18 11:02:15

ChatGPT行业热门应用提示词案例-AI绘画类

AI 绘画指令是一段用于指导 AI 绘画工具（如 DALLE、Midjourney 等）生成特定图像的文本描述。它通常包含场景、主体、风格、色彩、氛围等关键信息，帮助 AI 理解创作者的意图，从而生成符合要求的绘画作品。 ChatGPT 拥有海量的知识…...

编程日记 2025/2/18 11:01:13

vscode里如何用git

打开vs终端执行如下： 1 初始化 Git 仓库（如果尚未初始化） git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

Cursor实现用excel数据填充word模版的方法

cursor主页：https://www.cursor.com/ 任务目标：把excel格式的数据里的单元格，按照某一个固定模版填充到word中文章目录注意事项逐步生成程序1. 确定格式2. 调试程序注意事项直接给一个excel文件和最终呈现的word文件的示例，…...

编程新知 2025/8/23 5:46:26

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/11/22 15:30:19

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/22 1:32:50

Cesium1.95中高性能加载1500个点

一、基本方式： 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55