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

20231019_vue学习

引入vue.js:

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> vue.js
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 路由
vue模板语法
  • v-html:添加html模板
  • v-bind:添加属性,缩写:
  • v-on:监听事件,缩写@
  • v-model:数据双向绑定
  • 过滤器{{message | filterA | filterB}} {{message | filterA(‘arg1’,arg2)}}
vue条件语句
  • v-if:条件判断
  • v-else:给v-if添加一个else块
  • v-else-if:用作v-if的else-if块
  • v-show:根据条件展示元素
vue循环语句
  • v-for:需要以site in sites形式的特殊语法,sites是源数据数组,site是数组元素迭代的别名
<div id="app"><ul><li v-for="(value, key, index) in object">{{ index }}. {{ key }} : {{ value }}</li></ul>
</div>
vue计算属性
  • computed:计算属性
  • computed vs methods:computed基于依赖缓存,相关依赖改变会重新取值;methods在重新渲染,函数总会重新调用执行
  • computed属性默认只有getter
vue监听属性

watch:响应数据的变化,监听data数据变化执行相关的方法

vue表单

input:输入框 checkbox:选择框 radio:选择原点 select:下拉框 textarea:大文本
<label for="对应框">值</label>:可以扩大选择范围

  • .lazy:lazy修饰符,转变为change事件同步
  • .number:处理数字
  • .trim:去除空格
vue组件

组件(Component)可以扩展HTML元素,封装可重用代码
语法:Vue.component(tagName,options)

  • 全局实例,在创建实例之前提前创建
<div id="app"><runoob></runoob>
</div><script>
// 注册
Vue.component('runoob', {template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({el: '#app'
})
</script>
  • 局部实例,在实例内进行创建
<div id="app"><runoob></runoob>
</div><script>
var Child = {template: '<h1>自定义组件!</h1>'
}// 创建根实例
new Vue({el: '#app',components: {// <runoob> 将只在父模板可用'runoob': Child}
})
</script>
  • prop:子组件用来接收父组件传递过来的数据的一个自定义属性,父组件的数据通过props把数据传给子组件,子组件需要显示的用props选项声明"prop".
vue路由

单独使用需要引入:<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>

router-link 相关属性:

  • to:表示目标路由的链接
  • replace:设置 replace 属性的话,当点击时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录
  • append:设置 append 属性后,则在当前 (相对) 路径前添加其路径
  • tag:有时候想要 router-link 渲染成某种标签,例如 li
  • active-class:设置 链接激活时使用的 CSS 类名
  • exact-active-class:配置当链接被精确匹配的时候应该激活的 class。
  • event:声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组

相关文章:

20231019_vue学习

引入vue.js: <script src"https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> vue.js <script src"https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script> 路由vue模板语法 v-html:添加html模板…...

熟练使用 Redis 的五大数据结构:Java 实战教程

入门 入门阶段主要记住 Redis 的命令&#xff0c;熟练使用 Redis 的 5 大数据结构就可以了。 如果没有 Redis 环境&#xff0c;可以直接通过这个网址https://try.redis.io/&#xff0c;很赞&#xff0c;它会给你模拟一个在线的环境可供你尽情使用&#xff01; 熟练使用Redis的…...

【Linux】kill 命令使用

经常用kill -9 XXX 。一直在kill&#xff0c;除了kill -9 -15 &#xff0c;还能做什么&#xff1f;今天咱们一起学习一下。 kill 命令用于删除执行中的程序或工作。 kill命令 -Linux手册页 命令选项及作用 执行令 man kill 执行命令结果 参数 -l 信号&#xff0c;若果…...

面试-Redis-缓存雪崩

问&#xff1a;什么是缓存雪崩 ? 答&#xff1a;缓存过期是指设置缓存时都采用了同一过期时间&#xff0c;导致缓存在莫一时刻同时失效&#xff0c;从而请求全部全部打到数据库中&#xff0c;导致数据库压力过大而挂机。 它与缓存击穿的区别是&#xff1a;缓存击穿是一个key…...

AI全栈大模型工程师(九)Function Calling 的机制

文章目录 Function Calling 的机制Function Calling 示例 1:加法计算器Function Calling 实例 2:四则混合运算计算器后记Function Calling 的机制 Function Calling 示例 1:加法计算器 需求:用户输入任意可以用加法解决的问题,都能得到计算结果。 # 加载环境变量import o…...

音乐制作软件 Ableton Live 11 Suite mac中文版功能介绍

Ableton Live 11 Suite mac是一款专业级别的音乐制作软件&#xff0c;它提供了多种音乐制作和编辑功能&#xff0c;可以帮助用户创建各种音乐作品。界面简单直观&#xff0c;可以方便地进行各种音乐制作操作。它提供了丰富的音乐制作工具和功能&#xff0c;如录音、采样、编曲、…...

v-model和.sync区别

在vue2中提供了.sync修饰符&#xff0c;但是在vue3中不再支持.sync&#xff0c;取而代之的是v-model。 1.在vue2中v-model和.sync区别&#xff1a; 1.相同点&#xff1a;都是语法糖&#xff0c;都可以实现父子组件中的数据的双向通信。 ​ 区别在于往回传值的时候. sync 的 $…...

django cloudflare csrf 403

网站套了cloudflare flare发现登录接口403了&#xff0c;csrf验证失败&#xff0c; debug设置为False 详细报错如下&#xff1a; Reason given for failure: Referer checking failed - https://xxx/login does not match any trusted origins.In general, this can occur w…...

Hive 中级练习题(40题 待更新)

前言 最近快一周没更了&#xff0c;主要原因是最近在忙另一件事情&#xff08;关于JavaFX桌面软件开发&#xff09;&#xff0c;眼看大三上一半时间就要过去了&#xff0c;抓紧先学Hive&#xff0c;完了把 Spark 剩下的补了&#xff0c;还有 Kafka、Flume&#xff0c;任务还是…...

核酸检测人员安排

题目描述: 在系统、网络均正常的情况下组织核酸采样员和志愿者对人群进行核酸检测筛查。每名采样员的效率不同,采样效率为N人/小时。由于外界变化,采样员的效率会以M人/小时为粒度发生变化,M为采样效率浮动粒度,M=N10%,输入保证N10%的结果为整数。采样员效率浮动规则:采…...

Vue组件间传值

一、父传子 子组件中定义一个props&#xff0c;用来取出父组件传来的值 <script>export default {props:[msg] //子组件定义props} </script> 在父组件中对子组件的自定义属性绑定父组件的变量 <template><div class"parent">//子组件&a…...

《低代码指南》——维格云和Airtable的比较

Airtable​ 什么是Airtable​ Airtable 是一个任务管理应用程序,它合并了电子表格、数据存储和模板,以帮助组织构建他们的工作流程。 适用于哪些企业/组织/人群​ 根据 Airtable 网站,该工具被超过 200,000 个组织的团队使用。 维格表与Airtable相比如何​ Airtable作为…...

牛客:NC59 矩阵的最小路径和

牛客&#xff1a;NC59 矩阵的最小路径和 文章目录 牛客&#xff1a;NC59 矩阵的最小路径和题目描述题解思路题解代码 题目描述 题解思路 动态规划&#xff0c;递推公式&#xff1a;matrix[i][j] min(matrix[i-1][j], matrix[i][j-1]) 题解代码 func minPathSum( matrix [][…...

20231017定时任务

1. 构建定时任务 表达式生成 在线Cron表达式生成器 1.1 启动类 1.2 测试范例 描述: 1,将该类用Component描述,交给spring管理. 2,定时任务方法用Scheduled&#xff0b;cron表达式描述 2. 定时任务的弊端和优化方案 1.假如有一个定时任务,每小时检查关闭超时未支付订单,当10…...

通讯录和内存动态管理

目录 (通讯录)动态增长版 实现效果 找单身狗 题目 源码 思路 三个内存函数的模拟实现 模拟实现strncpy 模拟实现strncat 模拟实现atoi (通讯录)动态增长版 该版本通讯录在原版的基础上增加了检查容量函数&#xff0c;实现了通讯录的动态…...

安全渗透测试之网络基础知识(IP地址)

#1.IP地址介绍 注意:不同局域网需要有不同的网络部分,通过网络部分区别出网段/网络; 局域网内部,主机部分不能一样,否则会出现地址冲突 范围:0.0.0.0-255.255.255.255 表示:点分十进制 组成:由网络部分和主机部分组成 192.168.1.1 1.1.1.1 255.254.188.2 二进制:00000…...

dubbogo-1 基础rpc服务

文章目录 基本环境处理编译pb接口开启rpc调用业务观察qa1 能取出protoc里面的字段值吗&#xff1f; 基本环境处理 https://cn.dubbo.apache.org/zh-cn/overview/quickstart/go/install/ 这里没有 protoc-gen-go --version 执行 go get -u github.com/golang/protobuf/protoc…...

分布式缓存Spring Cache

一、缓存里的数据如何和数据库的数据保持一致&#xff1f; 缓存数据一致性1)、双写模式2)、失效模式1、缓存数据一致性-双写模式 2、 缓存数据一致性-失效模式 我们系统的一致性解决方案: 1、缓存的所有数据都有过期时间&#xff0c;数据过期下一次查询触发主动更新 2、读写数据…...

CI2454 2.4g无线MCU芯片应用

Ci2454集成MCU芯片 | Ci2454是一款集成无线收发器和 8 位 RISC&#xff08;精简指令集&#xff09;MCU 的SOC芯片。 #Ci2454芯片 集成MCU芯片# 中国芯片# 无线收发器特性&#xff1a; 工作在 2.4GHz ISM 频段 调制方式&#xff1a;GFSK/FSK 数据速率&#xff1a;2Mbps/1Mbps…...

生成包含10个随机字母或数字的字符串,然后统计每个字符的出现次数

from random import choices from string import ascii_letters, digitsx .join(choices(ascii_lettersdigits, k10)) d dict() # 创建空字典 for ch in x:d[ch] d.get(ch, 0) 1 # x中有ch字符,个数1,并作为字典的值 print(x) print(d)也可以使用collections模块的defaul…...

测试markdown--肇兴

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

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

绕过 Xcode?使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...