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

vue入门及小项目小便签条

news 2025/7/8 13:27:04

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

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

编程新知 2025/7/7 5:29:47

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/7/5 22:29:13

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

编程新知 2025/7/5 21:38:25

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/7/7 7:03:24

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/7/6 11:26:45

解决：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/7/8 11:40:20

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

编程新知 2025/7/7 21:43:14

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

编程新知 2025/7/6 4:23:14

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2025/7/6 3:26:27