计算属性与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.mzph.cn/news/147964.shtml

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

相关文章

Go vs Rust：文件上传性能比较

Go vs Rust：文件上传性能比较

在本文中&#xff0c;主要测试并比较了Go—Gin和Rust—Actix之间的多部分文件上传性能。 设置 所有测试都在配备16G内存的 MacBook Pro M1 上执行。 软件版本为&#xff1a; Go v1.20.5Rust v1.70.0 测试工具是一个基于 libcurl 并使用标准线程的自定义工具&#xff0c;能…
阅读更多...
信息系统项目管理师 第四版 第20章 高级项目管理

信息系统项目管理师 第四版 第20章 高级项目管理

1.项目集管理 1.1.项目集管理标准 1.2.项目集管理角色和职责 1.3.项目集管理绩效域 2.项目组合管理 2.1.项目组合管理标准 2.2.项目组合管理角色和职责 2.3.项目组合管理绩效域 3.组织级项目管理 3.1.组织级项目管理标准 3.2.业务价值与业务评估 3.3.OPM框架要素 3…
阅读更多...
123. 买卖股票的最佳时机 III

123. 买卖股票的最佳时机 III

给定一个数组&#xff0c;它的第 i 个元素是一支给定的股票在第 i 天的价格。 设计一个算法来计算你所能获取的最大利润。你最多可以完成 两笔 交易。 注意&#xff1a;你不能同时参与多笔交易&#xff08;你必须在再次购买前出售掉之前的股票&#xff09;。 示例 1: 输入&a…
阅读更多...
【性能】如何计算 Web 页面的 FP 指标

【性能】如何计算 Web 页面的 FP 指标

什么是 FP 指标 FP (First Paint) 为首次渲染的时间点&#xff0c;在性能统计指标中&#xff0c;从用户开始访问 Web 页面的时间点到 FP 的时间点这段时间可以被视为 白屏时间&#xff0c;也就是说在用户访问 Web 网页的过程中&#xff0c;FP 时间点之前&#xff0c;用户看到的…
阅读更多...
KeyarchOS的CentOS迁移实践：使用操作系统迁移工具X2Keyarch V2.0

KeyarchOS的CentOS迁移实践：使用操作系统迁移工具X2Keyarch V2.0

KeyarchOS的CentOS迁移实践&#xff1a;使用操作系统迁移工具X2Keyarch V2.0 作者&#xff1a; 猫头虎博主 文章目录 KeyarchOS的CentOS迁移实践&#xff1a;使用操作系统迁移工具X2Keyarch V2.0&#x1f405;摘要引言1. 迁移前的精心准备1.1 系统环境介绍1.2 深度数据验证1.2.…
阅读更多...
js制作动态表单

js制作动态表单

JS制作动态表单&#xff0c;可以通过以下步骤实现&#xff1a; HTML布局&#xff1a;在HTML中创建一个表单元素&#xff0c;并设置一个ID属性。 <form id"myForm"><label for"name">姓名&#xff1a;</label><input type"text…
阅读更多...
Maven编译报错：javacTask: 源发行版 1.8 需要目标发行版 1.8

Maven编译报错：javacTask: 源发行版 1.8 需要目标发行版 1.8

报错截图&#xff1a; IDEA中的jdk检查都正常设置的1.8一点毛病没有。参考其他帖子链接如下&#xff1a; https://blog.csdn.net/zhishidi/article/details/131480199https://blog.51cto.com/u_16213460/7197764https://blog.csdn.net/lck_csdn/article/details/125387878 逐…
阅读更多...
Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器

Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器

前言 持续学习总结输出中&#xff0c;Vue指令修饰符、v-bind、v-model、computed计算属性、watch侦听器 一、指令修饰符 1.什么是指令修饰符&#xff1f; 所谓指令修饰符就是通过“.”指明一些指令后缀 &#xff0c;不同的后缀封装了不同的处理操作 —> 简化代码 2.按键…
阅读更多...
LeetCode算法题解（动态规划）|LeetCode509. 斐波那契数、LeetCode70. 爬楼梯、LeetCode746. 使用最小花费爬楼梯

LeetCode算法题解（动态规划）|LeetCode509. 斐波那契数、LeetCode70. 爬楼梯、LeetCode746. 使用最小花费爬楼梯

一、LeetCode509. 斐波那契数 题目链接&#xff1a;509. 斐波那契数 题目描述&#xff1a; 斐波那契数 &#xff08;通常用 F(n) 表示&#xff09;形成的序列称为 斐波那契数列 。该数列由 0 和 1 开始&#xff0c;后面的每一项数字都是前面两项数字的和。也就是&#xff1a…
阅读更多...
LeetCode（29）三数之和【双指针】【中等】

LeetCode（29）三数之和【双指针】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 三数之和 1.题目 给你一个整数数组 nums &#xff0c;判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k &#xff0c;同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复…
阅读更多...
Android 13.0 Launcher3仿ios长按app图标实现抖动动画开始拖拽停止动画

Android 13.0 Launcher3仿ios长按app图标实现抖动动画开始拖拽停止动画

1.概述 在13.0的系统rom定制化开发中，在对系统原生Launcher3的定制需求中，也有好多功能定制的，在ios等电子产品中 的一些好用的功能，也是可以被拿来借用的，所以在最近的产品开发需求中，需求要求模仿ios的 功能实现长按app图标实现抖动动画，接下来看如何分析该功能的实现…
阅读更多...
电子学会2023年6月青少年软件编程（图形化）等级考试试卷（二级）真题，含答案解析

电子学会2023年6月青少年软件编程（图形化）等级考试试卷（二级）真题，含答案解析

青少年软件编程（图形化）等级考试试卷（二级） 一、单选题(共25题，共50分) 1. 运行下列哪段程序，可以让狗狗走到木屋门口？（ ） A.
阅读更多...
微信第三方平台开发重点概念流程梳理

微信第三方平台开发重点概念流程梳理

标题 微信开发的亿点点概念第三方平台代开发流程亿些概念开发流程 代公众号使用JS SDK一些概念具体流程引用 微信开发的亿点点概念 AppID&#xff1a;AppID是不同类型的产品的账号ID,是账号的唯一标识符。例如公众号的AppID、小程序的AppID、开放平台的AppID、第三方平台的App…
阅读更多...
OceanBase：Zone管理

OceanBase：Zone管理

OceanBase 集群由若干个 Zone 组成。从物理层面来讲&#xff0c;一个 Zone 通常是一个独立的物理部署单元&#xff0c;可以是一个数据中心&#xff08;IDC&#xff09;或者云上的一个 Zone&#xff08;可用区&#xff09;&#xff0c;也可以是一个单独的机架&#xff08;Rack&a…
阅读更多...
2023.11.15 hive sql之函数标准,字符串,日期,数学函数

2023.11.15 hive sql之函数标准,字符串,日期,数学函数

目录 一.函数分类标准 二.查看官方函数,与简单演示 三.3种类型函数演示 四.字符串函数 1.常见字符串函数 2.索引函数 解析函数 五.日期函数 1.获取当前时间 2.获取日期相关 3.周,季度等计算 4.时间戳 六.数学函数 一.函数分类标准 目前hive三大标准 UDF:&#xff08…
阅读更多...
Linux系统上导出和导入MongoDB数据库

Linux系统上导出和导入MongoDB数据库

在Linux系统上&#xff0c;你可以使用mongodump和mongorestore命令来导出和导入MongoDB数据库。以下是简要的步骤&#xff1a; 导出MongoDB数据库 使用mongodump命令来导出数据库&#xff0c;该命令将数据库的数据和索引以二进制形式存储在指定的目录中。 mongodump --db yo…
阅读更多...
Apache Hive源码阅读环境搭建

Apache Hive源码阅读环境搭建

前置软件&#xff1a; JDK 1.8 Maven 3.3.9 1 下载源码 # 下载源码 git clone https://github.com/apache/hive.gitcd hive# 查看标签 git tag# 切换到要阅读的指定版本的tag git checkout rel/release-2.1.02 编译源码 mvn clean install -DskipTests执行报错 日志如下 E…
阅读更多...
VisualBox7.0.12 主机和宿舍互PING设置

VisualBox7.0.12 主机和宿舍互PING设置

设置成桥接模式 主机设置 虚拟机设置
阅读更多...
搜索引擎ElasticSearch分布式搜索和分析引擎学习，SpringBoot整合ES个人心得

搜索引擎ElasticSearch分布式搜索和分析引擎学习，SpringBoot整合ES个人心得

ElasticSearch Elasticsearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口。Elasticsearch是用Java语言开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c;是一种流行的企业级搜索引擎。Elas…
阅读更多...
stable diffusion到底是如何工作的

stable diffusion到底是如何工作的

stable diffusion简单入门 stable diffusion是一个文生图模型&#xff0c;主要由CompVis、Stability AI和LAION的研究者们创建。这个模型主要是在512X512分辨率的图像上训练的&#xff0c;训练数据集是LAION-5B&#xff0c;该数据集是目前可访问的最大的多模态数据集。 在这篇…
阅读更多...
最新文章

Copyright @ 2022~2023