【b站咸虾米】2 Vue基础(下) 2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例

课程地址:【2021最新Vue从基础到实例高级_vue2_vuecli脚手架博客案例】 https://www.bilibili.com/video/BV1pz4y1S7bC/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

目录

2 Vue基础 下

2.8 计算属性

2.8.1 计算属性使用

2.8.2 计算属性与methods的异同

1 methods

2 计算属性

2.8.3 计算属性传值 关注下

2.9 监听属性

2.10 全局组件和局部组件

2.10.1 全局组件

2.10.2 局部组件

2.11 父子组件传值

2.12 axios网络请求

2.12.1 axios网络请求介绍

2.12.2 axios请求方式及参数传递

2.13 生命周期钩子

2.14 案例-列表翻页


2 Vue基础 下

2.8 计算属性

2.8.1 计算属性使用

示例

<body><div id="app">{{ myTitle }}</div>
</body></html>
<script>new Vue({el: '#app',data: {title: "vue学习",des: "web前端开发"},methods: {},computed: {myTitle() {return this.title + "---" + this.des;}}})
</script>

效果

2.8.2 计算属性与methods的异同

插播:

对于事件处理方法,在template中调用时,可以不带括号。

但是对于模板语法中使用的方法,必须要加括号(这里的totalPrice是个methods)。

1 methods

template里调用三次totalPrice方法,在DOM

效果

用几次totalPrice方法,方法就被调用几次。

如果对于一些复杂运算,继续这样做就会影响性能。

2 计算属性

改用计算属性

效果

计算属性sumPrice只被调用一次。

如果模板里用的计算属性的值与之前保持一致,那么将第一次结果进行缓存。这样结果就会去缓存中取,而不是再次执行一次计算过程。

改变数量,计算属性被执行1次

以上就是计算属性和methods的异同。

2.8.3 计算属性传值 关注下

计算属性看上去是个方法,是否可以有入参?

可以的。

示例

效果

2.9 监听属性

监听数据改变。

示例

效果

数据改变,监听器就会被触发。

场景:用于网络请求。

2.10 全局组件和局部组件

用Vue做的小程序项目,实际上是一个单页面项目,优点:后期访问速度快,易维护,缺点:首次加载速度慢。

常规网站,多页面项目,html5+jQuery.

Vue适合做移动端、后台管理系统。

组件基础 — Vue.js

Vue核心在于组件。

插:vs code自定义代码片段,不需要就没看,在p24里。

2.10.1 全局组件

全局组件

组件抽离。

2.10.2 局部组件

在实例化的vue对象的components属性里添加组件。

2.11 父子组件传值

讲的是未用脚手架前的父子组件传值,写起来很麻烦。

这部分最近复习了下,已经懂了,就过一遍,不记笔记了。

2.12 axios网络请求

ajax网络请求https://jquery.cuishifeng.cn/jQuery.Ajax.html

ajax处理异步请求,参数包括请求地址url和其他配置

axios也是处理异步请求的方式。axios中文网|axios API 中文文档 | axios

点击开始使用:axios中文文档|axios中文网 | axios

2.12.1 axios网络请求介绍

使用方式axios中文文档|axios中文网 | axios

方式1:使用src引入axios。

方式2:使用npm安装。

将axios.min.js保存到本地。

接口网站ShowDoc

示例

axios这里不需要实例化。

效果

完整代码

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/vue.js"></script><script src="js/axios.min.js"></script>
</head><body><div id="app"><button @click="clickBtn">获取列表</button><ul><li v-for="item in listArr">{{item.title}}</li></ul></div>
</body></html>
<script>new Vue({el: '#app',data: {listArr: []},methods: {clickBtn() {// axios这里不需要实例化(引入axios.min.js文件)// .then是数据请求成功后的回调函数axios.get("https://ku.qingnian8.com/dataApi/qingKu/getList.php").then(res => {console.log(res);this.listArr = res.data;})}}})
</script>

2.12.2 axios请求方式及参数传递

https://ku.qingnian8.com/dataApi/qingKu/getList.php?num=3

会返回3条数据

https://ku.qingnian8.com/dataApi/qingKu/getList.php?num=3&page=2

会返回第2个页面的3条数据

但一般不这样拼接,因为对后期操作不利。

在专门的参数属性里声明要查询的内容。

post请求同理。

综合方法如下。

2.13 生命周期钩子

up借助上面的网络请求场景,来介绍vue的生命周期。

beforeCreate()

created() 实例化完成后,html的DOM结构没有渲染完成

beforeMount()

mounted() html全部渲染完毕,此时可以访问html内容

这里有个案例,可以记一下。p31结尾地方。

示例

结果

created的节点,原样输出。说明created时,获取不到data中的数据。

2.14 案例-列表翻页

使用网络请求制作列表翻页效果。

自己写。这周末或者周五写。

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

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

相关文章

【Flutter学习笔记】9.6 动画切换组件(AnimatedSwitcher)

参考资料&#xff1a;《Flutter实战第二版》9.6 动画切换组件&#xff08;AnimatedSwitcher&#xff09; 9.6.1 AnimatedSwitcher AnimatedSwitcher 可以同时对其新、旧子元素添加显示、隐藏动画&#xff0c;在需要切换新旧元素的场景广泛使用。也就是说在AnimatedSwitcher的子…

2.MongoDB与关系数据库对比

MongoDB的简单操作与比较 与关系数据库对比 MySQL与MongoDB都是开源的常用数据库&#xff0c;但是MySQL是传统的关系型数据库&#xff0c;MongoDB则是非关系型数据库&#xff0c;也叫文档型数据库&#xff0c;是一种NoSQL的数据库。它们各有各的优点&#xff0c;来看看他们之…

数字排列 - 华为OD统一考试(C卷)

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 小明负责公司年会&#xff0c;想出一个趣味游戏: 屏幕给出 1−9 中任意 4 个不重复的数字,大家以最快时间给出这几个数字可拼成的数字从小到大排列位于第 n 位置…

基于Logstash由SQLServer向Elasticsearch同步数据: logstash配置文件

文章目录 I Logstash1.1 Logstash 安装1.2 logstash配置文件参数含义1.3 启动Logstash1.4 Sample Logstash configuration for creating a simpleII 增量数据同步方案2.1 思路2.2 使用LastModifyTime来追踪DB的变更数据2.3 将最大ID 设置为查询条件,获取增量数据2.4 把时间戳设…

Turbo C++ v3.7.8.9的下载和安装(C语言编辑器完整安装步骤详细图文教程)·跟老吕学C语言(C语言必学教程之一)

[TOC](Turbo C v3.7.8.9的下载和安装(C语言编辑器完整安装步骤详细图文教程)) 跟老吕学C语言&#xff08;C语言必学教程之一&#xff09; 老吕是通过 Turbo C 编译器开始了 C 编程培训和开发。 本文中&#xff0c;老吕将带你了解如何下载 Turbo C&#xff0c;如何在任何最新 W…

perl 用 XML::LibXML 解析 Freeplane.mm文件,

Perl 官网 www.cpan.org 从 https://strawberryperl.com/ 下载网速太慢了 建议从 https://download.csdn.net/download/qq_36286161/87892419 下载 strawberry-perl-5.32.1.1-64bit.zip 约105MB 解压后安装.msi&#xff0c;装完后有520MB&#xff0c;建议安装在D:盘 在云计算…

二.递归及实例(汉诺塔问题)

目录 5.递归 6-递归实例:汉诺塔问题 思路: 详细过程: 代码: 5.递归 调用自身 结束条件 6-递归实例:汉诺塔问题 思路: 结果: 详细过程: 代码: #n为盘子的个数 a,b,c分别为3个地方. def hannuta(n,a,b,c): ​if n>0:hannuta(n-1,a,c,b) #将n-1个从a经过c移到到b(a…

什么是Java中的多线程?为什么需要使用多线程?请解释Java中的线程同步和线程通信。

什么是Java中的多线程&#xff1f;为什么需要使用多线程&#xff1f; Java中的多线程是指在Java程序中同时执行多个线程。线程是程序执行流的最小单元&#xff0c;是处理器分配资源的基本单位。Java虚拟机允许应用程序并发地运行多个执行线程&#xff0c;每个线程都并行执行不…

23.1 微服务理论基础

23.1 微服务基础 1. 微服务介绍2. 微服务特点3. 微服务优缺点4. 微服务两大门派5. 微服务拆分6. 微服务扩展6.1 服务扩展6.2 按需扩展7. 微服务重要模块******************************************************************************************************************

Qt之格栅布局(QGridLayout)控件填满整个单元格

Qt专栏&#xff1a;http://t.csdnimg.cn/GQN1M 目录 1.现象1 2.解决方案 3.现象2 4.解决方案 5.总结 1.现象1 今天在用QGridLayout布局的时候&#xff0c;添加到布局的QWidget有文本框、标签、组合框和按钮等等&#xff0c;布局两列&#xff0c;通过下面的方式添加进去的&…

气压计LPS25HB开发(1)----轮询获取气压计数据

气压计LPS25HB开发----1.轮询获取气压计数据 概述视频教学样品申请源码下载产品特性通信模式速率生成STM32CUBEMX串口配置IIC配置SA0地址设置串口重定向参考程序SA0设置模块地址获取ID复位操作BDU设置设置速率轮询读取数据演示 概述 本文将介绍如何使用 LPS25HB 传感器来读取数…

Oracle中的commit与rollback

SQL语言分为五大类&#xff1a; DDL(数据定义语言:DataDefinitionLanguage) - Create、Alter、Drop 这些语句自动提交&#xff0c;无需用Commit提交。 DQL(数据查询语言:DataQueryLanguage) - Select 查询语句不存在是否提交问题。 DML(数据操纵语言:DataManipulationLangua…

力扣每日练习3.14

103. 二叉树的锯齿形层序遍历 给你二叉树的根节点 root &#xff0c;返回其节点值的 锯齿形层序遍历 。&#xff08;即先从左往右&#xff0c;再从右往左进行下一层遍历&#xff0c;以此类推&#xff0c;层与层之间交替进行&#xff09;。 解题思路&#xff1a;模仿层序遍历的…

蓝桥杯刷题(七)

[蓝桥杯 2023 省 A] 平方差 题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示【样例说明】【评测用例规模与约定】 代码题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 样例 #2样例输入 #2样例输出 #2 提示 代码题目描述输入格式输出格式样例 #1样例输入 …

Ansible自动化运维Inventory与Ad-Hoc

前言 自动化运维是指利用自动化工具和技术来简化、自动化和优化IT基础设施的管理和运维过程&#xff0c;从而提高效率、降低成本&#xff0c;并减少人为错误。在当今复杂的IT环境中&#xff0c;自动化运维已经成为许多组织和企业提高生产力和保证系统稳定性的重要手段。Ansibl…

[数据集][目标检测]零售柜零食检测数据集VOC+YOLO格式5422张113类

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;5422 标注数量(xml文件个数)&#xff1a;5422 标注数量(txt文件个数)&#xff1a;5422 标注…

Docker简介与安装

简介 用来快速构建、运行、管理应用的工具简单说&#xff0c;帮助我们部署项目以及项目所依赖的各种组件典型的运维工具 安装 1.卸载旧版 首先如果系统中已经存在旧的Docker&#xff0c;则先卸载&#xff1a; yum remove docker \docker-client \docker-client-latest \dock…

c++面试整理(二)

一、new和malloc的区别 1.属性: new属于c运算符&#xff0c;编译器支持就可以&#xff0c;makkoc是c的标准库函数&#xff0c;需要引用头文件才可以调用。 2.参数和返回值 malloc分配内存时需要指定内存大小&#xff0c;返回值是void*的指针&#xff0c;需要强制转换 new根…

某小型外包—ETL工程师面试

没有包装简历&#xff0c;面试感觉跟聊天一样&#xff0c;会就是会&#xff0c;不会就是不会。 1.datax和sqoop的对比&#xff0c;优点与缺点 1.1 datax的组件 2.sql的执行顺序。 select a.* ,b* from a left join b on a.id b.id 先join 再 select。 3.数据采集到数仓中…

数字逻辑-时序逻辑电路二——沐雨先生

一、实验目的 &#xff08;1&#xff09;熟悉计数器的逻辑功能及特性。 &#xff08;2&#xff09;掌握计数器的应用。 &#xff08;3&#xff09;掌握时序逻辑电路的分析和设计方法。 二、实验仪器及材料 三、实验原理 1、集成4位计数器74LS161&#xff08;74LS160&#…