Vue基础配置、组件通信、自定义指令

news/2024/6/24 7:17:55/文章来源:https://blog.csdn.net/m0_51195865/article/details/137152164

基础配置

Vue框架已经集成了webpack配置

小注意点

vbase 快速生成vue模板
组件名必须是多词格式(驼峰模式)
具体三种写法:
①小驼峰:abcDef.vue
②大驼峰:AbcDef.vue
③中横线:abc-def.vue
假如文件名不符合多次格式的补救办法:
导出重命名使用多词格式
在这里插入图片描述

容器
index.html中的<div id="app"></div>

在这里插入图片描述

入口文件

main.js为入口文件,里面创建了vue实例对象
render为渲染函数 render:h=>h(App),这里的App指的是同级的App.vue文件。
在这里插入图片描述

Vue文件结构

在这里插入图片描述

组件的导入导出

根组件(App.vue)(页面只能展示一个组件,即根组件,其他组件想展示只能导入根组件中)

在这里插入图片描述
style默认支持css样式

普通组件的注册使用(组件的导入导出)

组件注册的两种方式

1.局部注册:只能在注册的组件内使用

在这里插入图片描述
在这里插入图片描述

2.全局注册:所有组件内都能使用

在这里插入图片描述

scoped解决样式冲突

scoped使得样式只会作用于当前组件
在这里插入图片描述

data必须是函数

data是函数,保证每个组件实例可以维护独立的一份数据对象
每次创建新的组件实例都会新执行一次data函数,得到一个新对象

组件通信

组件之间的关系只有两类:父子关系和非父子关系
组件通信(主要是父子组件之间的数据传递)

父子组件之间的数据通信

父传子

父组件使用自定义属性向子组件传递数据
<template><div><!-- 父传子的语法:父通过自定义属性的方式,向子组件传递数据 -->
<!-- <XtShortCut :id="goodList[0].id" :name="goodList[0].name"></XtShortCut> -->
<XtShortCut :item="goodList[0]"></XtShortCut>
<XtShortCut :item="goodList[1]"></XtShortCut>
<XtShortCut :item="goodList[2]"></XtShortCut></div>
</template>
<script>
import XtShortCut from './components/XtShortCut.vue'
export default {data() {return {goodList: [{id:1,name:'方便面',price:2.5,info:'好吃不贵'},{id:2,name:'火腿',price:1.5,info:'好吃不贵'},{id:1,name:'工作餐',price:25,info:'好吃不贵'},]}},components: {XtShortCut  }}
</script>
<style lang="scss" scoped>
</style>
子组件使用props接收传递过来的数据

props:[‘属性名’]

<template><div class="goods"><h2>商品名称 {{ item.name }}</h2><p>商品单价:{{ item.price }}</p><p>商品描述:{{ item.info }}</p> </div>
</template>
<script>export default {props:['item']     // 名字必须和自定义属于的名字相同}
</script>
<style lang="scss" scoped>
.goods{margin: 10px;padding: 10px;border: 1px solid black;border-radius: 5px;
}
</style>

在这里插入图片描述

prop&data、单项数据流、props校验

子组件不能直接修改父组件的数据
在这里插入图片描述
props写成数组格式
在这里插入图片描述在这里插入图片描述
props写成对象格式(可以对接收的变量进行校验)

// props写成数组格式// props:['str','list','say']// 写成对象格式可以对接收的数据进行校验//1.required:true----------------表示父组件,必须传递这个值// 2.type:String|Number|Object|Array|Boolean|Funcation// 2.1 type:[strin,Number]// 3.default:''// 3.1默认值是对象或数组,要写成函数格式,函数中返回对象或数组props: {str: {// 在这里对接收的数据进行校验required: true,//表示父组件必须传递这个数据},age: {default:100, //如果父组件没有传age,则让age等于100},user: {default: () => {return {}  //对于默认值是数组或对象的形式,要写成函数形式}},say:{}}

子传父(通过事件)($emit)

事件名要一致

核心语法:$emit(‘事件名’,传的数据) ($emit用来触发事件)
子组件写法举例:
< button @click="$emit(‘事件名’,传的数据,..,...)"></button>
父组件写法:
<MyTest @事件名=“方法”></MyTest>
methods:{
方法(val){
//形参val接受到的就是子组件传递过来的数据
}

sync修饰符(更常用)

使用sync修饰符,父传子没什么变化,子传父,父不在需要另写事件接收
举例为控制子组件弹出框的显示隐藏,
在这里插入图片描述

依赖注入

父组件向子组件(后代)传递数据的一种方式
传递的对象是响应式的数据,传入的其他格式数据是非响应式的

在这里插入图片描述

ref和refs

寻找标签和组件对象(取代document.querySelector,在vue中将在整个文件中查找,而不是在单个组件中查找,不建议在vue中使用,ref只会找当前组件的匹配对象)(获取组件可以调用对应组件的对象和方法)
this.$refs包括当前组件的索引ref对象

1.如果组件中多个元素有相同的ref值,则this.$refs.xxx只找最后一个
2.循环出来之后,多个元素有相同的ref值,this.$refs.xxx找到全部
调用对应组件中的方法(什么时候加this同data一样)

在这里插入图片描述

自定义指令(为了复用)

全局指令

全局指令在main.js入口文件中实现
使用方法:v-指令名称
每个钩子函数都有两个参数(ele,obj)
ele:绑定指令的元素
obj:指令的一些信息(比如绑定指令的值,binding.value)

Vue.directive('指令名称',{
//指令周期的钩子函数,每个钩子函数都有两个参数
bind(ele,obj){}, //不重要,只执行一次,DOM渲染之前执行里面可以进行样式操作
inserted(ele,obj){},  //重要 ,只执行一次,DOM渲染之后执行,里面可以进行行为操作
update(ele,obj){}, //重要,数据更新之后执行
componentUpdated(ele,obj){}, //不重要,父子组件都更新后执行
unbind(ele,obj){},  //不重要,指令解绑的时候执行
})

局部指令

在export default{}中实现,只能在当前指令中使用,

export default{
directives:{指令名称:{
//指令周期的钩子函数,每个钩子函数都有两个参数
bind(ele,obj){}, //不重要,只执行一次,DOM渲染之前执行里面可以进行样式操作
inserted(ele,obj){},  //重要 ,只执行一次,DOM渲染之后执行,里面可以进行行为操作
update(ele,obj){}, //重要,数据更新之后执行
componentUpdated(ele,obj){}, //不重要,父子组件都更新后执行
unbind(ele,obj){},  //不重要,指令解绑的时候执行
},  }
}

举例:通过自定义指令实现,数据到达之前,加载数据动画
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

分享一种快速移植OpenHarmony Linux内核的方法

移植概述 本文面向希望将 OpenHarmony 移植到三方芯片平台硬件的开发者&#xff0c;介绍一种借助三方芯片平台自带 Linux 内核的现有能力&#xff0c;快速移植 OpenHarmony 到三方芯片平台的方法。 移植到三方芯片平台的整体思路 内核态层和用户态层 为了更好的解释整个内核…

站群CMS系统

站群CMS系统是一种用于批量建立和管理网站的内容管理系统&#xff0c;它能够帮助用户快速创建大量的网站&#xff0c;并实现对这些网站的集中管理。以下是三个在使用广泛的站群CMS系统&#xff0c;它们各具特色&#xff0c;可以满足不同用户的需求。 1. Z-BlogPHP Z-BlogPHP是…

【JavaScript】函数 ④ ( 函数返回值 | 函数返回值语法 return 关键字 | 函数默认返回值 undefined )

文章目录 一、JavaScript 函数返回值1、函数返回值引入2、函数返回值语法3、函数默认返回值4、函数默认返回值 一、JavaScript 函数返回值 1、函数返回值引入 JavaScript 函数 可以 实现某种特定的功能 , 执行完毕后 , 可以返回一个 " 返回值 " ; 当 函数 被调用执行…

Unity LineRenderer的基本了解

在Unity中&#xff0c;LineRenderer组件用于在场景中绘制简单的线条。它通常用于绘制轨迹、路径、激光等效果。 下面来了解下它的基本信息。 1、创建 法1&#xff1a;通过代码创建 using UnityEngine;public class CreateLineRenderer : MonoBehaviour {void Start(){// 创…

华为OD机试 - 查找舆情热词(Java 2024 C卷 100分)

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…

基于SSM+Jsp+Mysql的美食推荐管理系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

输出100~200之间的素数(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>//实现素数判断函数&#xff1b; int Prime(int number) {//初始化变量值&#xff1b;int divided 2;int JudgementCondition 0;//循环判断素数&#xff1b;wh…

MySQL Innodb 引擎中预防 Update 操作上升为表锁

一、MySQL 如何预防 Update 上升为表锁 在 MySQL 中&#xff0c;进行任何数据的 修改 操作都会进行一定的锁操作&#xff0c;而锁的不同直接导致性能的差异。例如 MyISAM 引擎&#xff0c;更新时采用表锁&#xff0c;并发性较差。而 Innodb 引擎支持事务&#xff0c;更新时采用…

7.1 Mysql shell 定时备份

直接上脚本----linu 定时任务执行 #!/bin/bash# 配置信息 DB_USER"your_username" # 数据库用户名 DB_PASSWORD"your_password" # 数据库密码 DB_NAME"your_database_name" # 要备份的数据库名 BACKUP_DIR"/path/to/backup/directory"…

LiDAR和Camera融合的BEV感知算法-BEVFusion

0. 简述 本次给大家讲解一篇非常经典的融合工作叫 BEVFusion&#xff0c;我们依旧从算法动机&开创性思路、主体结构、损失函数以及性能对比四个方面展开 BEVFusion 有两篇文章&#xff0c;本次主要讲解的是阿里和北大的&#xff1a;BEVFusion: A Simple and Robust LiDAR-…

[leetcode]28. 找出字符串中第一个匹配项的下标

前言&#xff1a;力扣刷题 问题&#xff1a; 给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 示例&…

CA根证书——https安全保障的基石

HTTPS通信中&#xff0c;服务器端使用数字证书来证明自己的身份。客户端需要验证服务器发送的证书的真实性。这就需要一个可信的第三方机构&#xff0c;即CA&#xff0c;来颁发和管理证书。CA根证书是证书颁发机构层次结构的顶级证书&#xff0c;客户端信任的所有证书都可以追溯…

新手学python还是c?

考虑到个人情况和职业规划是非常重要的。我这里有一套编程入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习编程&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 Python作为初学者入门语言…

Swift:“逻辑运算子“与“比较运算符“

1. 逻辑非 ! 逻辑非运算符 ! 是用于对布尔值取反的。当操作数为 true 时&#xff0c;! 将返回 false&#xff0c;而当操作数为 false 时&#xff0c;! 将返回 true。 let isTrue true let isFalse !isTrue // isFalse 现在是 false 2. 逻辑与 && 逻辑与运算符 &a…

PetaLinux 去除自动获取 IP 地址

问题&#xff1a;系统启动的时候会自动检测 IP 地址&#xff0c;如不需要这个功能&#xff08;该过程需耗时十几秒&#xff09;。可以自定义 IP 地址&#xff0c;去掉这一步。 操作步骤如下&#xff1a; 所有命令均需在非管理员模式下执行 1. 初始化 PetaLinux 运行环境 运行…

区块链技术与大数据结合的商业模式探索

hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年经验&#xff01;希望我的分享能帮助到您&#xff01;如需帮助可以评论关注私信我们一起探讨&#xff01;致敬感谢感恩&#xff01; 随着区块链技术和大数据技术的不断发展&#xff0c;两者的结合为企业带来了新的商业模式…

Flutter应用如何让屏幕在app运行期间保持常亮?

大家好&#xff0c;我是你们的好朋友咕噜铁蛋&#xff01;今天&#xff0c;我想和大家分享一个有趣且实用的技巧——在Flutter应用中实现屏幕常亮功能。当我们的应用需要用户长时间关注屏幕内容时&#xff0c;比如阅读、观看视频或进行游戏等&#xff0c;保持屏幕常亮就显得尤为…

Hive函数笔试题(简单)

第1题 有如下的用户访问数据 userId visitDate visitCount u01 2017/1/21 5 u02 2017/1/23 6 u03 2017/1/22 8 u04 2017/1/20 3 u01 2017/1/23 6 u01 2017/2/21 8 u02 2017/1/23 6 u01 2017/2/22 4 要求使用SQL统计出每个用户的累积访问次数&…

前端学习<三>CSS进阶——03-网页设计和开发中,那些困扰大神的关于字体的知识

前言 我周围的码农当中&#xff0c;有很多是技术大神&#xff0c;却常常被字体这种简单的东西所困扰。 这篇文章&#xff0c;我们来讲一讲关于字体的常识。这些常识所涉及到的问题&#xff0c;有很强的可操作性&#xff0c;都是在实际业务中真实遇到的&#xff0c;都是需要开…

基于Matlab的血管图像增强算法,Matlab实现

博主简介&#xff1a; 专注、专一于Matlab图像处理学习、交流&#xff0c;matlab图像代码代做/项目合作可以联系&#xff08;QQ:3249726188&#xff09; 个人主页&#xff1a;Matlab_ImagePro-CSDN博客 原则&#xff1a;代码均由本人编写完成&#xff0c;非中介&#xff0c;提供…