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

vue非组件的初学笔记

news 2026/2/9 17:12:05

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

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2026/2/8 5:22:04

智慧医疗能源事业线深度画像分析（上）

引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2026/2/8 20:41:46

docker详细操作--未完待续

docker介绍 docker官网: Docker&#xff1a;加速容器应用程序开发 harbor官网&#xff1a;Harbor - Harbor 中文 使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像 是什么 Docker 是一种开源的容器化平台&#xff0c;用于将应用程序及其依赖项&#xff08;如库、运行时环…...

编程新知 2026/2/5 4:33:24

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

解决：Android studio 编译后报错\app\src\main\cpp\CMakeLists.txt‘ to exist

现象&#xff1a; android studio报错&#xff1a; [CXX1409] D:\GitLab\xxxxx\app.cxx\Debug\3f3w4y1i\arm64-v8a\android_gradle_build.json : expected buildFiles file ‘D:\GitLab\xxxxx\app\src\main\cpp\CMakeLists.txt’ to exist 解决&#xff1a; 不要动CMakeLists.…...

编程新知 2025/12/15 0:46:42

消防一体化安全管控平台：构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

编程新知 2026/2/6 5:47:08

2.2.2 ASPICE的需求分析

ASPICE的需求分析是汽车软件开发过程中至关重要的一环&#xff0c;它涉及到对需求进行详细分析、验证和确认&#xff0c;以确保软件产品能够满足客户和用户的需求。在ASPICE中&#xff0c;需求分析的关键步骤包括&#xff1a; 需求细化&#xff1a;将从需求收集阶段获得的高层需…...

编程新知 2025/10/12 15:47:17

基于Java项目的Karate API测试

Karate 实现了可以只编写Feature 文件进行测试，但是对于熟悉Java语言的开发或是测试人员，可以通过编程方式集成 Karate 丰富的自动化和数据断言功能。 本篇快速介绍在Java Maven项目中编写和运行测试的示例。 创建Maven项目 最简单的创建项目的方式就是创建一个目录，里面…...

编程新知 2025/11/5 23:09:37