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

vue非组件的初学笔记

news 2026/2/9 13:55:18

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2026/2/8 4:37:19

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

编程新知 2026/2/6 14:42:11

linux 错误码总结

1，错误码的概念与作用 在Linux系统中，错误码是系统调用或库函数在执行失败时返回的特定数值，用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递，errno由操作系统维护，保存最近一次发生的错误信息。值得注意的是，errno的值在每次系统调用或函数调用失败时…...

编程新知 2025/9/16 22:48:47

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

编程新知 2026/2/1 5:24:17

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

编程新知 2025/10/3 17:30:30

uniapp手机号一键登录保姆级教程（包含前端和后端）

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

编程新知 2026/1/27 2:03:36

计算机基础知识解析：从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

编程新知 2026/1/31 9:44:27

C# 表达式和运算符(求值顺序)

求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如&#xff0c;已知表达式3*52&#xff0c;依照子表达式的求值顺序&#xff0c;有两种可能的结果&#xff0c;如图9-3所示。 如果乘法先执行&#xff0c;结果是17。如果5…...

编程新知 2026/1/31 13:13:28