计算属性与watch的区别,fetch与axios在vue中的异步请求,单文本组件使用,使用vite创建vue项目,组件的使用方法

7.计算属性

7-1计算属性-有缓存

模板中的表达式虽然很方便,但是只能做简单的逻辑操作,如果在模版中写太多的js逻辑,会使得模板过于臃肿,不利于维护,因此我们推荐使用计算属性来解决复杂的逻辑

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><!-- 计算缓存:"全局-内存"基于依赖(属性值)的缓存,依赖(属性值)改变,就重新计算一遍--><div id="box">{{sub()}}{{sub()}}{{sub()}}{{com}}{{com}}{{com}}</div><script>var obj={data() {return {myName:"yiling"}},methods: {sub(){// 页面调用几次,就打印几次console.log("方法");return this.myName.slice(0,1).toUpperCase()+this.myName.slice(1).toLowerCase()}},computed:{com(){// 只打印一次,因为有缓存,缓存在内存中,基于依赖(属性值)的缓存,依赖(属性值)改变,就重新计算一遍console.log("计算属性");return this.myName.slice(0,1).toUpperCase()+this.myName.slice(1).toLowerCase()}}}var app=Vue.createApp(obj).mount('#box')</script>
</body>
</html>

从上述代码可以看出,如果我们把相同的代码定义为方法和计算属性,结果是完全相同的,但是计算属性会依赖缓存,如果缓存没有变化,就不会重新计算

注意:

1.不能在getter中做异步请求或者更改DOM

2.避免直接修改计算属性值

7-2watch侦听

watch选项期望接收一个对象,其中键是需要侦听的响应式组件实例属性(列如.通过data或computed声明的属性)–值是响应的回调函数,该回调函数接收被侦听原的新值和旧值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><!-- watch:1.支持异步2.要监听哪个状态,就写一个同名的方法在watch中watch与计算属性1.watch不会立即执行(除非加上immediate:true),计算属性会立即执行2.watch监听一个状态,计算属性多个状态3.watch可以是同步+异步,计算属性同步--><div id="box"><select v-model="obj.year"><option value="2023">2023</option><option value="2022">2022</option><option value="2021">2021</option></select><select v-model="obj.month"><option value="10">10</option><option value="11">11</option><option value="12">12</option></select><select v-model="obj.day"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select></div><script>var obj={data() {return {obj:{year:2023,month:11,day:1}}},watch:{//与状态的值保持一致obj:{handler(val){console.log(val);},//开启深度监听deep:true,//页面一加载,就执行一次immediate:true}//----------------方法2-----------------"obj.year":"asy","obj.month":"asy","obj.day":"asy",},}methods: {asy(val){console.log(val);}},}var app=Vue.createApp(obj).mount('#box')</script>
</body>
</html>

8.数据请求

8-1 Fetch

​ XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱， 而且基于事件的异步模型写起来不友好。

​ 兼容性不好 polyfill: https://github.com/camsong/fetch-ie8

fetch("http://localhost:3000/users").then(res=>res.json()).then(res=>{console.log(res)})fetch("http://localhost:3000/users",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({username:"linda",password:"123"})}).then(res=>res.json()).then(res=>{console.log(res)})fetch("http://localhost:3000/users/5",{method:"PUT",headers:{"content-type":"application/json"},body:JSON.stringify({username:"linda",password:"456"})}).then(res=>res.json()).then(res=>{console.log(res)})fetch("http://localhost:3000/users/5",{method:"DELETE"}).then(res=>res.json()).then(res=>{console.log(res)})
8-2 axios

Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。

https://www.npmjs.com/package/axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  1. get请求

    axios.get("http://localhost:3000/users",{params:{name:"linda"}
}).then(res=>{console.log(res.data)
})

  2. post请求

    axios.post("http://localhost:3000/users",{name:"linda",age:100
}).then(res=>{console.log(res.data)
})

  3. put请求

    axios.put("http://localhost:3000/users/12",{name:"linda111",age:200
}).then(res=>{console.log(res.data)
})

  4. delete请求

    axios.delete("http://localhost:3000/users/11").then(res=>{console.log(res.data)
})

  5. axios(config)配置

    axios({method: 'post',url: 'http://localhost:3000/users',data: {name: 'linda',age: 100}
}).then(res => {console.log(res.data)
}).catch(err=>{console.log(err)
})

9.过滤器

vue3不支持过滤器,是vue2支持

在 2.x 中，开发者可以使用过滤器来处理通用文本格式。

<p>{{ accountBalance | currencyUSD }}</p>filters: {currencyUSD(value) {return '$' + value}
}

三.vue3进阶

组件化开发的定义?

​ 扩展html元素,提高代码的复用

​ 组件化开发的优势?

​ 1.代码层次清晰, 便于维护

​ 2.封装性好,

​ 3.复用性高

​ 为了防止数据污染, 组件与组件是隔离的(父子,兄弟)互相都访问不到,在自己的组件定义方法那些

​ 当前cdn缺点:

​ 1.组件template没有高亮显示,没有代码提示

​ 2.css行内样式

​ 3.局部定义组件,套娃

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script>
</head>
<body><div id="box"><!-- 定义组件 --><yiling-navbar></yiling-navbar><yiling-navbar></yiling-navbar></div><script>/* 组件化开发的定义?扩展html元素,提高代码的复用组件化开发的优势?1.代码层次清晰, 便于维护2.封装性好,3.复用性高为了防止数据污染, 组件与组件是隔离的(父子,兄弟)互相都访问不到,在自己的组件定义方法那些当前cdn缺点:1.组件template没有高亮显示,没有代码提示2.css行内样式3.局部定义组件,套娃*/var app=Vue.createApp()// app是注册全局组件()app.component("yiling-navbar",{// 组件行内写样式template:`<div style="backgroundColor:yellow"><h2>我是navbar</h2><yiling-footer></yiling-footer><button @click="back()">按钮</button><button>按钮</button></div>`,methods: {back(){console.log(1);}},data() {return {}},watch:{},// 局部注册组件,其他地方不能用components:{"yiling-footer":{template:`<div style="backgroundColor:red"><h2>我是footer</h2></div>`}}})app.mount('#box')</script>
</body>
</html>
1.单文件组件(SFC)

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。下面是一个单文件组件的示例：

<script>
export default {data() {return {greeting: 'Hello World!'}}
}
</script><template><p class="greeting">{{ greeting }}</p>
</template><style>
.greeting {color: red;font-weight: bold;
}
</style>

如你所见，Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。

  • 使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
  • [让本来就强相关的关注点自然内聚]
  • 预编译模板，避免运行时的编译开销
  • [组件作用域的 CSS]
  • [在使用组合式 API 时语法更简单]
  • 通过交叉分析模板和逻辑代码能进行更多编译时优化
  • [更好的 IDE 支持]，提供自动补全和对模板中表达式的类型检查
  • 开箱即用的模块热更新 (HMR) 支持
1-2 Vue-CLI创建项目 - 锅灶升级

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。

  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。

  • 一个运行时依赖 (

    @vue/cli-service

    )，该依赖：

    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。

  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。

  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

创建一个项目：

vue create my-project
# OR
vue ui
1-4 Vite 创建项目 - 官方推荐

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite 意在提供开箱即用的配置，同时它的 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

创建项目

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

使用 NPM:

$ npm create vite@latest
#创建完项目之后,需要把所有的依赖都安装一下
npm install

使用 Yarn:

$ yarn create vite

使用 PNPM:

$ pnpm create vite
1-5 启动流程&入口文件

在这里插入图片描述

1-6创建引入组件的步骤

  1. 在components文件下创建vue文件在这里插入图片描述

  2. 在App.vue文件中,引入组件在这里插入图片描述

  3. 在组件文件下进行编写相应代码,必须要有跟目录,在vue3中,可以有多个div,但是在vue2中,只能有一个div

    <template><div></div>
</template>

  4. 问题,引入json文件,找不到报错误

    在这里插入图片描述

    解决:把js文件下的json文件放到public下面,之前放在src下面,导致找不到这个json文件

  5. 对于后端返回的名字,不能直接获取,可以使用map方法(fetch的卖座案例)

     <div>{{roles(data)}}</div>roles(data){console.log(data.actors);return data.actors.map(item=>item.name).join("|");}

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

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

相关文章

初试 jmeter做压力测试

初试 jmeter做压力测试

一.前言 压力测试是每一个Web应用程序上线之前都需要做的一个测试&#xff0c;他可以帮助我们发现系统中的瓶颈问题&#xff0c;减少发布到生产环境后出问题的几率&#xff1b;预估系统的承载能力&#xff0c;使我们能根据其做出一些应对措施。所以压力测试是一个非常重要的步…
阅读更多...
BMS系统项目

BMS系统项目

1、通过电压监测是否冲满&#xff0c;通过电压可以监测是否放完电 电池得参数 单体过压&#xff08;充满电&#xff09; 过压恢复&#xff08;百分之90多&#xff09; 欠压保护&#xff08;百分之几得电&#xff0c;快关机了&#xff09; 欠压恢复&#xff08;就是欠压之上…
阅读更多...
【博客系统】 一

【博客系统】 一

该博客系统基于servlet和mysql数据库 , 并且通过xshell终端工具部署至云服务器. 实现的功能包括: 1.博客列表页 2.博客详情页 3.登陆页面 4.强制登陆检查 5.获取用户信息 6.退出登陆 7.发布博客 一.系统展示 登陆页面 博客列表页 博客详情页 博客编辑页 下面就开始编写代码了.…
阅读更多...
【Java 进阶篇】JQuery 案例：下拉列表选中条目左右移动，打破选择的边界

【Java 进阶篇】JQuery 案例：下拉列表选中条目左右移动，打破选择的边界

在前端的舞台上&#xff0c;下拉列表是常见的用户交互元素&#xff0c;但有时候我们想要更多的交互体验。通过巧妙运用 JQuery&#xff0c;我们可以实现下拉列表中选中条目的左右移动功能&#xff0c;为用户提供更加灵活的选择方式。本篇博客将深入研究 JQuery 中实现这一功能的…
阅读更多...
基于安卓android微信小程序的师生答疑交流平app

基于安卓android微信小程序的师生答疑交流平app

项目介绍 本课题研究的是基于HBuilder X系统平台的师生答疑交流APP&#xff0c;开发这款师生答疑交流APP主要是为了帮助用户可以不用约束时间与地点进行所需信息。本文详细讲述了师生答疑交流APP的界面设计及使用&#xff0c;主要包括界面的实现、控件的使用、界面的布局和异常…
阅读更多...
C语言从入门到精通之【基本运算符】

C语言从入门到精通之【基本运算符】

赋值运算符 在C语言中&#xff0c;并不意味着“相等”&#xff0c;而是一个赋值运算符。下面的赋值表达式语句&#xff1a; bmw 2002; 把值2002赋给变量bmw。也就是说&#xff0c;号左侧是一个变量名&#xff0c;右侧是赋给该变量的值。符号被称为赋值运算符。另外&#xff0…
阅读更多...
【数电】IEEE754浮点数

【数电】IEEE754浮点数

IEEE754浮点数 1.组成及分类2.计算(1)符号位(2)阶码(3)尾码(4)实际计算公式 1.组成及分类 &#xff08;1&#xff09;组成 IEEE754浮点数由三部分组成&#xff1a;符号位、阶码和尾码。 &#xff08;2&#xff09;分类 根据数据位宽分为三类&#xff1a;短浮点数、长浮点数和…
阅读更多...
54. 螺旋矩阵

54. 螺旋矩阵

给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;matrix [[1,2,3,…
阅读更多...
【Android】配置Gradle打包apk的环境

【Android】配置Gradle打包apk的环境

目录 生成jks签名文件 配置build.gradle&#xff08;app&#xff09; 打包 生成jks签名文件 Java 密钥库&#xff08;.jks 或 .keystore&#xff09;是用作证书和私钥存储库的二进制文件。用于为用户设备上安装的 APK 签名的密钥。 详细解释请看官方文档&#xff1a; 为应用…
阅读更多...
Zookeeper Java SDK 开发入门

Zookeeper Java SDK 开发入门

文章目录 一、概述二、导入依赖包三、与 Zookeeper 建立连接四、判断 ZooKeeper 节点是否存在四、创建 ZooKeeper 节点数据五、获取 ZooKeeper 节点数据六、修改 ZooKeeper 节点数据七、异步获取 ZooKeeper 节点数据八、完整示例 如果您还没有安装Zookeeper请看ZooKeeper 安装说…
阅读更多...
如何调整图片尺寸：简单实用的教程分享

如何调整图片尺寸：简单实用的教程分享

报名事业编考试的时候&#xff0c;会发现上传照片时会提示图片大小尺寸应该为多少&#xff0c;如果不符合规定就无法提交报名&#xff0c;那么怎么才能修改图片大小呢&#xff1f;最简单的方法就是利用调整照片大小工具来对图片尺寸修改&#xff0c;本文分享一个在线图片处理工…
阅读更多...
【软考篇】中级软件设计师 第四部分（一）

【软考篇】中级软件设计师 第四部分（一）

中级软件设计师 第四部分&#xff08;一&#xff09; 二十九. 程序设计语言概述29.1 解释、编译29.3 编译程序29.4 后缀式29.5 文法定义29.6 正规式29.7 有限自动机29.8 语法分析方法 三十. 法律法规30.1 作品所属权30.2 商标有效期30.3 职务作品所属权30.4 单位与委托30.5 商标…
阅读更多...
【开源】基于Vue.js的校园二手交易系统的设计和实现

【开源】基于Vue.js的校园二手交易系统的设计和实现

目录 一、摘要1.1 项目介绍1.2 项目详细录屏 二、功能模块2.1 数据中心模块2.2 二手商品档案管理模块2.3 商品预约管理模块2.4 商品预定管理模块2.5 商品留言板管理模块2.6 商品资讯管理模块 三、实体类设计3.1 用户表3.2 二手商品表3.3 商品预约表3.4 商品预定表3.5 留言表3.6…
阅读更多...
SharePoint-连接Excel

SharePoint-连接Excel

Power Automate和Power Apps想要连接Excel表格的话&#xff0c;可以在OneDrive或SharePoint网站的文档中创建Excel文件&#xff0c;然后把Excel转换成table表格 以SharePoint为例&#xff0c;在文档中点击新建&#xff0c;选择Excel工作簿 填写内容&#xff0c;然后全选选中 在…
阅读更多...
CRM系统对科技企业有哪些帮助

CRM系统对科技企业有哪些帮助

随着国家政策的倾斜和5G等相关基础技术的发展&#xff0c;中国人工智能产业在各方的共同推动下进入爆发式增长阶段&#xff0c;市场发展潜力巨大。CRM客户管理系统作为当下最热门的企业应用&#xff0c;同样市场前景广阔。那么&#xff0c;CRM系统对科技企业有哪些帮助&#xf…
阅读更多...
2023年 华为杯数学建模 E题

2023年 华为杯数学建模 E题

本科大三的时候&#xff0c;打过一次美赛&#xff0c;当时租了一个民宿&#xff0c;和队友一起度过了专注的四天。当时比赛结束之后&#xff0c;拿着手机&#xff0c;看到四天没回的消息&#xff0c;四天没刷过的朋友圈&#xff0c;有种很新奇的感觉&#xff0c;谢谢美赛给了我…
阅读更多...
MySQL数据库清理Relay_Log_File日志

MySQL数据库清理Relay_Log_File日志

背景 “Relay_Log_File” 是 MySQL 中用于复制的参数之一。在 MySQL 复制中&#xff0c;当一个服务器作为主服务器&#xff08;master&#xff09;时&#xff0c;它会将其更改写入二进制日志文件&#xff08;binary log file&#xff09;。而另一个服务器作为从服务器&#xf…
阅读更多...
买台灯看什么参数？考公必备护眼台灯推荐

买台灯看什么参数？考公必备护眼台灯推荐

说到台灯相信大家都不陌生&#xff0c;不管是平时间休闲看书、办公&#xff0c;还是孩子学习阅读时都会用的上。不过台灯还是不能随便乱买的&#xff0c;因为如果买的台灯品质不合格&#xff0c;光源质量太差&#xff0c;使用久了还会对眼睛带来不好的影响。 所以我们在挑选台灯…
阅读更多...
flutter下拉列表

flutter下拉列表

下拉列表 内容和下拉列表的标题均可滑动 Expanded&#xff1a; 内容限制组件&#xff0c;将其子类中的无限扩展的界面限制在一定范围中。在此使用&#xff0c;是为了防止下拉列表中的内容超过了屏幕限制。 SingleChildScrollView&#xff1a; 这个组件&#xff0c;从名字中可…
阅读更多...
idea查看UML类图

idea查看UML类图

idea查看UML类图 一、如何查看UML类图 1.1 选择需要查看的类或者包&#xff0c;鼠标右键&#xff0c;选择Diagrams->Show Diagram 1.2 对于UML类图中的包&#xff0c;选中后点击鼠标右键-> Expand Nodes(展开节点) 展开前 展开后 1.3 展开后分布比较凌乱&#xff…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023