自定义属性,v-bind computed的使用
0.0 自定义组件的使用 【掌握】
先自定义自己的组件

-
引入组件
import 组件名 from '路径/文件名'
-
注册组件
<script>
export default {components:{ // 组件注册组件名:组件名,组件名1},data(){ // 数据return {}},methods:{ // 方法}
}
</script>
-
使用组件
<template>
<div>
<组件名></组件名>
<组件名 />
<!-- 使用组件 -->
<CommonHeader></CommonHeader>
<CommonContent />
<CommonFooter></CommonFooter>
<!-- 第二用法 推荐-->
<common-header></common-header>
<common-content />
<common-footer />
</div>
</template>
2.0 v-bind 【重点】
作用:帮助我们操作节点属性,让属性变成数据驱动
<标签 v-bind:class='表达式' v-bind:style="表达式" v-bind:src="表达式">
</标签>
简写:
<标签 :class='表达式' :style="表达式" :src="表达式">
</标签>
v-bind的src绑定
编辑
v-bind的class绑定

v-bind的style绑定

3.0 其他指令 【了解】
3.1 v-pre
作用:不编译胡须表达式
3.2 v-once
作用:只渲染一次,当他所依赖的数据发生改变时,也不会更新渲染
3.3 v-cloak
作用:隐藏胡须表达式,直到有数据时才渲染,只有直接在项目里引入vuejs才会出现,当前主流脚手架版本没有这个问题

4.0 computed 计算属性 【重点】
用于一堆逻辑计算,返回一个唯一的结果 ,与methods定义方式一样,计算属性直接使用他的函数名(不需要加小括号),就等于他的返回结果
<template><div>{{ 函数名 }}</div>
</template>
<script>export default {....computed:{函数名(){一堆的逻辑运算return '最终的结果'}}}
</script>
计算属性的特点:
-
计算属性用于一堆逻辑运算,直接使用函数名就等于使用了最终结果
-
计算属性依赖的数据发生改变,他就会重新计算
-
计算属性存在依赖缓存,性能强,如果依赖的数据更新就会重新计算,如果不更新就直接返回上一次的计算结果
computed计算属性 与 methods方法的区别 【面试题】
-
computed计算属性必须有返回值,methods不一定有
-
调用方式不一样,computed计算属性直接使用函数名,methods方法需要
函数名()调用 -
computed计算属性有依赖缓存,methods方法每次调用都会重新计算结果,计算属性如果数据没有改变,他就将上一次缓存的结果直接返回,就不重新计算了
5.0 filters 过滤器【掌握】
作用:用于处理页面数据的显示格式
<template><div>{{ msg | 过滤器函数名 }}</div>
</template>
<script>export default {data(){return {mes:'xxx'}},methods:{},components:{},computed:{},filters:{过滤器函数名(参数){一堆参数的处理return '处理完的结果'}}}
</script>
6.0 侦听器 watch 【掌握】
作用:用于监听数据的变化,进行相应函数的操作
<template><div>{{ msg | 过滤器函数名 }}</div>
</template>
<script>export default {data(){return {msg:''}}watch:{需要监听的数据(newVal,oldVal){// 一堆的后续操作}},}
</script>
7.0 生命周期 【重点】
什么是生命周期?
是指组件从创建到渲染到更新到销毁的周期过程
vue的声明周期分为4大阶段
#注意:他们都是内置选项
// 创建前后
beforeCreate(){}, // 创建前 组件实例对象还没有创建,data里的数据不能访问
created(){}, // 创建后 ******* 组件实例已经创建完毕,data里的数据可以访问,此时页面dom还没挂载#注: created 一般用于初始化页面数据发送ajax
// 挂载前后
beforeMount(){} // 挂载前 生成虚拟dom,页面dom还没有挂载
mounted(){} // 挂载后 ******* 页面dom已经挂载完毕,可以操作dom#注: mounted 一般用于操作dom节点
// 更新前后
beforeUpdate(){} // 更新前
updated(){} // 更新后
// 销毁前后
beforeDestroy(){} // 销毁前 ** 一般用于清除绑定事件、定时器
destroyed(){} // 销毁
总结:vue的生命周期的作用,在组件各个阶段执行相应的生命周期钩子函数,给用户添加自己代码的机会


作业:
1 购物车案例
2 交互代码敲3遍
3 面试题: 计算属性computed和方法methods有什么区别?
4 选做题:操作题
5 手写配置选项 和 指令
相关文章:
自定义属性,v-bind computed的使用
0.0 自定义组件的使用 【掌握】 先自定义自己的组件 引入组件 import 组件名 from 路径/文件名 注册组件 <script> export default {components:{ // 组件注册组件名:组件名,组件名1},data(){ // 数据return {}},methods:{ // 方法} } </script&…...
解决城市内涝的措施有哪些?需要用到哪些监测设备?
随着城市化的不断推进,城市内涝问题日益凸显。极端天气事件如暴雨、台风等对城市基础设施和居民生活造成了严重影响。那么,解决城市内涝的措施有哪些?需要用到哪些监测设备?针对上述问题,本文会为大家一一进行讲解。 解决城市内涝的措施有哪…...
Spark大数据处理讲课笔记----Spark任务调度
零、本节学习目标 理解DAG概念了解Stage划分了解RDD在Spark中的运行流程 一、有向无环图 (一)DAG概念 DAG(Directed Acyclic Graph)叫做有向无环图,Spark中的RDD通过一系列的转换算子操作和行动算子操作形成了一个…...
【22-23春】AI作业10-经典卷积网络
1.LeNet & MNIST LeNet是一种神经网络的模型,用于图像识别和分类。他包含 3 个卷积层,2 个池化层,1 个全连接层。其中所有卷积层的所有卷积核都为 5x5,步长 strid1,池化方法都为全局 pooling,激活函数…...
第13章_约束
第13章_约束 1. 约束(constraint)概述 1.1 为什么需要约束 数据完整性(Data Integrity)是指数据的精确性(Accuracy)和可靠性(Reliability)。它是防止数据库中存在不符合语义规定的数据和防止因错误信息的…...
GPC规范--安全域基础概念
概述: 分为三种主流类型: 1、发卡方安全域(Issuer Security Domain, ISD),卡片上首要的、强制性存在的安全域,是卡片管理者(通常是发卡方)在卡片内的代表; 2、补充安全域(Supplementary Security Domain&am…...
C++初阶--C++入门之基础学习
0.前言 C是一门非常好的编程语言,但可能在学习C的过程中会遇到很多困难。人们常说 “一个人走得很快,一群人会走的更远”, 所以就让我们一起攻坚克难,一起征服C吧!从本章开始,我们将开始C的基础学习&#x…...
服务器虚拟化部署
服务器虚拟化部署 1、背景2、目的3、环境4、部署4.1、部署VMware ESXi4.1.1、准备工作4.1.2、部署ESXi4.1.3、配置ESXi4.1.4 、部署虚拟机 1、背景 项目上利旧9台服务器,项目需要使用15台服务器,外购已经没有项目硬件采购预算,只能从目前的…...
实验篇(7.2) 01. 实验环境介绍 远程访问 ❀ Fortinet网络安全专家 NSE4
【简介】学习NSE4,如果只看文章而不动手做实验,就象耍流氓。为了有效的巩固学习到的内容,建议经常动手做实验。实验不怕出错,身经百战后,再在生产环境部署和配置FortiGate防火墙,就会做到胸有成竹。 虚拟实…...
ThinkPHP6 模型层的模型属性,表映射关系,以及如何在控制层中使用模型层和模型层中的简单CRUD
ThinkPHP6 模型层的模型属性,表映射关系,以及模型层的CRUD及如何在控制层中使用模型层 1. model 模型层的默认映射规则 模型,即mvc模式中的model层,model层用来对接数据库,操作数据库的增删改查。 在tp6中ÿ…...
CodeForces.1806A .平面移动.[简单][判断可达范围][找步数规律]
题目描述: 题目解读: 给定移动规则以及起始点,终点;分析终点是否可达,可达则输出最小步数。 解题思路: 首先要判定是否可达。画图可知,对于题目给定的移动规则,只能到达起始点(a,b…...
Linux系统编程学习 NO.4 ——基础指令学习、操作系统时间的概念、文件压缩包的概念
1.时间相关的概念以及指令 1.1.时间相关的指令 1.1.1.date指令 date可以指定时间显示的格式:date 指定格式 选项 %H:小时 %M:分钟 %S:秒数 %Y:年份 %m:月份 %d:日 %F:相当于%Y-%m-%d %X:相当…...
leecode 数据库:601. 体育馆的人流量
导入数据: Create table If Not Exists Stadium (id int, visit_date DATE NULL, people int); Truncate table Stadium; insert into Stadium (id, visit_date, people) values (1, 2017-01-01, 10); insert into Stadium (id, visit_date, people) values (2, 20…...
gym不渲染画面的解决方案(gym版本号0.26.2)
确认gym版本号 我安装了新版gym,版本号是0.26.2,不渲染画面的原因是,新版gym需要在初始化env时新增一个实参render_mode‘human’,并且不需要主动调用render方法,官方文档入门教程如下 import gym import numpy as n…...
如何在 Fedora 37 上安装 FileZilla?
FileZilla 是一款流行的开源 FTP(文件传输协议)客户端,它提供了一个直观的界面来管理和传输文件。本文将详细介绍如何在 Fedora 37 上安装 FileZilla。以下是安装过程的详细步骤: 步骤一:更新系统 在安装任何软件之前…...
网终安全技术(刘化君)课后被略的答案
目录 8.HTTP客户机与Wb服务器通信通常会泄露哪些信息? 9.在TCP连接建立的3次握手阶段,攻击者为什么可以成功实施SYN Flood攻击?在实际中,如何防范此类攻击? 常用的网络漏洞扫描技术有哪几种?试举例说明。…...
架构思想之DDD
领域驱动设计(Domain-Driven Design,简称DDD)是一种架构思想,旨在通过将业务问题领域化,将业务逻辑放在核心领域中,以实现更好的软件设计和可维护性。下面将介绍如何实现DDD的Java实现,包括如何…...
FinClip | 2023 年 4 月产品大事记
我们的使命是使您(业务专家和开发人员)能够通过小程序解决您的关键业务流程挑战。不妨让我们看看在本月的产品与市场发布亮点,看看它们如何帮助您实现目标。 产品方面的相关动向👇👇👇 全新版本的小程序统…...
试论什么是圣人境界
人类进化方向就是不断的提高智力。鼓吹体力都是反人类。 圣人是人类能够达到的最高境界,再上一层就是神了。按照中华传统,说圣人就是神也是正确的。 圣人境界是什么样子的?在这一点上,孔子给予了答案:吾道一以贯之。掌…...
在外远程登录局域网下的象过河ERP管理系统,无需公网IP
文章目录 概述1.查看象过河服务端端口2.内网穿透3. 异地公网连接4. 固定公网地址4.1 保留一个固定TCP地址4.2 配置固定TCP地址 5. 使用固定地址连接 转发自CSDN远程穿透的文章:公网远程访问公司内网象过河ERP系统「内网穿透」 概述 ERP系统对于企业来说重要性不言而…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
什么是库存周转?如何用进销存系统提高库存周转率?
你可能听说过这样一句话: “利润不是赚出来的,是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业,很多企业看着销售不错,账上却没钱、利润也不见了,一翻库存才发现: 一堆卖不动的旧货…...
如何在看板中有效管理突发紧急任务
在看板中有效管理突发紧急任务需要:设立专门的紧急任务通道、重新调整任务优先级、保持适度的WIP(Work-in-Progress)弹性、优化任务处理流程、提高团队应对突发情况的敏捷性。其中,设立专门的紧急任务通道尤为重要,这能…...
ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入,一个是通过INMP441麦克风模块采集音频,一个是通过PCM5102A模块播放音频,那如果我们将两者结合起来,将麦克风采集到的音频通过PCM5102A播放,是不是就可以做一个扩音器了呢…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
