vue3 基础知识

vue3创建一个项目

PS D:\code> npm init vue@latestVue.js - The Progressive JavaScript Framework√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
Scaffolding project in D:\code\vue-demo1...Done. Now run:cd vue-demo1npm installnpm run dev
PS D:\code> cd .\vue-demo1\PS D:\code\vue-demo1> npm installadded 25 packages, and audited 26 packages in 33s3 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities
PS D:\code\vue-demo1> npm run dev> vue-demo1@0.0.0 dev
> viteVITE v4.4.9  ready in 453 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h to show help

1.模板语法

数据绑定最常见的形式就是使用“双大括号” 语法在HTML中插入文本:

<p>Message: {{ msg }}</p>

{{msg}}将被替代对应组件实例中msg属性的值。无论何时,绑定的组件实例上msg属性发
生改变,插值处内容都会更新

<template>
<h1>{{ msg }}</h1>
</template><script>
export default{data(){    //data函数return {   //return 方法msg:"1234567"}}
}
</script>

在这里插入图片描述

2.Vue 常用指令

• 指令介绍
• v-text
• v-html
• v-bind
• v-on
• 指令缩写
指令:带有 v- 前缀的特殊属性。
指令的作用:当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM

v-text作用与双大花括号作用一样,将数据填充到标签中。但没有闪烁问题!
在这里插入图片描述
某些情况下,从服务端请求的数据本身就是一个HTML代码,如果用双大括号会将数据解
释为普通文本,而非HTML代码,为了输出真正的HTML,需要使用v-html指令。
在这里插入图片描述
在前端开发中,我们经常监听用户发生的事件,例如点击、拖拽、键盘事件等。
在Vue中如何监听事件呢?使用v-on指令,v-on: 冒号后面是event参数,例如click、change
示例:监听按钮的点击事件
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/46408.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

WordPress用于您的企业网站的优点和缺点

如今&#xff0c;WordPress 被广泛认为是一个可靠、可扩展且安全的平台&#xff0c;能够为商业网站提供支持。然而&#xff0c;许多人质疑 WordPress 是否是适合企业的平台。 这就是我们创建本指南的原因。通过探索 WordPress 的优点和缺点&#xff0c;您可以确定世界上最受欢…

linux部署kafka3.5.1(单机)

一、下载jdk17 kafka3.x版本需要jdk11以上版本才能更好的兼容&#xff0c;jdk11、jdk17都是LTS长期维护版本&#xff0c;而且jdk17支持springboot3.x,所以我选择了openjdk17。 下载地址: Archived OpenJDK GA Releaseshttps://jdk.java.net/archive/ 二、上传jdk安装包解压 …

PHP加密与安全的最佳实践

PHP加密与安全的最佳实践 概述 在当今信息时代&#xff0c;数据安全是非常重要的。对于开发人员而言&#xff0c;掌握加密和安全的最佳实践是必不可少的。PHP作为一种常用的后端开发语言&#xff0c;提供了许多功能强大且易于使用的加密和安全性相关函数和类。本文将介绍一些P…

【目标检测中对IoU的改进】GIoU,DIoU,CIoU的详细介绍

文章目录 1、IoU2、GIoU(Generalized Intersection over Union)3、DIoU4、CIoU 1、IoU IoU为交并比&#xff0c;即对于pred和Ground Truth&#xff1a;交集/并集 1、IoU可以作为评价指标使用&#xff0c;也可以用于构建IoU loss 1 - IoU 缺点&#xff1a; 2、对于pred和GT相…

Android Studio导入项目需要做的一些配置

点击项目结构 选择本地安装的SDK、NDK目录 选择java版本 重新加载项目 Clean Project Rebuild Project 选择要构建的版本 可选debug和release 打包apk安装包 打包完成&#xff0c;就可以安装到安卓手机了

【2023最新爬虫】用python爬取知乎任意问题下的全部回答

老规矩&#xff0c;先上结果&#xff1a; 爬取了前200多页&#xff0c;每页5条数据&#xff0c;共1000多条回答。&#xff08;程序设置的自动判断结束页&#xff0c;我是手动break的&#xff09; 共爬到13个字段&#xff0c;包含&#xff1a; 问题id,页码,答主昵称,答主性别,…

Java虚拟机(JVM):堆溢出

一、概念 Java堆溢出&#xff08;Java Heap Overflow&#xff09;是指在Java程序中&#xff0c;当创建对象时&#xff0c;无法分配足够的内存空间来存储对象&#xff0c;导致堆内存溢出的情况。 Java堆是Java虚拟机中用于存储对象的一块内存区域。当程序创建对象时&#xff0c…

Maven之JDK编译问题

IDEA Maven 默认使用 JDK 1.5 编译问题 IDEA 在「调用」maven 时&#xff0c;IDEA 默认都会采用 JDK 1.5 编译&#xff0c;不管你安装的 JDK 版本是 JDK 7 还是 JDK 8 或者更高。这样一来非常不方便&#xff0c;尤其是时不时使用 JDK 7/8 的新特性时。如果使用新特性&#xff…

智能监控系统的守护者:人工智能行为识别技术的崛起与发展

人工智能助力监控系统&#xff1a;行为识别在安全监控中的应用与挑战 摘要&#xff1a; 随着人工智能技术的快速发展&#xff0c;行为识别在监控系统中的应用逐渐成为安全监控领域的重要工具。本文将详细探讨人工智能行为识别技术在监控系统中的应用&#xff0c;以及在实际应用…

乖宝宠物上市,能否打破外资承包中国宠物口粮的现实

近日&#xff0c;乖宝宠物上市了&#xff0c;这是中国宠物行业成功挂牌的第三家公司。同时&#xff0c;昨日&#xff0c;宠物行业最大的盛事“亚洲宠物展”时隔3年&#xff0c;于昨日在上海成功回归。 这两件事情的叠加可谓是双喜临门&#xff0c;行业能够走到今天实属不易&…

报道 | 9月国际运筹优化会议汇总

封面图来源&#xff1a; https://www.pexels.com/zh-cn/photo/1181406/ 九月召开会议汇总&#xff1a; The 96th meeting of the EURO Working Group on Multiple Criteria Decision Aiding (EWG-MCDA) Location: Paris, France Important dates: Conference: September 202…

STP生成树协议

一、STP是什么 STP协议概述生成树协议(spanning tree protocol)&#xff0c;是一种工作在OSI网络模型中第二层(数据链路层)的通信协议&#xff0c;是一种由交换机运行的&#xff0c;基本应用是防止交换机冗余链路产生的环路&#xff0c;用于确保以太网中无环路的逻辑拓扑结构&…

计算机网络-物理层(三)-信道的极限容量

计算机网络-物理层(三)-信道的极限容量 当信号在信道中传输失真不严重时&#xff0c;在信道的输出端&#xff0c;这些信号可以被识别 当信号在信道中&#xff0c;传输失真严重时&#xff0c;在信道的输出端就难以识别 造成失真的因素 码元传输速率信号传输距离噪声干扰传输媒…

CSS中的transform属性有哪些值?并分别描述它们的作用。

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ translate()⭐ rotate()⭐ scale()⭐ skew()⭐ matrix()⭐ scaleX() 和 scaleY()⭐ rotateX()、rotateY() 和 rotateZ()⭐ translateX() 和 translateY()⭐ skewX() 和 skewY()⭐ perspective()⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&…

Python 处理 Excel 表格的 14 个常用操作

目录 1. 安装依赖库 2. 导入库 3. 读取Excel文件 4. 写入Excel文件 5. 创建工作表 6. 访问工作表 7. 读取单元格数据 8. 写入单元格数据 9. 获取行数和列数 10. 过滤数据 11. 排序数据 12. 添加新行 13. 删除行或列 14. 计算汇总统计 总结 无论是数据分析师、财…

MySQL— 基础语法大全及操作演示!!!(下)

MySQL—— 基础语法大全及操作演示&#xff08;下&#xff09;—— 持续更新 三、函数3.1 字符串函数3.2 数值函数3.3 日期函数3.4 流程函数 四、约束4.1 概述4.2 约束演示4.3 外键约束4.3.1 介绍4.3.2 语法4.3.3 删除/更新行为 五、多表查询5.1 多表关系5.1.1 一对多5.1.2 多对…

Matplotlib数据可视化(一)

目录 1.Matplotlib简介 2.Matplotlib绘图基础 2.1 创建画布与子图 2.2 添加画布属性 2.3 绘图的保存与显示 1.Matplotlib简介 Matplotlib是一个用于绘制数据可视化图表的Python库。它提供了广泛的功能和灵活性&#xff0c;可以创建各种类型的图表&#xff0c;包括折线图、…

min-height到底是什么?

1、概念 给元素设置最小高度&#xff0c;当height小于 min-height &#xff0c;min-height会覆盖height的值 2、案例 如果我有一个盒子A&#xff0c;A设置了min-height的高度为200px&#xff1b;并设置了overflow&#xff1a;auto&#xff0c;那么如果里面的内容超过了200px…

深入理解python虚拟机:程序执行的载体——栈帧

栈帧&#xff08;Stack Frame&#xff09;是 Python 虚拟机中程序执行的载体之一&#xff0c;也是 Python 中的一种执行上下文。每当 Python 执行一个函数或方法时&#xff0c;都会创建一个栈帧来表示当前的函数调用&#xff0c;并将其压入一个称为调用栈&#xff08;Call Stac…

MySQL 主从复制遇到 1590 报错

作者通过一个主从复制过程中 1590 的错误&#xff0c;说明了 MySQL 8.0 在创建用户授权过程中的注意事项。 作者&#xff1a;王祥 爱可生 DBA 团队成员&#xff0c;主要负责 MySQL 故障处理和性能优化。对技术执着&#xff0c;为客户负责。 本文来源&#xff1a;原创投稿 爱可生…