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-if 和 v-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提高内容生产效率的五个方案




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




阅读更多...

















智慧公厕，小民生里的“大智慧”！








智慧公厕，小民生里的“大智慧”！




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




阅读更多...

















AzureDataFactory 表选项之自动创建表








AzureDataFactory 表选项之自动创建表




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




阅读更多...

















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








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




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




阅读更多...

















CTF例题和知识点








CTF例题和知识点




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




阅读更多...

















FreeRTOS标准库例程代码








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练习




文章目录 一、概念二、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高阶使用手册








MDK/keil高阶使用手册




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




阅读更多...

















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








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




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




阅读更多...

















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








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




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




阅读更多...

















SMI接口








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函数和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 下载，发现问题，电脑网络配置有误，魔法了








翻工第二次 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 论文阅读




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工资管理系统








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




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




阅读更多...

















深度剖析：SSD能否全面取代HDD？-2








深度剖析：SSD能否全面取代HDD？-2




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




阅读更多...

















JavaScript使用 BigInt








JavaScript使用 BigInt




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




阅读更多...

















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








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




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




阅读更多...

















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








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




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




阅读更多...

















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








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




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




阅读更多...











































最新文章





























Copyright @ 2022~2023