【Vue】Vue基础入门

📝个人主页:五敷有你
🔥系列专栏:Vue
⛺️稳重求进,晒太阳

Vue概念
- 是一个用于构建用户界面的渐进式框架
- 优点:大大提高开发效率
- 缺点:需要理解记忆规则
创建Vue实例
步骤:
- 准备容器
- 引包
- 创建Vue实例new Vue()
- 指定配置项el data=>渲染数据
- el指定挂载点,选择器指定控制的是哪个盒子
- data:提供数据
插值表达式
插值表达式是一种Vue的模板语法
- 作用:利用表达式进行插值,渲染到页面
- 表达式:可以被求值的代码,js会算出一个结果
- 语法:{{表达式}}
- 注意点
- 使用的数据必须存在
- 支持的式表达式而非语法
- 不能在标签属性中使用{{}}插值
Vue的核心特征:响应式
数据改变,视图自动更新

访问数据:实例.属性名
修改数据:实例.属性名=“值”
开发者工具:
在拓展中搜索VueDevtools下载安装
给他权限
OK

Vue指令
Vue会根据不同的指令,针对标签实现不同的功能
指令:带有v-前缀的特殊标签属性
v-html
v-html="表达式" ->动态设置元素innerHTML
v-if(条件渲染)
作用:控制元素显示隐藏(条件渲染)
语法:v-if="表达式" 表达式值:true 显示,flase 隐藏
原理:根据条件判断,是否创建或移除元素节点
场景:不频繁切换的场景
v-show(显示隐藏)
作用:控制元素显示隐藏
语法:v-show="表达式"
原理:切换display:none
场景:频繁切换显示隐藏场景
v-if v-else v-else-if
作用:复制v-if进行判断渲染
语法:v-else v-else-if="表达式"
注意:需要紧挨着v-if一起使用
v-on
- 作用:注册事件=添加监听+提供处理逻辑
- 语法:
- v-on:事件名="内联语句"
<button v-on:click="count++">+</button>//简写<button @click="count++">+</button>
v-on:事件名="methods中的函数名"
- 注意:
- 内联语句可以直接拿data中的数据
- method中是不能直接访问到data中的数据的,需要的是app.属性
- 在methods中的函数,this都是指向当前实例
- 调用传参
- 可以额外传参
<button @click="func(10)">+10</button> /.../methods:{func(num){app.count=app.count+num;}}
v-bind
作用:动态的设置html的标签属性 ->src url title
语法:v-bind:属性名="表达式" 简写::属性名="表达式"
<div v-else> <img v-bind:src="imageUrl[page]" /> </div>
v-for
作用:基于数据循环,多次渲染整个元素 →数组、对象、数字
语法:v-for="(item,index) in 数组" (item每一项,index下标)
<li v-for="(item,index) in list"> {{item}} </li>
v-for中的key
<ul> <li v-for="(item,index) in book" :key="item.id "> <span>{{item.id}}</span><span>{{item.name}}</span><span>{{item.author}}</span><button @click="fun1(index)">删除</button> </li> </ul>
加key相当于每一列加了名字
不加v-for的默认行为会尝试原地修改元素(就地复用)
v-model
作用:给表单元素使用,双向数据绑定--->可以快速获取或设置表单元素内容
语法:v-model="变量"
<input type="text" name="" id="username"v-model="username"><br><input type="password" id="password" v-model="password"><br>
相关文章:
【Vue】Vue基础入门
📝个人主页:五敷有你 🔥系列专栏:Vue ⛺️稳重求进,晒太阳 Vue概念 是一个用于构建用户界面的渐进式框架优点:大大提高开发效率缺点:需要理解记忆规则 创建Vue实例 步骤: …...
正点原子-STM32通用定时器学习笔记(1)
目录 1. 通用定时器简介(F1为例) 2. 通用定时器框图 ①时钟源 ②控制器 ③时基单元 ④输入捕获 ⑤捕获/比较(公共) ⑥输出比较 3.时钟源配置 3.1 计数器时钟源寄存器设置方法 3.2 外部时钟模式1 3.3 外部时钟模式2 3…...
Redis篇之redis是单线程
一、redis是单线程 Redis是单线程的,但是为什么还那么快?主要原因有下面3点原因: 1. Redis是纯内存操作,执行速度非常快。 2. 采用单线程,避免不必要的上下文切换可竞争条件,多线程还要考虑线程安全问题。 …...
随机MM引流源码PHP开源版
引流源码最新随机MM开源版PHP源码,非常简洁好看的单页全解代码没任何加密 直接上传即可用无需数据库支持主机空间...
【C++修行之道】(引用、函数提高)
目录 一、引用 1.1引用的基本使用 1.2 引用注意事项 1.3 引用做函数参数 1.4 引用做函数返回值 1.5 引用的本质 1.6 常量引用 1.7引用和指针的区别 二、函数提高 2.1 函数默认参数 2.2函数占位参数 2.3 函数重载 2.4函数重载注意事项 一、引用 1.1引用的基本使用 …...
从零开始手写mmo游戏从框架到爆炸(十一)— 注册与登录
导航:从零开始手写mmo游戏从框架到爆炸(零)—— 导航-CSDN博客 从这一章开始,我们进入业务的部分,从注册登录开始。 创建注册和登录的路由 package com.loveprogrammer.command.server;public interface Se…...
【SpringBoot】Redis集中管理Session和自定义用户参数解决登录状态及校验问题
🏡浩泽学编程:个人主页 🔥 推荐专栏:《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》 🛸学无止境,不骄不躁,知行合一 文章目录 前言一、分布…...
【0256】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(二)
上一篇:【0255】揭晓pg内核中MyBackendId的分配机制(后端进程Id,BackendId)(一) 文章目录 1. 前言2. 分配BackendId2.1 何时为backend process分配BackendId2.1.1 找出未使用的slot(inactive slot)2.3 BackendId序号从多少开始?2.4 后端进程退出后,其BackendId被释放…...
eclipse4.28.0版本如何安装FatJar插件
场景: 今天准备温故下以前的老项目,于是下载了最新版本的Eclipse IDE for Enterprise Java and Web Developers - 2023-06,老项目中有些需要将程序打成jar包,于是考虑安装FatJar插件。 问题描述 一顿操作后,发现FatJar死活安装了,在线安装提示content.xml异常;离线安装…...
查大数据检测到风险等级太高是怎么回事?
随着金融风控越来越多元化,大数据作为新兴的技术被运用到贷前风控中去了,不少人也了解过自己的大数据,但是由于相关知识不足,看不懂报告,在常见的问题中,大数据检测到风险等级太高是怎么回事呢?小易大数据…...
Leetcode 30天高效刷数据结构和算法 Day1 两数之和 —— 无序数组
两数之和 —— 无序数组 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里不能重复出现…...
Hair Tool for Blender3D
CGer.com - Hair Tool for Blender3D - CGer资源网 Hair Tool 1.5 for Blender3D 链接: https://pan.baidu.com/s/1kVABn6n 密码: gwprHair Tool 1.65-1.8 for Blender链接: https://pan.baidu.com/s/1A7cW_Ms2baGQ2M0iE1dQhQ 密码: 81bqHair Tool for Blender 1.9.2链接: http…...
【最详解】如何进行点云的凹凸缺陷检测(opene3D)(完成度80%)
文章目录 前言实现思路想法1想法2想法3 补充实现想法1想法2代码 想法3代码 总结 前言 读前须知: 首先我们得确保你已经完全知晓相关的基本的数学知识,其中包括用最小二乘法拟合曲二次曲面,以及曲面的曲率详细求解。若还是没弄清楚࿰…...
海外云手机——平台引流的重要媒介
随着互联网的飞速发展,跨境电商、短视频引流以及游戏行业等领域正经历着迅猛的更新换代。在这个信息爆炸的时代,流量成为至关重要的资源,而其中引流环节更是关乎业务成功的关键。海外云手机崭露头角,成为这一传播过程中的重要媒介…...
数据库-计算机三级学习记录-4DBAS功能概要设计
DBAS功能概要设计 参照b站【计算机三级数据库技术】 DBAS功能设计包括应用软件中的数据库事务设计和应用程序设计。 功能设计过程一般被划分为总体设计、概要设计和详细设计。而具体到数据库事务设计部分,又可分成事务概要设计和事务详细设计。完成系统设计工作之后…...
JVM-虚拟机栈
虚拟机栈 Java虚拟机栈(Java Virtual Machine Stack)采用栈的数据结构来管理方法调用中的基本数据,先进后出(First In Last Out),每一个方法的调用使用一个栈帧(Stack Frame)来保存。 接下来以…...
linux系统上tomcat简介以及安装tomcat
tomcat简介以及安装 Tomcat简介安装环境安装jdk安装tomcat浏览器访问 Tomcat简介 Tomcat是一个开源的Web服务器和servlet容器,由Apache软件基金会开发和维护。它是一种流行的Java Web应用服务器,用于运行Java编写的Web应用程序。 Tomcat提供了一个轻量级…...
树莓派的pip安装时候添加清华源
每次都要去找镜像网址,太麻烦了,通过改配置可以一次性解决。 首先创建一个.pip 目录 mkdir ~/.pip意味着在当前目录下创建.pip文件,不过这个是隐藏文件,一般情况下是关闭隐藏文件的可视的,于是我绕了点弯弯。 编辑…...
共享网盘系统PHP源码
新V5.0版本,支持上传视频、支持视频播放、支持共享,也可以自己用。 可以自动生成视频外链,下载地址,播放器代码,html代码,ubb代码等等。 使用方法: 源码上传到服务器,打开网站根据…...
unity-ios-解决内购商品在Appstore上面已配置,但在手机测试时却无法显示的问题
自己这几天用 unity 2021 xcode 14.2 开发ios内购,appstore上面内购商品都已经配置好了,但是在手机里就是不显示,最后才发现必需得满足以下条件才行: 1. Appstore后台 -> 内购商品 -> 商品状态必需为『准备提交』以上状态…...
C++程序员逆袭之路:手把手教你转行大模型算法岗!
作为一名C程序员,你拥有强大的编程能力和对底层系统深入理解的优势。然而,如果你对大数据、深度学习和算法设计充满热情,转行到大模型算法岗位可能是一个充满挑战和机遇的职业转变。本文将为你提供一份详细的转行指南,帮助你从C开…...
AI读脸术本地运行:私有化部署人脸分析系统详细步骤
AI读脸术本地运行:私有化部署人脸分析系统详细步骤 1. 什么是AI读脸术:不联网也能识别人脸属性 你有没有想过,一张普通照片里藏着多少信息?比如这张自拍——不用上传到任何云端服务,也不用担心数据被谁看到ÿ…...
FastMoss TikTok电商数据爬取实战:JS逆向与MD5签名破解
1. FastMoss TikTok电商数据爬取的核心挑战 最近在研究FastMoss平台的TikTok电商数据爬取,发现最大的难点在于请求签名加密。当你访问https://www.fastmoss.com/zh/e-commerce/saleslist这个页面时,切换周榜会触发一个带有fm-sign签名的加密请求。这个签…...
Windows下OpenClaw全流程指南:接入Qwen3.5-4B-Claude完成办公自动化
Windows下OpenClaw全流程指南:接入Qwen3.5-4B-Claude完成办公自动化 1. 为什么选择OpenClaw做办公自动化 去年我接手了一个新项目,每周需要处理几十份会议录音转写的文字稿。手动整理不仅耗时,还经常漏掉关键行动项。当我第一次听说OpenCla…...
OpenClaw+Qwen3-32B自动化办公:会议纪要生成与飞书同步实战
OpenClawQwen3-32B自动化办公:会议纪要生成与飞书同步实战 1. 为什么需要自动化会议纪要 每次开完会最痛苦的事情是什么?对我来说就是整理会议纪要。作为技术负责人,每周要参加5-6个不同主题的会议,会后需要花大量时间回听录音、…...
告别命令行恐惧:用乐鑫官方Flash Download Tool图形化烧录ESP32-S3固件(保姆级图文教程)
告别命令行恐惧:乐鑫Flash Download Tool图形化烧录ESP32-S3全指南 第一次接触ESP32开发板时,那个闪烁的命令行窗口让我手足无措。直到发现乐鑫官方的Flash Download Tool,才发现原来固件烧录可以如此直观简单——不需要记忆任何命令参数&…...
5分钟搞定foobar2000美化:foobox-cn让你的音乐播放器焕然一新!
5分钟搞定foobar2000美化:foobox-cn让你的音乐播放器焕然一新! 【免费下载链接】foobox-cn DUI 配置 for foobar2000 项目地址: https://gitcode.com/GitHub_Trending/fo/foobox-cn 厌倦了千篇一律的音乐播放器界面?想让你的foobar200…...
Ubuntu 20.04上解决CARLA报错‘Engine crash handling finished’的保姆级指南(附NVIDIA驱动降级避坑)
Ubuntu 20.04深度调优:彻底解决CARLA引擎崩溃与NVIDIA驱动兼容性问题 当你在Ubuntu 20.04上第一次启动CARLA仿真平台,满心期待地输入./CarlaUE4.sh命令后,终端却突然抛出一连串令人窒息的红色错误信息——"Engine crash handling finish…...
AI赋能边缘设备:借助快马平台为树莓派集成图像识别功能
AI赋能边缘设备:借助快马平台为树莓派集成图像识别功能 最近在折腾树莓派项目时,发现很多场景需要用到图像识别功能。比如智能门禁、垃圾分类助手或者简单的安防监控。传统做法需要自己训练模型、处理数据,门槛实在太高。后来发现InsCode(快…...
SmartLabXBeeCore:轻量级XBee/ZigBee嵌入式驱动框架
1. SmartLabXBeeCore:面向嵌入式系统的XBee/ZigBee模块底层驱动框架解析1.1 模块定位与工程价值SmartLabXBeeCore 是一个专为 Digi XBee 和 XBee-PRO ZigBee RF 模块设计的轻量级、可移植嵌入式驱动核心库。其本质并非高层应用协议栈,而是介于硬件抽象层…...
