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

vue非组件的初学笔记

news 2026/5/4 3:02:12

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

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

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

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

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

js闭包，跨域

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

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

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

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

编程日记 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)，训练自己的聊天机器人

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

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

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

1. 启用wsl报错如下 # 查看可安装的 wsl --install wsl --list --online此原因是因为没有开启DNS的原因&#xff0c;所以需要我们手动开启DNS。 2. 按照如下配置即可 Google的DNS&#xff08;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介绍&#xff0c;特点等 插件驱动架构&#xff1a;Gentleman的核心特点是其插件系统&#xff0c;允许用户注册和重用各种自定义插件&#xff0c;如重试策略或动态服务器发现&#xff0c;以增强HTTP客户端的功能。 中间件层&#xff1a;项目内置了一个上下文感知的层次…...

编程日记 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单元测试生成插件工具&#xff0c;具体使用方法就不过多介绍了&#xff0c;这里主要介绍变更试用期&#xff0c;方便大家使用 配置信息 我的电脑安装前提配置条件 IntelliJ IDEA 2023.2windows 系统 软件安装 IntelliJ IDEA 直接安装插件Squar…...

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

PLC的五个学习步骤

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

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

深度学习05 ResNet残差网络

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

Android：播放Rtsp视频流的两种方式

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

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

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

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

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

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

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

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

docker安装mysql:8.0

1.docker源 目前docker国内的源基本上用不了了&#xff0c;建议去淘宝找一找&#xff0c;我整了一个大概是10R一个月。 2.拉取镜像 docker pull mysql:8.0 3.启动容器 命令如下&#xff1a; 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 项目 方式一&#xff1a;使用 Spring Initializr Spring Initializr 是一个基于 Web 的工具&#xff0c;用于快速生成 Spring Boot 项目的基础结构。 访问 Spring Initializr 网站&#xff1a;https://start.spring.io/配置项目信息&#xff1a; …...

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

心心相系：十颗心

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

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

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

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

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

KOL运营工程化：从数据采集到自动化归因的技术实现

1. 项目概述&#xff1a;从“KOL运营套件”看数据驱动的增长新范式最近在GitHub上看到一个挺有意思的项目&#xff0c;叫“kol-ops-suite”。光看名字&#xff0c;你可能会觉得这又是一个给网红或者博主用的工具包&#xff0c;无非是些发帖、排期、数据分析的玩意儿。但当我真正…...

编程新知 2026/5/4 2:32:11

实战应用：基于pencil设计理念，用快马ai快速搭建‘智绘’设计工具官网

最近在做一个叫"智绘"的UI设计工具的官网项目&#xff0c;正好用到了InsCode(快马)平台来快速实现&#xff0c;整个过程特别顺畅&#xff0c;分享下我的实战经验。 项目背景与需求分析 智绘是一款面向设计师和开发团队的UI设计协作工具&#xff0c;需要官网能直观展示…...

编程新知 2026/5/4 2:26:04

3步搞定QMC加密音乐：qmc-decoder音频解密完全指南

3步搞定QMC加密音乐&#xff1a;qmc-decoder音频解密完全指南 【免费下载链接】qmc-decoder Fastest & best convert qmc 2 mp3 | flac tools 项目地址: https://gitcode.com/gh_mirrors/qm/qmc-decoder 你是否曾经遇到过这样的烦恼&#xff1a;在QQ音乐上精心收藏的…...

编程新知 2026/5/4 2:12:01

孤舟笔记 并发篇三十 CompletableFuture到底是个啥？为什么说它是异步编程的王者

文章目录一、先说结论&#xff1a;CompletableFuture vs Future二、从 Future 的痛点说起三、链式回调&#xff1a;异步流水线四、任务组合&#xff1a;11>2五、异常处理&#xff1a;别让流水线崩盘CompletableFuture 全景回答技巧与点评标准回答加分回答面试官点评个人网站…...

编程新知 2026/5/4 1:41:13

做端侧 AI 应用，绝不等于强行跑大模型

【端侧 AI 实践】如何在 20MB 包体积限制下&#xff0c;实现小程序的"实时"AR 视觉与 VLM 场景理解&#xff1f; 在构建基于 AI 的摄影辅助小程序时&#xff0c;我们面临了一个非常经典且棘手的端侧 AI 架构矛盾。 理想情况下&#xff0c;我们希望通过视觉大模型&…...

编程新知 2026/5/4 1:28:56

从iCloud到Exporter：一份给Mac用户的苹果备忘录迁移与备份全攻略

从iCloud到Exporter&#xff1a;Mac用户的苹果备忘录迁移与备份全攻略 苹果备忘录作为生态内轻量级笔记工具&#xff0c;其优雅的界面设计和无缝同步体验让许多用户爱不释手。但当面临设备更换、数据归档或工作流整合时&#xff0c;如何将这些碎片化知识安全迁移却成了令人头疼…...

编程新知 2026/5/4 0:23:30

从零构建可扩展的视频字幕提取器：插件化架构设计指南

从零构建可扩展的视频字幕提取器&#xff1a;插件化架构设计指南 【免费下载链接】video-subtitle-extractor 视频硬字幕提取&#xff0c;生成srt文件。无需申请第三方API&#xff0c;本地实现文本识别。基于深度学习的视频字幕提取框架&#xff0c;包含字幕区域检测、字幕内容…...

编程新知 2026/5/3 23:51:03

PCL直通滤波PassThrough保姆级教程：从单维度到多维度阈值过滤点云（附完整代码）

PCL直通滤波PassThrough实战指南&#xff1a;从单维度到多维度精准提取点云数据 在三维点云处理领域&#xff0c;快速准确地提取目标区域是许多应用场景的第一步。想象你正面对一个包含数百万个无序点的扫描数据&#xff0c;需要从中提取出桌面上的物体——这就是直通滤波(Pass…...

编程新知 2026/5/3 23:44:42

手把手教你用MATLAB读取McMaster IPIX雷达数据（附完整代码与数据集下载）

从零开始解析McMaster IPIX雷达数据&#xff1a;MATLAB实战指南 第一次接触IPIX雷达数据的研究者&#xff0c;往往会被NetCDF格式的文件难住。那些看似复杂的海杂波数据背后&#xff0c;隐藏着海洋表面动态的宝贵信息。本文将带你一步步拆解数据读取的全过程&#xff0c;从文件…...

编程新知 2026/5/3 23:32:45

如何在Windows系统上快速安装APK应用：终极免费指南

如何在Windows系统上快速安装APK应用&#xff1a;终极免费指南 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer APK Installer是一款专为Windows用户设计的Android应用安…...

编程新知 2026/5/3 23:13:48