Vue3知识总结-1

前面学习一段时间的前端,但是没有进行过太多的练习,并且对于里面一些重要的知识点也没有去着重的记忆,所以打算在学习Vue3的时候,做一些笔记,方便后面翻看。这个笔记会对于学习一些做一些,而不是一个整体的部分,整个学习过程也都是跟着视频来做的。

为什么选择Vue

Vue是什么

渐进式的JS框架,易用易学,性能出色,使用场景丰富

为什么学习

  1. 最火的

  2. 企业中要求

  3. 可以提升开发体验

  4. ……

Vue简介

提供了一套声明式,组件化的编程模型

渐进式框架

Vue是一个框架也是生态,覆盖了很多前端开发请求。Vue设计非常注重灵活性和“可以被逐步集成”这个特点。可以用不同的方式使用Vue:

  • 无需构建,渐进式增强静态的HTML

  • 任何页面作为Web Components嵌入

  • 单页应用SPA

  • 全栈/服务端渲染(SSR)

  • 开发桌面端等

Vue版本

目前,开发中有2和3,老项目一般是Vue2,新项目是Vue3

Vue API风格

有两种书写风格:选项API和组合式API

选项式API

 
<script>
export default {data(){return {count: 0}},methods:{increment() {this.count += 1;}},mounted() {console.log(`选项式AIP: The initial count is &{this.count}.`)}
}
</script>
<template><button @click="increment">选项式AIP: Count is : {{count}}</button>/
</template>

组合式API

 
<script setup >
import {ref, onMounted} from 'vue'
const count = ref(0)
function increment(){count.value++
}
onMounted(() =>{console.log(`组合式AIP: The initial count is &{this.count}.`)
})
</script><template><button @click="increment">组合式API:Count is : {{count}}</button>/
</template>

Vue开发前准备

首先需要安装Node.js,然后配置一下就好了。

下面的是运行整个项目

 npm init vue@latest  创建项目npm install / cnpm install 安装依赖目录文件夹npm run dev   运行整个项目

Vue项目目录结构

模版语法

文本差值

最基本的数据绑定形式是文本差值,使用的是“Mustache”语法(及大括号)

 
<template><h3> 模版语法</h3><p>{{msg}}</p>
</template><script>
export default {data(){return{msg:"神奇的语法"}}
}
</script>

使用js表达式

每个绑定仅仅支持单一表达式,也就是一段能够被求值的代码,

 
<template><h3> 模版语法</h3><p>{{msg}}</p><p>{{number + 1}}</p><p>{{ok}}</p><p>{{ok ? 'yes': 'no'}}</p><p>{{msg.split("").reverse().join()}}</p><!--  <p>{{var a = 1}}/p>--><!--  <p>{{if (number > 10) {return 0}}}</p>/-->
</template><script>
export default {data(){return{msg:"神奇的语法",number: 122,ok:true,}}
}
</script>

原始HTML

双大括号将会将数据差值为纯文本,而不是HTML,如果想插入HTML,需要使用v-html指令

 
<template><p v-html="rawHtml"></p>
</template><script>
export default {data(){return{rawHtml:"<a href='www.baidu.com'>百度</a>"}}
}
</script>

属性绑定

 

<template><div v-bind:id="msg" v-bind:class="dynamicClass" >测试</div>
</template><script>
export default {data(){return{msg:"active",dynamicClass: "appclass",}}
}</script>
<style>
.appclass{color:red;font-weight: bold;font_size: 30px;
}
</style>

v-bind指令标识Vue将元素id attribute与dynamicId组件属性保持一致,如果绑定的值是null或者undefind,那么该attribute将会从渲染的元素上移除

简写

<div :id="msg" :class="dynamicClass" >测试</div>

布尔值Attribute

根据true/false来决定attribute是否存在于该元素上,disabled是常见的

动态绑定多个值


<template><button :disabled="isButtonDisabled">Button</button><div v-bind="objectOfAttrs">测试问题呢</div>
</template><script>
export default {data(){return{dynamicClass: "appclass",isButtonDisabled:false,objectOfAttrs:{class: "appclass",dynamilId: "appid",}}}
}</script>
<style>
.appclass{color:red;font-weight: bold;font_size: 30px;
}
</style>

条件渲染

类似于条件语句

V-if 用于条件性的渲染,为真的时候就渲染,假的时候不渲染

V-else 可以设计为多个分块

V-show 按照条件显示一个元素的指令

下面是上面这些指令的一些代码示例:

<template><h3>条件渲染</h3><div v-if="flag"> 你们看见我不</div><div v-else> 你还是看看我吧</div><div v-if="type ==='A'">A</div><div v-else-if="type ==='B'">B</div><div v-else-if="type ==='C'">C</div><div v-else>Not a/b/c</div><div v-show="flag">Not a/b/c</div>
</template>
<script>export default {data(){return {flag:true,type: "D",}}}
</script>

v-if 和v-show

v-ifv-show 是 Vue.js 中常用的两个指令,用于条件性地显示或隐藏元素,但它们有一些不同之处。

  1. v-if:

    1. v-if 是一种条件渲染指令,用于根据表达式的真假条件来决定是否渲染 DOM 元素。

    2. 如果条件为真,元素将被渲染到 DOM 中;如果条件为假,元素将从 DOM 中移除。

    3. 当条件为假时,Vue.js 不会渲染或管理该元素及其子元素,因此对性能有一定的提升。

示例:

<div v-if="isVisible"This will only be rendered if isVisible is true</div>
  1. v-show:

    1. v-show 也用于根据条件显示或隐藏元素,但与 v-if 不同,它只是简单地切换 CSS 的 display 属性,而不是添加或移除元素。

    2. 元素始终被渲染到 DOM 中,只是通过 CSS 控制其显示或隐藏。

    3. 当条件为假时,元素的样式为 display: none;,因此元素仍然存在于 DOM 中,可能会对性能产生一定的影响。

示例:

<div v-show="isVisible"This will be rendered but may not be visible</div>

选择使用 v-if 还是 v-show 取决于你的具体需求:

  • 如果你希望在条件为假时从 DOM 中完全移除元素,可以使用 v-if

  • 如果你希望保留元素的 DOM 结构并且只是简单地控制其显示或隐藏状态,可以使用 v-show

列表渲染

使用v-for指令去渲染一个数组渲染一个列表,需要使用item in items这样的特殊语法

<template><h3>列表渲染</h3><p v-for="item in names">{{ item }}</p>
</template>
<script>export default {data(){return{names:["实验室","大学","小学"]}}}
</script>

复杂数据

大多数情况下,渲染的都是网络请求,json格式

<template><h3>列表渲染</h3><p v-for="item in result"><p>{{item.title}}</p>
<!--   / <img src="item.avator">--></p>
</template>
<script>export default {data() {return {result: [{"id": 123,"title": "中药","avator": "http://^",},{"id": 124,"title": "西药","avator": "http://^",},{"id": 125,"title": "中西药","avator": "http://^",},]}}}
</script>

V-for 可以有数组的下标,并且可以使用of来代替in

<p v-for="(item, index) in names">{{ item}}-{{index}}</p>

V-for与 对象

可以用来遍历对象

<template><h3>列表渲染</h3><p v-for="(value, key, index) of user">{{index}}-{{key}}-{{value}}</p>
</template>
<script>export default {data() {return{user:{name: "123",age: 13,}}}}
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

利用AI提高内容生产效率的五个方案

目录 如何利用AI提高内容生产效率? ​编辑方向一&#xff1a;自动化内容生成 方向二&#xff1a;内容分发与推广 方向三&#xff1a;内容分析与优化 方向四&#xff1a;图像和音频处理 方向五&#xff1a;自动编辑和校对 如何利用AI提高内容生产效率? 简介&#xff1a…

智慧公厕,小民生里的“大智慧”!

公共厕所是城市社会生活的基础设施&#xff0c;而智慧公厕则以其独特的管理模式为城市居民提供更优质的服务。通过智能化的监测和控制系统&#xff0c;智慧公厕实现了厕位智能引导、环境监测、资源消耗监测、安全防范管理、卫生消杀设备、多媒体信息交互、自动化控制、自动化清…

AzureDataFactory 表选项之自动创建表

接上篇, 该篇里表与表之间采取了提前mapping的方式&#xff0c;通过Import schemas的方式将源和目标的表的schemas做了一对一的匹配 但如果我的应用场景是将D365的表数据推送到外部数据源&#xff0c;需要原表clone&#xff0c;如果我去先建表建字段再做mapping未免过于繁琐&am…

JDK1.8的安装及环境变量的配置(超详细图文)

0.JDK 简介 JDK&#xff0c;全称Java Development Kit&#xff0c;是Java语言的软件开发工具包&#xff0c;主要用于Java程序的开发。 1.首先下载JDK安装包 下载安装jdk1.8或jdk17(可以去官方下载) 这里提供一份网盘下载地址&#xff0c;大家按需自取&#xff1a;点击这里下…

CTF例题和知识点

[ACTF2020 新生赛]Include 打开靶机发现一个超链接&#xff0c;点击之后出现一段话 “Can you find out the flag?” 查看源码注入&#xff0c;无果 仔细看url&#xff0c;发现有flag.php 根据题目提示&#xff0c;该题应该是文件包含漏洞&#xff0c;因此可以判断出此题是PH…

FreeRTOS标准库例程代码

1.设备STM32F103C8T6 2.工程模板 单片机: 部分单片机的程序例程 - Gitee.comhttps://gitee.com/lovefoolnotme/singlechip/tree/master/STM32_FREERTOS/1.%E5%B7%A5%E7%A8%8B%E6%A8%A1%E6%9D%BF 3.代码 1-FreeRTOS移植模板 #include "system.h" #include "…

基础算法,贪心算法,贪心策略,OJ练习

文章目录 一、概念二、OJ练习2.1 区间选点2.2 区间合并2.3 区间2.4 合并果子2.5 排队接水2.6 货仓选址2.7 防晒2.8 畜栏预定2.9 雷达设备2.10 国王游戏2.11 耍杂技的牛2.12 给树染色2.13 任务2.14 能量石 三、总结 一、概念 贪心是一种在每次决策时采取当前意义下最优策略的算…

MDK/keil高阶使用手册

1.开启watch和内存窗口的值实时更新 2.调试模式可以查看局部变量的值 只不过要让任意被观察变量退出<cannot evaluate>状态,都需要先在该变量被赋值的地方先打个断点,此后该变量的值就能实时更新了。 3.可以在watch窗口直接输入你要查看的变量的名称 4.可以在watch窗…

iframe的替代方案有吗?做页面嵌套界面套娃

UIOTOS可以了解下&#xff0c;uiotos.net&#xff0c;通过连线来代替脚本逻辑开发&#xff0c;复杂的交互界面&#xff0c;通过页面嵌套轻松解决&#xff0c;是个很新颖的思路&#xff0c;前端零代码&#xff01; 蓝图连线尤其是独创的页面嵌套和属性继承技术&#xff0c;好家…

敏感信息提取插件-CaA(三)

0x01 简介 CaA是一个基于BurpSuite Java插件API开发的流量收集和分析插件。它的主要作用就是收集HTTP协议报文中的参数、路径、文件、参数值等信息&#xff0c;并统计出现的频次&#xff0c;为使用者积累真正具有实战意义的Fuzzing字典。除此之外&#xff0c;CaA还提供了独立的…

SMI接口

目录 SMI 接口帧格式读时序写时序 IP 设计IP 例化界面IP 接口IP 验证 SMI 接口 SMI&#xff08;Serial Management Interface&#xff09;串行管理接口&#xff0c;也被称作 MII 管理接口&#xff08;MII Management Interface&#xff09;&#xff0c;包括 MDC 和 MDIO 两条信…

system函数和popen函数

system函数 #include <stdlib.h> *int system(const char command); system函数在linux中的源代码&#xff1a; int system(const char * cmdstring) {pid_t pid;int status;if(cmdstring NULL){return (1);}if((pid fork())<0){status -1;}else if(pid 0){ //子…

翻工第二次 Ant Design Pro 下载,发现问题,电脑网络配置有误,魔法了

一、相关网址链接 鱼皮的用户中心项目 &#xff08;前端Ant Design Pro构建&#xff09; 语雀 ## 没有选择umi版本这一步 Issue #11144 ant-design/ant-design-pro GitHub 关于umi ui图标未显示问题_umi ui不出现-CSDN博客 二、存在问题 导致下载速度慢 本人镜像代码写…

TDN: Temporal Difference Networks for Efficient Action Recognition 论文阅读

TDN: Temporal Difference Networks for Efficient Action Recognition 论文阅读 Abstract1. Introduction2. Related work3. Temporal Difference Networks3.1. Overview3.2. Short-term TDM3.3. Long-term TDM3.4. Exemplar: TDN-ResNet 4. ExperimentsAblation studiesCompa…

【计算机毕业设计】springboot工资管理系统

人类现已迈入二十一世纪&#xff0c;科学技术日新月异&#xff0c;经济、资讯等各方面都有了非常大的进步&#xff0c;尤其是资讯与 网络技术的飞速发展&#xff0c;对政治、经济、军事、文化等各方面都有了极大的影响。 利用电脑网络的这些便利&#xff0c;发展一套工资管理系…

深度剖析:SSD能否全面取代HDD?-2

近日&#xff0c;希捷针对SSD即将全面取代HDD的市场预言也提出站在HDD厂商角度不同的观点。 这些观点出自希捷的一份演示文稿&#xff0c;实质上是对Pure Storage首席执行官Charlie Giancarlo所称“五年内不会再有新的磁盘系统出售”这一论断的回应&#xff0c;意味着到2028年底…

JavaScript使用 BigInt

在 JavaScript 中&#xff0c;最大的安全整数是 2 的 53 次方减 1&#xff0c;即 Number.MAX_SAFE_INTEGER&#xff0c;其值为 9007199254740991。这是因为 JavaScript 中使用双精度浮点数表示数字&#xff0c;双精度浮点数的符号位占 1 位&#xff0c;指数位占 11 位&#xff…

Transformers中加载预训练模型的过程剖析

使用HuggingFace的Transformers库加载预训练模型来处理下游深度学习任务很是方便,然而加载预训练模型的方法多种多样且过程比较隐蔽,这在一定程度上会给人带来困惑。因此,本篇文章主要讲一下使用不同方法加载本地预训练模型的区别、加载预训练模型及其配置的过程,藉此做个记…

PXE批量部署,一键安装配置多台Linux系统

目录 一、PXE批量部署的优点 二、搭建PXE远程安装服务器 1. 实验初始化设置 2. 一键安装软件包 3. 复制 vmlinuz、initrd.img、pxelinux.0文件 4. 配置PE启动菜单配置文件 5. 修改配置文件&#xff0c; 启动各个软件服务 6. kickstart自动应答文件修改启动菜单配置文件…

CSCWD 2024会议最后一天 女高音惊艳全场,相声笑破肚皮

会议之眼 快讯 今天是第27届国际计算机协同计算与设计大会&#xff08;CSCWD 2024&#xff09;举办的最后一天&#xff01;会议依然热络&#xff0c;紧张而充实&#xff01;各个技术分论坛持续展开&#xff0c;学者们的热情不减&#xff0c;对技术领域的热爱和探索精神令人赞叹…