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

vue入门及小项目小便签条

news 2026/2/6 20:51:52

vue
框架:是一个半成品软件，是一套可重用的，通用的，软件基础代码模型。基于框架进行开发，更加快捷 ，更加高效 
v-bind为HTML标签绑定属性值，如设置href，css样式等
v-model在表单元素上创建双向数据绑定
el:挂载点
data:数据对象
methods:方法对象
vue中用到的数据定义在data中
data中可以写复杂类型的数据
渲染复杂类型数据时，遵守js语法即可

v-text设置标签的文本值
在el命中标签内部及子类的属性中设置data中的值，即可在该标签内部 显示该属性ps:可以进行字符串的拼接
v-HTML设置文本的HTML
普通文本和v-text一样
html格式的文本会被解析成对应的标签
v-on
为元素绑定事件
eg：
v-on:click="dolt"
"v-on:"可以替换成@符
传递自定义参数，事件修饰符

v-show
操纵display元素
根据表达式的真假，切换元素的显示和隐藏
false隐藏
true显示
通常用一个变量表示该值，再用一个方法控制 该值，再将该方法绑定一个事件

v-if
根据表达式的真假，切换元素的显示状态
操纵dom树移除元素再添加回来
频繁切换用v-show因为操作dom消耗较大

v-bind
设置元素的属性eg:src，title，class
v-bind可以省略
直接   :属性名="属性值"
.active{
    border:1px
}
:class="{active:isActice}"

v-for
根据数据生成列表结构 
<li v-for="item in arr">黑马程序员{{item}}</li>
或
<li v-for="(值，索引) in arr">

v-model
获取和设置表单元素的值(双向数据绑定)
 

小便签条

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>s</title><style>#bigbox {position: absolute;height: auto;width: 300px;left: 500px;top: 30%;border: solid black 3px;}.an {height: 100px;border: solid black 3px;list-style-type: none;}.an:hover {border: solid red 3px;}</style>
</head><body><div id="bigbox"><input type="text" v-model="inner" @keyup.enter="add"><ul><li v-for="(item,index) in arr" v-text="(index+1)+item" class="an" @dblclick="subta(index)"></li></ul><button @click="cleann">clean</button><p v-text="content"></p></div><script src="vue.js"></script><script>var app = new new Vue({el: "#bigbox",data: {arr: ["写代码", "吃饭饭", "睡觉觉"],inner: "好好学习",content: 3},methods: {add: function () {if (this.inner != "") {this.arr.push(this.inner)this.inner = ""this.content++;}},subta: function (index) {this.arr.splice(index, 1)this.content--;},cleann: function () {this.arr.splice(0, this.arr.length)this.content = 0}},})</script>
</body></html>

 

 

 

相关文章：

vue入门及小项目小便签条

vue 框架:是一个半成品软件&#xff0c;是一套可重用的&#xff0c;通用的&#xff0c;软件基础代码模型。基于框架进行开发&#xff0c;更加快捷 &#xff0c;更加高效 v-bind为HTML标签绑定属性值&#xff0c;如设置href&#xff0c;css样式等 v-model在表单元素上创建双向数…...

编程日记 2023/9/23 21:35:10

详解TCP/IP协议第四篇：数据在网络中传输方式的分类概述

文章目录 前言 一&#xff1a;面向有连接型与面向无连接型 1&#xff1a;大致概念 2&#xff1a;面向有连接型 3&#xff1a;面向无连接型 二&#xff1a;电路交换与分组交换 1&#xff1a;分组交换概念 2&#xff1a;分组交交换过程 三&#xff1a;根据接收端数量分…...

编程日记 2023/9/23 21:34:08

SpringMvc决战-【SpringMVC之自定义注解】

目录 一、前言 1.1.什么是注解 1.2.注解的用处 1.3.注解的原理 二.注解父类 1.注解包括那些 2.JDK基本注解 3. JDK元注解 4.自定义注解 5.如何使用自定义注解&#xff08;包括&#xff1a;注解标记【没有任何东西】&#xff0c;元数据注解&#xff09;&#xff1f; 三…...

编程日记 2023/9/23 21:33:07

【MySQL集群一】CentOS 7上搭建MySQL集群：一主一从、多主多从

CentOS 7上搭建MySQL集群 介绍一主一从步骤1&#xff1a;准备工作步骤2&#xff1a;安装MySQL步骤3&#xff1a;配置主服务器步骤4&#xff1a;创建复制用户步骤5&#xff1a;备份主服务器数据&#xff0c;如果没有数据则省略这一步步骤6&#xff1a;配置从服务器步骤7&#xf…...

编程日记 2023/9/23 21:32:06

RGB格式

Qt视频播放器实现&#xff08;目录&#xff09; RGB的使用场景 目前&#xff0c;数字信号源&#xff08;直播现场的数字相机采集的原始画面&#xff09;和显示设备&#xff08;手机屏幕、笔记本屏幕、个人电脑显示器屏幕&#xff09;使用的基本上都是RGB格式。 三原色 RGB是…...

编程日记 2023/9/23 21:29:04

认识面向对象-PHP8知识详解

面向对象编程&#xff0c;也叫面向对象程序设计&#xff0c;是在面向过程程序设计的基础上发展而来的&#xff0c;它比面向过程编程具有更强的灵活性和扩展性。 它用类、对象、关系、属性等一系列东西来提高编程的效率&#xff0c;其主要的特性是可封装性、可继承性和多态性。…...

编程日记 2023/9/23 21:28:03

毕业设计|基于51单片机的空气质量检测PM2.5粉尘检测温度设计

基于51单片机的空气质量检测PM2.5粉尘检测温度设计 1、项目简介1.1 系统构成1.2 系统功能 2、部分电路设计2.1 LED信号指示灯电路设计2.2 LCD1602显示电路2.3 PM2.5粉尘检测电路设计 3、部分代码展示3.1 串口初始化3.1 定时器初始化3.2 LCD1602显示函数 4 演示视频及代码资料获…...

编程日记 2023/9/23 21:27:02

星闪空口技术初探

星闪技术设计目标 在星闪技术的应用场景中&#xff0c;最低的时延要求达到了20us量级&#xff0c;比如智能座舱的主动降噪。最高的可靠性要求达到了99.9999%&#xff0c;比如智能制造的传感器与执行器的消息收发。除了低时延和高可靠之外&#xff0c;高精度同步、多并发和信息…...

编程日记 2023/9/23 21:26:00

如何在不失去理智的情况下调试 TensorFlow 训练程序

一、说明 关于tensorflow的调试&#xff0c;是一个难啃的骨头&#xff0c;除了要有耐力&#xff0c;还需要方法&#xff1b;本文假设您是一个很有耐力的开发者&#xff0c;为您提供一些方法&#xff1b;这些方法也许不容易驾驭&#xff0c;但是依然强调您只要有耐力&#xff0c…...

编程日记 2023/9/23 21:24:58

24. 图论 - 图的表示种类

Hi&#xff0c;你好。我是茶桁。 之前的一节课中&#xff0c;我们了解了图的来由和构成&#xff0c;简单的理解了一下图的一些相关概念。那么这节课&#xff0c;我们要了解一下图的表示&#xff0c;种类。相应的&#xff0c;我们中间需要穿插一些新的知识点用于更好的去理解图…...

编程日记 2023/9/23 21:22:56

C++ 读bin文件，部分代码。赚经验。

编号:1 Head: magicWord[0] 0x0102 magicWord[1] 0x0304 magicWord[2] 0x0506 magicWord[3] 0x0708 version 0x02010004 totalPacketLen 288 platform 0x000a1443 frameNumber 12 timeCpuCycles 172969774 numDetectedObj 99 numTLVs 2 subFrameNumber 0 TLV…...

编程日记 2023/9/23 21:21:55

vue3 父子组件传值

一&#xff0c;子传父 父组件 <script setup> import HelloWorld from ./components/HelloWorld.vue import { ref } from vue//直接赋值页面不会自动渲染&#xff0c;使用ref存储响应式数据 import { defineExpose } from "vue";父传子 let val ref(); con…...

编程日记 2023/9/23 21:20:54

【看懂MPLS LSP表项】

IP网络 R1根据路由表项去查FIB表 目的网络、出口、下一跳 MPLS网络 R1根据LFIB表现去查表&#xff0c; 路由&#xff0c;出口、(标签) 要实现MPLS网络全局可达性&#xff0c;R1应具有到每一个LSR、LSE的路由。 1、R1去FEC(转发等价类) /去往2.2.2.2的路由《路由方…...

编程日记 2023/9/23 21:17:51

代码随想录训练营 单调栈

代码随想录训练营 单调栈 84. 柱状图中最大的矩形&#x1f338; 最后一天~ 84. 柱状图中最大的矩形&#x1f338; 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最…...

编程日记 2023/9/23 21:16:50

Android MQTT

MQTT Android MQTT连接,重新编译Service-1.1.1兼容Android高版本服务 Paho Android Service-1.1.1 Paho Client Mqtt3-1.1.0 资源 名字资源AAR下载GitHub查看Gitee查看 Maven 1.build.grade allprojects {repositories {...maven { url https://jitpack.io }} }2./app/bu…...

编程日记 2023/9/23 21:15:49

Codeforces Round 823 (Div. 2)C

更好的阅读体验 C. Minimum Notation 思路&#xff1a;我们可以进行的操作时将一个位置的数删除然后在任意位置处添加一个比当前数大1并且小于9的数&#xff0c;所以我们的操作只会让一个数变大&#xff0c;我们统计一个最大值的后缀&#xff0c;贪心的考虑如果当前数的后面有…...

编程日记 2023/9/23 21:14:48

npm发布vue3自定义组件库--方法一

npm发布vue3自定义组件库 创建项目 vue create test-ui自定义组件 创建自定义组件&#xff0c;组件名称根据你的需求来&#xff0c;最好一个组件一个文件夹&#xff0c;下图是我的示例。 src/components 组件和你写页面一样&#xff0c;所谓组件就是方便实用&#xff0c;不…...

编程日记 2023/9/23 21:11:45

Centos7原生hadoop环境，搭建Impala集群和负载均衡配置

Centos7原生hadoop环境&#xff0c;搭建Impala集群和负载均衡配置 impala介绍 Impala集群包含一个Catalog Server (Catalogd)、一个Statestore Server (Statestored) 和若干个Impala Daemon (Impalad)。Catalogd主要负责元数据的获取和DDL的执行&#xff0c;Statestored主要负…...

编程日记 2023/9/23 21:07:42

如何在macOS上安装Go并搭建本地编程环境

引言 Go是一种诞生于挫折中的编程语言。在谷歌&#xff0c;开发人员厌倦了在为新项目选择语言时必须做出权衡。有些语言执行效率很高&#xff0c;但需要很长时间编译&#xff0c;而另一些语言易于编写&#xff0c;但在生产环境中运行效率很低。因此&#xff0c;谷歌发明了Go语…...

编程日记 2023/9/23 21:06:41

postgresql-存储过程

postgresql-存储过程 简述PL/pgSQL 代码块结构示例嵌套子块 声明与赋值控制结构IF 语句CASE 语句简单case语句搜索 CASE 语句 循环语句continuewhilefor语句遍历查询结果 foreach 游标游标传参 错误处理报告错误和信息检查断言 捕获异常自定义函数重载VARIADIC 存储过程示例事务…...

编程日记 2023/9/23 21:05:39

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/5 15:43:30

基于算法竞赛的c++编程（28）结构体的进阶应用

结构体的嵌套与复杂数据组织 在C中&#xff0c;结构体可以嵌套使用&#xff0c;形成更复杂的数据结构。例如&#xff0c;可以通过嵌套结构体描述多层级数据关系&#xff1a; struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...

编程新知 2025/11/16 19:06:23

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别，但在其他电脑上正常工作时，问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤，帮助你快速找到故障原因： 背景： 一个M-pard（铭豹）扩展坞的网卡突然无法识别了，扩展出来的三个USB接口正常。…...

编程新知 2026/2/5 10:34:36

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

编程新知 2026/2/1 11:44:45

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2026/1/4 5:19:25

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

编程新知 2026/2/2 11:13:28

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24