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

vue基础

引入vue文件

<div id="app"><!--{{}}插值表达式,绑定vue中的data数据-->{{message}}
</div><script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{message:'Hello Vue'}})
</script>

单项和双向绑定指令

<div id="app"><div v-bind:style="msg">单向绑定</div><!--简写--><div :style="msg">单向绑定</div>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{msg:'color:red;'}})
</script>
<div id="app">{{keyword}}<input type="text" :value="keyword"/><!--双向绑定--><input type="text" v-model="keyword"/> 
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{keyword:'jordan'}})
</script>

绑定事件

v-on:事件名称=“调用方法” 简写 @事件名称

<div id="app"><button v-on:click="show()">事件绑定</button><button @click="show()">事件绑定2</button>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{msg:'color:red;'},methods:{show(){console.log("show……")}}})
</script>

条件指令

v-if:条件判断
v-else

<div id="app"><input type="checkbox" v-model="ok"/><div v-if="ok">选中了</div><div v-else>没有选中</div>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{ok:false}})
</script>

循环指令

v-for

<div id="app"><div v-for="user in userList">{{user.name}}---{{user.age}}</div><!--带上索引遍历--><div v-for="(user,index) in userList">{{index}}--{{user.name}}---{{user.age}}</div>
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{userList:[{"name":"jordan","age":23},{"name":"james","age":30}]}})
</script>

vue的页面渲染之前执行的created方法和页面渲染之后执行的mounted方法

<div id="app">{{msg}}
</div>
<script src="vue.min.js"></script>
<script>new Vue({el:'#app',data:{msg:'hello'},created(){debuggerconsole.log('created.....')},mounted(){debuggerconsole.log('mounted')}})
</script>

axios使用

独立于vue的一个项目,可以用于浏览器和node.js中发送ajax请求

准备一个模拟后端返回的json数据

{"code":200,"message":"成功","data":{"items":[{"name":"jordan","age":20},{"name":"kobe","age":19},{"name":"james","age":18}]}
}
<div id="app"><!--页面显示数据--><table><tr v-for="user in userList"><td>{{user.name}}</td><td>{{user.age}}</td></tr></table>
</div><script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>new Vue({el:"#app",data:{userList:[]},created(){//页面渲染之前执行,调用方法,返回json数据this.getList()},methods:{getList(){//使用axios方式ajax请求路径axios.get("user.json").then(response =>{console.log(response)this.userList = response.data.data.itemsconsole.log(this.userList)}) //请求成功.catch(error =>{console.log(error)}) //请求失败}}})
</script>

相关文章:

vue基础

引入vue文件 <div id"app"><!--{{}}插值表达式&#xff0c;绑定vue中的data数据-->{{message}} </div><script src"vue.min.js"></script> <script>new Vue({el:#app,data:{message:Hello Vue}}) </script>单项…...

访问量突破1W,纪念一下~

Mr.kanglong&#xff0c; 继续加油&#xff01;...

C# 处理TCP数据的类(服务端)

using System; using System.Collections.Generic; using System.Net; using System.Net.Sockets; using System.Threading;namespace TestDemo {/// <summary>/// 处理TCP数据的类&#xff08;服务端&#xff09;/// </summary>public class TcpService{/// <s…...

【Jenkins】调用API构建并钉钉通知

文章目录 Jenkins API介绍提交作业带参数的作业API 令牌 Shell调用代码 Jenkins API介绍 Jenkins 提供了远程访问 API。目前它有三种格式&#xff1a; XML JSON Python 远程访问 API 形式为"…/api/" 例如&#xff0c; Jenkins 安装位于https://ci.jenkins.io&a…...

Java NIO三大核心组件

文章目录 一、Buffer1、重要属性2、重要方法1&#xff09;allocate()创建缓冲区2&#xff09;put()写入到缓冲区3&#xff09;flip()翻转4&#xff09;get()从缓冲区读取5&#xff09;rewind()倒带6&#xff09;mark()和reset()7&#xff09;clear()清空缓冲区8&#xff09;使用…...

js数据排序方法(sort)?

在JavaScript中&#xff0c;可以使用Array的sort()方法对数据进行排序。下面是一个基本的例子&#xff0c;它展示了如何对一个数组进行升序和降序排序&#xff1a; // 创建一个数字数组 let numbers [2, 9, 1, 5, 8, 6];// 升序排序 let ascending numbers.sort(function(a,…...

若依框架学习笔记_mybatis

一、 在框架中引用的先后顺序 在ruoyi-system的resources下的xml中定义方法在java下的mapper包中引用方法在java下的service包中再引用mapper的方法 二、xml中的写法 标签&#xff1a; resultMap 返回数据sql 查询语句 可包含在其他操作中select 查询insert 插入update 更新…...

虚拟机的发展史:从分时系统到容器化

一、前世 早期计算机的价格非常昂贵&#xff0c;一台计算机可能需要花费几十万甚至上百万美元。例如&#xff0c;ENIAC计算机&#xff0c;作为世界上第一台通用电子数字计算机&#xff0c;当时的造价约为48万美元。科学家或者工程师们需要计算机的能力&#xff0c;但是买不起整…...

季涨约3~8%,DRAM合约价大幅回升 | 百能云芯

据TrendForce的研究显示&#xff0c;第4季DRAM与NAND Flash均价将开始全面上涨。特别是DRAM&#xff0c;预计第4季的合约价将季涨幅约在3%到8%之间。然而&#xff0c;这波上涨是否能持续&#xff0c;取决于供应商是否坚守减产策略以及实际需求的回升程度&#xff0c;尤其值得关…...

LocalDate的用法

日期时间转换 2023-03-30 14:25:00.000 DateTimeFormat(pattern "yyyy-MM-dd HH:mm:ss:sss")private LocalDateTime requestTimeStamp; 2021-06-18T10:46:19.67378508:00 new SimpleDateFormat("yyyy-MM-ddTHH:mm:ss:sssXXX");yyyy-mm-dd hh:mm:ss.sss 05…...

React通过ref获取子组件的数据和方法

父组件 1) ref必须传值, 否则childRef拿不到子组件的数据和方法 注意: 不一定使用app组件, 其他的任何父组件都可以 import "./App.css"; import React, { useEffect, useRef } from "react"; import RefToGetChild from "./components/RefToGetCh…...

Enhancing Self-Consistency and Performance of Pre-Trained Language Model

本文是LLM系列文章&#xff0c;针对《Enhancing Self-Consistency and Performance of Pre-Trained Language Models through Natural Language Inference》的翻译。 通过自然语言推理增强预训练语言模型的自一致性和性能 摘要1 引言2 相关工作3 通过关系检测进行一致性校正4 …...

安防监控视频汇聚平台EasyCVR视频广场搜索异常,报错“通道未开启”的问题排查与解决

安防视频监控系统EasyCVR视频汇聚平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;能对外分发RTSP、RTMP、FLV、…...

css 星星闪烁加载框

今天带来的是普灵普灵的loader闪烁加载框 效果如下 开源精神给我们带来了源码 ,源码如下 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…...

代码随想录算法训练营第二十二天丨 二叉树part09

669. 修剪二叉搜索树 思路 递归法 从图中可以看出需要重构二叉树&#xff0c;想想是不是本题就有点复杂了。 其实不用重构那么复杂。 在上图中我们发现节点0并不符合区间要求&#xff0c;那么将节点0的右孩子 节点2 直接赋给 节点3的左孩子就可以了&#xff08;就是把节点…...

Apipost连接数据库详解

Apipost提供了数据库连接功能&#xff0c;在接口调试时可以使用数据库获取入参或进行断言校验。目前的Apipost支持&#xff1a;Mysql、SQL Sever、Oracle、Clickhouse、达梦数据库、PostgreSQL、Redis、MongoDB 8种数据库的连接操作 新建数据库连接&#xff1a; 在「项目设置…...

让 Visual Studio 用上 ChatGPT

一、简介 Visual chatGPT Studio 是 Visual Studio 的一个免费扩展&#xff0c;它直接在 IDE 中添加了 chatGPT 功能。它允许用户以可以根据菜单功能的方式使用 chatGPT。 二、功能介绍 该扩展提供了一组使用 ChatGPT 命令&#xff0c;可以在编辑器中选择你需要处理的代码或…...

如何删除错误堆栈里的数据

修改某个主数据。然后发现N年前&#xff0c;某位开发在DTP上做了一个错误堆栈。 这里面有很多历史错误信息&#xff0c;有几千条了&#xff0c;一条条删肯定不可能。 如果不删除&#xff0c;DTP增量无法激活&#xff0c;明天处理链肯定出问题。 于是找到一位印度大神的方法&a…...

k8s使用minio分布式集群作为存储--基础配置篇

背景:minio分布式集群是单独的服务,并没有被k8s管理,k8s与minio集群在不同的服务器上部署,k8s需要使用minio分布式集群作为k8s集群的配置文件及其他文件的存储介质。 1、安装fuse: sudo yum install fuse1.1查询是否有fusemount3 sudo find / -name fusermount31.2确认…...

@Autowired 到底是怎么把变量注入进来的?

[toc] 在 Spring 容器中&#xff0c;当我们想给某一个属性注入值的时候&#xff0c;有多种不同的方式&#xff0c;例如可以通过构造器注入、可以通过 set 方法注入&#xff0c;也可以使用 Autowired、Inject、Resource 等注解注入。 今天我就来和小伙伴们聊一聊&#xff0c;Au…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

nnUNet V2修改网络——暴力替换网络为UNet++

更换前,要用nnUNet V2跑通所用数据集,证明nnUNet V2、数据集、运行环境等没有问题 阅读nnU-Net V2 的 U-Net结构,初步了解要修改的网络,知己知彼,修改起来才能游刃有余。 U-Net存在两个局限,一是网络的最佳深度因应用场景而异,这取决于任务的难度和可用于训练的标注数…...

HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散

前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说&#xff0c;在叠衣服的过程中&#xff0c;我会带着团队对比各种模型、方法、策略&#xff0c;毕竟针对各个场景始终寻找更优的解决方案&#xff0c;是我个人和我司「七月在线」的职责之一 且个人认为&#xff0c…...

​​企业大模型服务合规指南:深度解析备案与登记制度​​

伴随AI技术的爆炸式发展&#xff0c;尤其是大模型&#xff08;LLM&#xff09;在各行各业的深度应用和整合&#xff0c;企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者&#xff0c;还是积极拥抱AI转型的传统企业&#xff0c;在面向公众…...

CppCon 2015 学习:Time Programming Fundamentals

Civil Time 公历时间 特点&#xff1a; 共 6 个字段&#xff1a; Year&#xff08;年&#xff09;Month&#xff08;月&#xff09;Day&#xff08;日&#xff09;Hour&#xff08;小时&#xff09;Minute&#xff08;分钟&#xff09;Second&#xff08;秒&#xff09; 表示…...

node.js的初步学习

那什么是node.js呢&#xff1f; 和JavaScript又是什么关系呢&#xff1f; node.js 提供了 JavaScript的运行环境。当JavaScript作为后端开发语言来说&#xff0c; 需要在node.js的环境上进行当JavaScript作为前端开发语言来说&#xff0c;需要在浏览器的环境上进行 Node.js 可…...

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡

何谓AI编程【02】AI编程官网以优雅草星云智控为例建设实践-完善顶部-建立各项子页-调整排版-优雅草卓伊凡 背景 我们以建设星云智控官网来做AI编程实践&#xff0c;很多人以为AI已经强大到不需要程序员了&#xff0c;其实不是&#xff0c;AI更加需要程序员&#xff0c;普通人…...