vue3 vite ts day1

创建项目:

npm init vite@latest 来创建项目

第二布:   y

第三步:project name :项目名称

第四步:select a framework  选择框架   熟悉那种选择那种,当前选择vue

第五步:select a variant: typeScript 

项目创建完成

初始化

 npm install 初始化项目

npm run dev 运行项目

关于 vue3 

script 写法变化

vue2 data 里数据是通过

return 出去的

vue 3 写法 每次定义变量和方法都需要手动return 出去

vue3  setup 语法糖模式 大大方便书写模式

写法与 传统  js  有些相识 

插值表达式和一些指令和vue2使用差别不大

代码展示


<script setup lang="ts">
import { ref,reactive} from 'vue'defineProps<{ msg: string }>()//命名   ts 类型    用ref或reactive 包括才是响应式数据
const count: number = ref(0)const arr: number[] = reactive([1, 2, 3, 4, 5, 6])const div: string =  ref('<div>这是一个div</div>')const even:string= ref('click')//方法  第一种写法
function addcount() { count.value++
}//另一种写法 效果是一样的
const addcountB = () => { count.value++}function clicks() {console.log('这是一个点击事件')
}</script><template><!-- 插值表达式 -->
<div>{{ count }}<button @click.stop="addcount">点击加加++,判断变true</button>
</div>
<div>{{ count + 1  }}
</div>
<div>{{ count ? 'true' :'false'  }}
</div>
<div>{{ arr.map(v=>({ num: v})) }}
</div>
<div v-html="div"></div>
<div v-if="true">v-if使用和vue2一样,v-show 同理</div><!-- 可以动态切换的事件,事件可以通过修饰符阻止一些事件,使用方式和vue2相识 -->
<div @[even].stop="clicks" >这是一个点击事件
</div><!-- 动态css可以通过表达式来切换 --> 
<div :class="[true?'classA':'classC','classB']">
</div><!-- v-for 使用场景和vue2完全相同 -->
<div v-for="(item,index) in arr" :key="index">
</div><!-- v-once 只会渲染一次,且不会变化 -->
<div v-once>不会变化的值
</div><!-- 搭配v-for使用,数组里面的条件满足才更新,不满足,里面的数据不会更新,跳过更新 -->
<div  v-for="(item,index) in arr" :key="index" v-memo="[item==2]"></div></template><style scoped>
.read-the-docs {color: #888;
}
</style>

效果展示

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

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

相关文章

elasticsearch-7.14.0集群部署+kibana

1、修改系统参数 用户对软件的内存和硬盘使用权限 vim /etc/security/limits.conf * soft nproc 655350 * soft nofile 655350 * hard nproc 655350 * hard nofile 655350修改最大线程数 vim /etc/sysctl.conf vm.max_map_count262144配置用户最大的线程数 vim /etc/security/…

深度学习 | pytorch + torchvision + python 版本对应及环境安装

Hi&#xff0c;大家好&#xff0c;我是半亩花海。要让一个基于 torch 框架开发的深度学习模型正确运行起来&#xff0c;配置环境是个重要的问题&#xff0c;本文介绍了 pytorch、torchvision、torchaudio 及 python 的对应版本以及环境安装的相关流程。 目录 一、版本对应 二…

如何学习游戏外挂编程

学习游戏外挂编程需要掌握一定的编程基础和相关知识。以下是一些学习游戏外挂编程的步骤和建议&#xff1a; 学习编程基础&#xff1a;首先&#xff0c;你需要学习一种编程语言&#xff0c;比如C或者Python。了解基本的编程概念&#xff0c;如变量、函数、循环和条件语句等。这…

LearnOpenGL学习(高级OpenGL -- 深度测试,模板测试,)

深度测试 深度缓冲用来防止被阻挡的面渲染到其他面的前面&#xff0c;深度缓冲就像颜色缓冲&#xff0c;在每个片段中储存了信息&#xff0c; 当深度测试(Depth Testing)被启用的时候&#xff0c;OpenGL会将一个片段的深度值与深度缓冲的内容进行对比。OpenGL会执行一个深度测…

MYSQL REPLACE INTO, INSERT IGNORE ON DUPLICATE 区别:

REPLACE INTO 不存在插入&#xff0c;存在删除旧的数据&#xff0c;插入一条新数据&#xff0c;返回新插入的自动编号&#xff1a; replace into&#xff1a;和 ignore 以及 duplicate 截然不同&#xff0c;不存在插入&#xff0c;存在则删除旧的&#xff0c;插入新的。不会保…

4. 设计模式分类

4.1 创建型模式 这类模式提供创建对象的机制,能够提升已有代码的灵活性和可复用性。 序 号 类 型 业务场景 实现要点 1 工 厂 方 法 多种类型商品不同接口,统一发奖服 务搭建场景 定义一个创建对象的接口,让其子类自 己决定实例化哪一个工厂类,工厂模式 使其创建过程延迟…

【JS】一些奇怪的野生方法(持续更新...)

文章目录 一、样式类二、API类三、一些属性四、一些奇怪但常用的功能 一、样式类 屏幕的可用高度&#xff1a;window.screen.availHeight 二、API类 获取绝对值&#xff1a;Math.abs(aaa)stopPropagation()&#xff1a;阻止事件在DOM树中继续冒泡&#xff08;就是停止事件&a…

Java 反射:强大而灵活的魔法工具

一、什么是 Java 反射 Java 反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c;都能够调用它的任意一个方法和属性。反射的本质是得到 Class 对象后&#xff0c;反向获取 Class 对象的各…

3大模块助力学生会视频自动评审系统升级

一、项目背景 传统的学生会视频作品或电子申请材料评审由老师线下逐一面审完成。面对大量学生提交的作品&#xff0c;评审效率低、耗时长&#xff0c;且主观性较强。为此&#xff0c;客户希望开发一个基于AI的线上自动面审系统&#xff0c;从语法正确性、演讲流利度和发音准确…

8. 一分钟读懂“代理模式”

8.1 模式介绍 代理模式是一种结构型设计模式&#xff0c;它通过提供一个代理对象来替代对另一个对象&#xff08;真实对象&#xff09;的访问。代理对象与真实对象实现相同的接口&#xff0c;并通过代理类对真实对象的访问进行控制&#xff0c;可以在调用前后执行附加操作&…

计算机网络学习资料全攻略

计算机网络是计算机科学中一个非常重要的分支&#xff0c;它涉及到数据在计算机系统之间的传输和通信。随着互联网的快速发展&#xff0c;对计算机网络知识的掌握变得越来越重要。本文将为您提供一份全面的计算机网络学习资料指南&#xff0c;帮助您从基础到高级逐步深入学习。…

<component> 标签 动态响应无法实现

【无法解决的问题&#xff0c;尤其是前端&#xff0c;多看官方文档&#xff0c;先查博文再看文档】 如果在 <component> 标签上使用 v-model&#xff0c;模板编译器会将其扩展为 modelValue prop 和 update:modelValue 事件监听器&#xff0c;就像对任何其他组件一样。但…

Python的秘密基地--[章节2]Python核心数据结构

第2章&#xff1a;Python核心数据结构 Python中的数据结构提供了强大的工具来存储和操作数据。理解这些数据结构是Python编程的基础。 2.1 列表&#xff08;List&#xff09; 2.1.1 什么是列表 列表是一种有序的可变序列&#xff0c;用于存储一组数据。它支持多种类型的数据…

4.Vue-------this.$set()的使用和详细过程-------vue知识积累

在Vue.js中&#xff0c;this.$set()是Vue实例this.someProperty someValue来为Vue实例的属性赋值时&#xff0c;Vue会自动将该属性设置为响应式的&#xff0c;这样当属性的值变化时&#xff0c;相关的视图会自动更新 一. 对象的修改 对象&#xff1a;修改和新增 先定义数据对…

怎么自己创建一个网站? 开发语言首选 java,使用CMS网站内容管理系统是不错的选择

怎么自己创建一个网站 推荐使用 Java CMS 网站内容管理系统&#xff0c;根据网站规划的功能模块&#xff0c;创建不同的页面风格&#xff1b; 文章目录 怎么自己创建一个网站一、规划网站1.1确定网站主题和目的1.2规划网站结构和内容 二、注册域名2.1选择域名注册商2.2 查找并…

tcpreplay/tcpdump-重放网络流量/捕获、过滤和分析数据包

tcpdump 是一个网络数据包分析工具&#xff0c;通过捕获并显示网络接口上传输的数据包&#xff0c;帮助用户分析网络流量。 原理&#xff1a;用户态通过 libpcap 库控制数据包捕获&#xff0c;内核态通过网卡驱动获取数据包。 核心功能包括&#xff1a;捕获、过滤和分析数据包…

[HCTF 2018]WarmUp-滑稽

启动场景打开链接&#xff0c;出现一下图片 F12查看代码出现一个注释&#xff0c;应该在这个文件中&#xff0c; 进入到该页面&#xff0c;出现一段代码 <?phphighlight_file(__FILE__);class emmm{public static function checkFile(&$page){$whitelist ["sourc…

Web3的技术栈详解:解读区块链、智能合约与分布式存储

随着数字时代的不断发展&#xff0c;Web3作为下一代互联网的核心理念逐渐走进了大众视野。它承载着去中心化、用户主权以及更高效、更安全的网络环境的期望。Web3不再是由少数中心化机构主导的网络&#xff0c;而是通过一系列核心技术的支撑&#xff0c;给每个用户赋予了更多的…

碳金融衍生品:推动绿色金融与减排目标的创新工具

推动绿色金融与减排目标的创新工具 随着全球气候变化问题日益严峻&#xff0c;碳排放交易市场逐渐成为减少温室气体排放的重要手段。为了应对气候变化&#xff0c;越来越多的国家和地区推出了碳交易制度&#xff0c;并推动了碳金融衍生品的诞生。这些衍生品作为碳市场的重要组成…

【优选算法篇】寻找隐藏的宝藏:用二分查找打开算法世界的大门(上篇)

文章目录 须知 &#x1f4ac; 欢迎讨论&#xff1a;如果你在学习过程中有任何问题或想法&#xff0c;欢迎在评论区留言&#xff0c;我们一起交流学习。你的支持是我继续创作的动力&#xff01; &#x1f44d; 点赞、收藏与分享&#xff1a;觉得这篇文章对你有帮助吗&#xff1…