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

自学VUE笔记

一、基础语法学习

  • 1、Attribute 绑定

a、绑定单个属性:给这个div 增加id 属性

​
<div v-bind:id="dynamicId"></div>

简写: 

<div :id="dynamicId"></div>

b、绑定多个属性值

data() {return {objectOfAttrs: {id: 'container',class: 'wrapper'}}
}

通过不带参数的 v-bind,你可以将它们绑定到单个元素上,同时绑定2个元素:

<div v-bind="objectOfAttrs"></div>
  • 使用 JavaScript 表达式 
{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div :id="`list-${id}`"></div>
  •  2、动态参数

        a、动态传参

  • <!--
    注意,参数表达式有一些约束,
    参见下面“动态参数表达式约束”一节的解释
    -->
    <a v-bind:[attributeName]="url"> ... </a><!-- 简写 -->
    <a :[attributeName]="url"> ... </a><a v-on:[eventName]="doSomething"> ... </a><!-- 简写 -->
    <a @[eventName]="doSomething">动态参数期望结果为一个字符串,或者是 null。特殊值 null 意为显式移除该绑定。任何其他非字符串的值都将触发一个警告。

    b、动态参数语法的限制

  • 
    动态参数表达式因为某些字符的缘故有一些语法限制,比如空格和引号,在 HTML attribute 名称中都是不合法的。例如下面的示例:
    <!-- 这会触发一个编译器警告 -->
    <a :['foo' + bar]="value"> ... </a>

    编写组件:

  • 组件三部分:1、template、2、js 、3、style

  • 组件引用

向组件产传值:

用props来定义参数的类型及默认值,prop有一下几种类型

组件返回值:

组件生命周期

按照第三方组件

Axios封装:

请求提取:

路由:

路由跳转:

路由配置:

路由传参:

路由参数调用:

相关文章:

自学VUE笔记

一、基础语法学习 1、Attribute 绑定 a、绑定单个属性&#xff1a;给这个div 增加id 属性 ​ <div v-bind:id"dynamicId"></div>简写&#xff1a; <div :id"dynamicId"></div> b、绑定多个属性值 data() {return {objectOf…...

系列四十二、Spring的事务传播行为案例演示(二)#REQUIRED

一、演示Spring的默认传播行为&#xff08;REQUIRED&#xff09; 1.1、运行之前表中的数据 1.2、StockServiceImpl /*** Author : 一叶浮萍归大海* Date: 2023/10/30 15:43* Description:*/ Service(value "stockServiceREQUIRED") public class StockServiceImpl…...

oracle rac-归档满处理

有客户反馈数据库无法使用了&#xff0c;客户手动启动报错如下 SQL> startup; ORACLE instance started. Total System Global Area 2.6924E10 bytes Fixed Size 2265984 bytes Variable Size 1.3959E10 bytes Database Buffers 1.2952E10 bytes R…...

Python Django 之全局配置 settings 详解

文章目录 1 概述1.1 Django 目录结构 2 常用配置&#xff1a;settings.py2.1 注册 APP&#xff1a;INSTALLED_APPS2.2 模板路径&#xff1a;TEMPLATES2.3 静态文件&#xff1a;STATICFILES_DIRS2.4 数据库&#xff1a;DATABASES2.5 允许访问的主机&#xff1a;ALLOWED_HOSTS 1 …...

挑选MES系统供应商,需要考虑哪些重要因素?

挑选MES系统供应商时&#xff0c;需要考虑下述几个重要因素&#xff1a; 1.功能与特性&#xff1a;MES系统的功能和特性尤为重要。切实保障挑选的服务商可以满足企业的实际需求&#xff0c;包含生产计划管理、物料追踪、质量管理、机器设备等多个方面的功能。 2.系统可扩展性&a…...

Ai创作系统ChatGPT网站源码+图文搭建教程+支持GPT4.0+支持ai绘画(Midjourney)

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统AI绘画系统&#xff0c;支持OpenAI GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署…...

基于计算机视觉的坑洼道路检测和识别-MathorCup A(深度学习版本)

1 2023 年 MathorCup 高校数学建模挑战赛——大数据竞赛 赛道 A&#xff1a;基于计算机视觉的坑洼道路检测和识别 使用深度学习模型&#xff0c;pytorch版本进行图像训练和预测&#xff0c;使用ResNet50模型 2 文件夹预处理 因为给定的是所有图片都在一个文件夹里面&#xf…...

【考研数学】概率论与数理统计 —— 第七章 | 参数估计(1,基本概念及点估计法)

文章目录 引言一、参数估计的概念二、参数的点估计2.1 矩估计法2.2 最大似然估计法 写在最后 引言 我们之前学了那么多分布&#xff0c;如正态分布 N ( μ , σ 2 ) N(\mu,\sigma^2) N(μ,σ2)&#xff0c;泊松分布 P ( λ ) P(\lambda) P(λ) 等等&#xff0c;都是在已知 …...

获取文本长度

使用TextView的getLineCount方法&#xff0c;它可以返回TextView当前显示的行数。但是&#xff0c;这个方法只有在TextView绘制完成后才能返回正确的值&#xff0c;否则可能返回0。因此&#xff0c;需要在TextView的post方法中调用&#xff0c;或者在onWindowFocusChanged方法中…...

python html(文件/url/html字符串)转pdf

安装库 pip install pdfkit第二步 下载程序wkhtmltopdf https://wkhtmltopdf.org/downloads.html 下载7z压缩包 解压即可, 无需安装 解压后结构应该是这样, 我喜欢放在项目里, 相对路径引用(也可以使用绝对路径, 放其他地方) import pdfkit# 将 wkhtmltopdf.exe程序 路径 p…...

Spring概述

Spring概述 Spring 是最受欢迎的企业级 Java 应用程序开发框架&#xff0c;数以百万的来自世界各地的开发人员使用 Spring 框架来创建性能好、易于测试、可重用的代码。 Spring 框架是一个开源的 Java 平台&#xff0c;它最初是由 Rod Johnson 编写的&#xff0c;并且于 2003 …...

Linux网卡

网卡 网卡&#xff08;Network Interface Card&#xff0c;NIC&#xff09;是一种计算机硬件设备&#xff0c;也称为网络适配器或网络接口控制器。一个网卡就是一个接口 网卡组成和工作原理参考https://blog.csdn.net/tao546377318/article/details/51602298 每个网卡都拥有唯…...

【Python机器学习】零基础掌握ElasticNet变量选择回归器

如何优雅地解决房价预测问题? 房价预测一直是一个热门而复杂的话题。假设一个地产商希望准确地预测不同城市区域的房价,以便更有效地进行房地产投资。问题在于,房价是由多种因素共同决定的,例如地段、房屋面积、交通便利程度等。 为了解决这个问题,一个可行的思路是使用…...

【数据结构】模拟实现Vecotr

namespace my_vector {template <class T>class vector{public:typedef T* iterator;typedef const T* const_iterator;//常量指针&#xff0c;指针指向的值不可以变&#xff1b;//构造函数vector():start(nullptr),finish(nullptr),end_of_storage(nullptr){}//析构函数…...

Qt开发: 利用Qt的charts模块绘制曲线、饼图、柱状图、折线图等各种图表

一、前言 Qt Charts模块是Qt提供的一个用于创建各种类型图表的功能模块。为开发人员提供了一种简单而强大的方式来可视化数据。Qt Charts模块基于Qt GUI框架构建,可以与其他Qt模块无缝集成,例如Qt Widgets、Qt Quick和Qt OpenGL。 Qt Charts模块包含了几个核心类: (1)Q…...

Redis:加速你的应用响应时间,提升用户体验

绝大部分写业务的程序员&#xff0c;在实际开发中使用 Redis 的时候&#xff0c;只会 Set Value 和 Get Value 两个操作&#xff0c;对 Redis 整体缺乏一个认知。这里对 Redis 常见问题做一个总结&#xff0c;解决大家的知识盲点。 1、为什么使用 Redis 在项目中使用 Redis&am…...

乐鑫 SoC 内存映射入门

微控制器 (MCU) 的性能和内存能力逐步提升&#xff0c;其复杂度也随之加大。特别是当用户需要配置内存管理单元来映射外部存储器芯片 (Flash/SPIRAM) 时&#xff0c;这种现象尤其明显。 开始在乐鑫 SoC 上运行 Zephyr RTOS 时&#xff0c;会发现这些 SoC 与 ARM 架构的 MCU 相…...

蓝凌EIS智慧协同平台saveImg接口存在任意文件上传漏洞

蓝凌EIS智慧协同平台saveImg接口存在任意文件上传漏洞 一、蓝凌EIS简介二、漏洞描述三、影响版本四、fofa查询语句五、漏洞复现六、深度复现1、发送如花2、哥斯拉直连 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者…...

【SEC 学习】美化 Linux 终端

一、步骤 1. 进入 /etc/bash.bashrc vim /etc/bash.bashrc2. 重新加载 bash.bashrc source /etc/bash.bashrc二、各参数指标 符号含义\u当前用户的账号名称\h仅取主机的第一个名字&#xff0c;如上例&#xff0c;则为fc4&#xff0c;.linux则被省略\H完整的主机名称。例如&…...

【Unity小技巧】可靠的相机抖动及如何同时处理多个震动(附项目源码)

文章目录 每篇一句前言安装虚拟相机虚拟相机震动测试代码控制震动清除震动控制震动的幅度和时间 两个不同的强弱震动同时发生源码完结 每篇一句 围在城里的人想逃出来&#xff0c;站在城外的人想冲进去&#xff0c;婚姻也罢&#xff0c;事业也罢&#xff0c;人生的欲望大都如此…...

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

测试微信模版消息推送

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

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

论文笔记——相干体技术在裂缝预测中的应用研究

目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术&#xff1a;基于互相关的相干体技术&#xff08;Correlation&#xff09;第二代相干体技术&#xff1a;基于相似的相干体技术&#xff08;Semblance&#xff09;基于多道相似的相干体…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

mac:大模型系列测试

0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何&#xff0c;是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试&#xff0c;是可以跑通文章里面的代码。训练速度也是很快的。 注意…...

React从基础入门到高级实战:React 实战项目 - 项目五:微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...