Vue3-03_组件基础_上

单页面应用程序

什么是单页面应用程序

单页面应用程序(英文名:Single Page Application)简称 SPA,顾
名思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面,所有的
功能与交互都在这唯一的一个页面内完成。

单页面应用程序的特点

单页面应用程序将所有的功能局限于一个 web 页面中,仅在该 web 页面初始化时加载相应的资源( HTML、
JavaScript 和 CSS)。
一旦页面加载完成了,SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换
HTML 的内容,从而实现页面与用户的交互。

单页面应用程序的优点

SPA 单页面应用程序最显著的 3 个优点如下:
① 良好的交互体验
⚫ 单页应用的内容的改变不需要重新加载整个页面
⚫ 获取数据也是通过 Ajax 异步获取
⚫ 没有页面之间的跳转,不会出现“白屏现象”
② 良好的前后端工作分离模式
⚫ 后端专注于提供 API 接口,更易实现 API 接口的复用
⚫ 前端专注于页面的渲染,更利于前端工程化的发展
③ 减轻服务器的压力
⚫ 服务器只提供数据,不负责页面的合成与逻辑的处理,吞吐能力会提高几倍

单页面应用程序的缺点

任何一种技术都有自己的局限性,对于 SPA 单页面应用程序来说,主要的缺点有如下两个:
① 首屏加载慢
⚫ 路由懒加载
⚫ 代码压缩
⚫ CDN 加速
⚫ 网络传输压缩
② 不利于 SEO
⚫ SSR 服务器端渲染

如何快速构建vue的SPA项目

vue 官方提供了两种快速创建工程化的 SPA 项目的方式:
① 基于 vite 创建 SPA 项目
② 基于 vue-cli 创建 SPA 项目
对比如下:

创建vite的项目

npm init vite-app 项目名称
cd 项目名称
npm install
npm run dev

项目结构

目录结构:
⚫ node_modules 目录用来存放第三方依赖包
⚫ public 是公共的静态资源目录
⚫ src 是项目的源代码目录(程序员写的所有代码都要放在此目录下)
⚫ .gitignore 是 Git 的忽略文件
⚫ index.html 是 SPA 单页面应用程序中唯一的 HTML 页面
⚫ package.json 是项目的包管理配置文件

在 src 这个项目源代码目录之下
⚫ assets 目录用来存放项目中所有的静态资源文件(css、fonts等)
⚫ components 目录用来存放项目中所有的自定义组件
⚫ App.vue 是项目的根组件
⚫ index.css 是项目的全局样式表文件
⚫ main.js 是整个项目的打包入口文件

vite项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中:
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

组件化开发思想

什么是组件化开发

组件化开发指的是:根据封装的思想,把页面上可重用的部分封装为组件,从而方便项目的开发和维护。
类似后端逻辑的通用函数。

组件化开发的好处

前端组件化开发的好处主要体现在以下两方面:
⚫ 提高了前端代码的复用性和灵活性
⚫ 提升了开发效率和后期的可维护性

vue中的组件化开发

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质
上就是一个 vue 的组件。

vue组件的构成

vue组件组成结构

每个 .vue 组件都由 3 部分构成,分别是:
⚫ template -> 组件的模板结构
⚫ script -> 组件的 JavaScript 行为
⚫ style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。

组件的 template 节点

vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中。

<template>
</template>

注意:<template> 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。

在 template 中使用指令

在组件的 <template> 节点中,支持使用前面所学的指令语法,来辅助开发者渲染当前组件的 DOM 结构。
代码示例如下:

<template><h1>这是APP根组件</h1><!-- 使用 {{  }} 插值表达式--><p>生成一个随机数字: {{(Math.random()*10).toFixed(2)}}</p><!-- 使用v-bind 属性绑定--><p :title="new Date().toLocaleTimeString()">学习 Vue.js</p><!--属性 v-on 事件绑定--><button @click="showInfo">按钮</button>
</template>
template中定义根节点

3.x 中一个组件可以定义多个根节点,这是与2.x不同的地方。

<!-- Layout.vue -->
<template><header>...</header><main v-bind="$attrs">...</main><footer>...</footer>
</template>

但是渲染透传的时候,单根节点组件有所不同,有着多个根节点的组件没有自动 attribute 透传行为。如果 $attrs 没有被显式绑定,将会抛出运行时警告。
https://v3-migration.vuejs.org/zh/new/fragments.html
https://cn.vuejs.org/guide/components/attrs.html#fallthrough-attributes

组件中的script节点

vue 规定:组件内的 <script> 节点是可选的,开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。 节点的基本结构如下:

<script>//组件相关的 data数据,methods方法,都需要定义到 dexport default 所导出的对象中。export default{xx :"xx"       }</script>
script中的name、data与methods
<script>
export default {name: 'HelloWorld',props: {msg: String},data() {return {count: 0}},methods:{testMethod(){this.count++}}
}
</script>

name: 通过name为当前组件定义一个名称,同时在使用vue-devtools进行项目调试的时候,自定义组件名称可以达到区分组件的效果。
data: vue组件渲染期间需要用到的数据可以定义在data节点中,组件中的data必须是函数。 data:{ count: 0 } 这种定义是错误的。
methods: 组件中的事件处理函数,必须定义到methods节点中。

组件中的style节点

vue 规定:组件内的 <style> 节点是可选的,开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。
基本结构如下:

<style lang="css" >h1 {font-weight: normal;} 
</style>

其中 <style> 标签上的 lang=“css” 属性是可选的,它表示所使用的样式语言。默认只支持普通的 css 语法,可选值还有 less、scss 等。

让 style 中支持 less 语法

如果希望使用 less 语法编写组件的 style 样式,可以按照如下两个步骤进行配置:
① 运行 npm install less -D 命令安装依赖包,从而提供 less 语法的编译支持
② 在 <style> 标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式。

组件的基本使用

组件注册

vue 中组件的引用原则:先注册后使用。

全局注册与局部注册

vue 中注册组件的方式分为“全局注册”和“局部注册”两种,其中:
⚫ 被全局注册的组件,可以在全局任何一个组件内使用
⚫ 被局部注册的组件,只能在当前注册的范围内使用

全局注册
组件内部声明

export default{name :"DEMO"       }

main.js中全局注册

import DEMO from  './components/DEMO.vue'const spa_app=createApp(App)
spa_app.component("DEMO",DEMO)//通过组件的name属性也是可以的,如下:
spa_app.component(DEMO.name,DEMO)

局部注册
组件内部通过 components局部注册:

<template><HelloWord></HelloWord>
</template>
<script>
import HelloWorld from './HelloWorld.vue';export default{name :"DEMO"    ,components:{"HelloWord":HelloWorld}   }
</script>

注册名称方式
在进行组件的注册时,定义组件注册名称的方式有两种:
① 使用 kebab-case 命名法(俗称短横线命名法,例如 my-swiper 和 my-search)
② 使用 PascalCase 命名法(俗称帕斯卡命名法或大驼峰命名法,例如 MySwiper 和 MySearch)
短横线命名法的特点:
⚫ 必须严格按照短横线名称进行使用
帕斯卡命名法的特点:
⚫ 既可以严格按照帕斯卡名称进行使用,又可以转化为短横线名称进行使用
注意:在实际开发中,推荐使用帕斯卡命名法为组件注册名称,因为它的适用性更强。

组件样式

冲突原因:
默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。导致组件
之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素
解决方法:

通过属性选择器

为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,通过中括号的属性选择器,防止组件之间的样式冲突问题,因为每个组件的id是“唯一”的。

<template><div class="container" data-v-001></div>
</template>
<style>
.container[data-v-001]{border: 1px solid red;
}
</style>
style 节点的 scoped 属性

为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题,scoped属性用来为每个组件分配唯一的属性值,并自动为当前组件的dom标签与style样式应用这个属性。

<template><div class="container"></div>
</template>
<style scoped>.container {border: 1px solid red;
}
</style>
/deep/ 样式穿透

如果给当前组件的style节点使用了scoped属性,则当前组件的属性对其子组件是不生效的。如果想要某些属性对子组件生效。则需要使用 /deep/属性透传。

<style lang="less" scoped >.title {color:blue;  //生成的类选择器为 tile.[data-v-001] , 即仅当前组件生效。
}/deep/ .title{color:red  //  生成的选择器为 [data-v-001].title,即当前组件下所有的title生效。  
}
</style>

组件的props

为了提高组件的复用性,在封装vue 组件时需要遵守如下的原则:
⚫ 组件的DOM 结构、Style 样式要尽量复用
⚫ 组件中要展示的数据,尽量由组件的使用者提供
为了方便使用者为组件提供要展示的数据,vue 组件提供了props 的概念

什么是组件的 props

props是组件的自定义属性,组件的使用者可以通过props把数据传递到子组件的内部,供子组件内部进行使用。代码如下。

变量: <my-header  :title="title"  />值: <my-header  title="自定义标题"  />

作用:父组件通过 props 向子组件传递要展示的数据。
好处:提高了组件的复用性。

在组件中声明 props

自定义一个组件的时候,将动态的数据项声明为props自定义属性

<template><div class="custom" >  {{title}}</div>
</template><script>export default {name:'MyHeader',props: { title},}

父组件传递给子组件的属性,必须在props节点声明。
更多使用:https://cn.vuejs.org/guide/components/props.html#props

Class与Style绑定

开发中会遇到动态操作元素样式的需求, 因此vue允许开发者通过v-bond指令动态修改元素class属性的值以及行内style的样式。

动态绑定HTML的class

通过三元表达式,动态为元素绑定class的类型,实现元素属性的改变,示例代码如下:

<template><h3 class="thin" :class="isItalic ? 'italic':' '">MyApp</h3><button @click="isItalic=!isItalic"> Toggle Italic</button>
</template><script>export default{data(){return { isItalic:true}}}
</script>
<style >.thin {font-weight: 200;
}
.italic{font-style: italic ;
}
</style>
以数组语法绑定HTML的class

如果元素需要动态绑定多个class的类名,可以使用数组语法格式,如下:

<template><h3 class="thin" :class="[isItalic ? 'italic':' ',isDelete ? 'delete':' ']">MyApp</h3><button @click="isItalic=!isItalic"> Toggle Italic</button><button @click="isDelete=!isDelete"> Toggle Delete</button>
</template><script>export default{data(){return { isItalic:true,isDelete:false}}}
</script>
<style >.thin {font-weight: 200;
}
.italic{font-style: italic ;
}
.delete{font-weight: 900;
}
</style>
以对象语法绑定HTML的class

使用数组语法动态绑定class会导致模板结构臃肿,可以使用对象语法进行简化。

<template><h3 class="thin" :class="demoObj">MyApp</h3><button @click="demoObj.italic = !demoObj.italic"> Toggle Italic</button><button @click="demoObj.delete = !demoObj.delete"> Toggle Delete</button>
</template><script>export default{data(){return { demoObj:{italic:true,delete:false}}}}
</script>
以对象语法绑定内联的style
<template><div :style="{color:active,fontsize: fsize + 'px','background-color': bgcolor}">对象语法绑定内联的style</div>
</template>
<script>export default {data(){return{active: 'red',fsize:30,bgcolor: 'black'}}
}
</script>

:style 支持绑定 JavaScript 对象值,对应的是 HTML 元素的 style 属性:
推荐使用 camelCase,但 :style 也支持 kebab-cased 形式的 CSS 属性 key (对应其 CSS 中的实际名称)。
还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上:
<div :style="[baseStyles, overridingStyles]"></div>

封装组件的案例

组件需求

一个标题栏

  • 允许自定义title标题
  • 允许自定义bgcolor背景色
  • 允许自定义color文本颜色
  • 位置需要在页面顶部进行fixed固定定位,且z-index等于999
用到的知识点
  • 组件的注册与封装
  • props
  • 样式绑定
实现步骤
创建组件、渲染基本结构
<template><div class="custom" :style="{ backgroundcolor: 'cbgcolor',color:  'color'}">  {{title}} </div>
</template><script>export default {name:'MyHeader',props:[  'title', 'cbgcolor', 'color' ],
}
在App组件中注册使用
<script>
import HelloWorld from './components/HelloWorld.vue'
import MyHeader from './components/MyHeader.vue'export default {name: 'App',components: {HelloWorld,MyHeader},}
</script>
通过props为组件传递数据
<my-header title="自定义title" cbgcolor='black' color="red"/>
传参方式说明

这个案例里面是定义了多个属性单独传入,多个属性时也可以定义为对象,将整个style 一传入。
如:

<template><div class="custom" :style="customStyle">  {{title}} </div>
</template><script>export default {props: {//这里参数都设置默认值customStyle: {type: Object,default: function () {return {color: 'red',backgroudColor: 'black',};},},title:{default:  "默认title"}
}

参数传入:

  data(){return {customStyle: {color: 'black',backgroudColor: 'blue',},title:"customTitle"};}

IT 内容具有时效性,未避免更新后未同步,请点击查看最新内容:Vue3-03_组件基础_上
文章首发于: http://nebofeng.com/2024/03/16/vue3-03_%e7%bb%84%e4%bb%b6%e5%9f%ba%e7%a1%80_%e4%b8%8a/

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

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

相关文章

Java八股文(Element Plus)

Java八股文のElement Plus Element Plus Element Plus 什么是Element UI 和 Element Plus&#xff1f; Element UI 和 Element Plus 是基于 Vue.js 的一套非常受欢迎的开源 UI 组件库&#xff0c;用于快速构建具有现代化设计和丰富交互效果的前端界面。 Element UI 和 Element…

固态存储是未来|浅析SSD架构的演进与创新技术-2

除了性能和容量这两个最大的诉求外&#xff0c;其他的需求已经成为SSD现场架构的核心竞争力。 一是安全性&#xff1a;随着数据安全威胁日益严重&#xff0c;SSD的安全设计成为关键&#xff0c;包括提供单芯片硬件信任根、遵循FIPS140-3安全标准以及支持一次性可编程位字段来锁…

uni app 钓鱼小游戏

最近姑娘喜欢玩那个餐厅游戏里的钓鱼 &#xff0c;经常让看广告&#xff0c;然后就点点点... 自己写个吧。小鱼的图片自己搞。 有问题自己改&#xff0c;不要私信我 <template><view class"page_main"><view class"top_linear"><v…

react-native使用FireBase实现google登陆

一、前置操作 首先下载这个包 yarn add react-native-google-signin/google-signin 二、Google cloud配置 Google Cloud 去google控制台新建一个android项目&#xff0c;这时候需要用到你自己创建的keystore的sha1值&#xff0c;然后会让你下载一个JSON文件&#xff0c;先保…

C#操作MySQL从入门到精通(4)——连接MySQL数据库

前言 我们创建好数据库、建立好数据库的表以后&#xff0c;我们就需要访问数据库了&#xff0c;比如将数据插入数据库的某张表中等一系列操作&#xff0c;在进行这些操作之前我们需要连接上数据库&#xff0c;本文就是详细讲解如何连接MySQL数据库的。 1、使用Navicat Premiu…

基于ssm+layui的图书管理系统

基于ssmlayui的图书管理系统 账户类型分为&#xff1a;管理员&#xff0c;用户管理员私有功能用户私有功能公共功能技术栈功能实现图 视频演示 账户类型分为&#xff1a;管理员&#xff0c;用户 图书管理系统主要登录账户类型为管理员账户与用户账户 管理员私有功能 账户管理…

PHP 生成图片

1.先确认是否有GD库 echo phpinfo(); // 创建一个真彩色图像 $image imagecreatetruecolor(120, 50);// 分配颜色 $bgColor imagecolorallocate($image, 255, 255, 255); // 白色背景 $textColor imagecolorallocate($image, 230, 230, 230); // 黑色文字// 填充背景 image…

Java学习笔记(12)

包 导包 Final 不能被改变的&#xff0c;修饰方法 类 变量 方法不能被重写 类不能被继承 变量&#xff0c;赋值一次&#xff0c;变成常量&#xff0c;不能再被赋值 final修饰引用数据类型&#xff0c;地址值不能变&#xff0c;里面的内容可以变 字符串是不可变的 源码中使…

ThreeJs 可视化大屏地图

效果图&#xff1a; 今天给各位提供一个可视化地图的案例和源码&#xff0c;关注下吧各位&#xff01;回复"大屏地图" 获取工程 1、案例分析&#xff1a;主要使用了UI 美工图片&#xff0c;然后获取地图的json 数据绘制图形&#xff0c;贴图使用该区域的地图纹理进行…

基于SpringBoot和Vue的宠物商城网站

目录 一、 绪论1.1 研究背景1.2 研究目的1.3 研究意义 二、相关技术2.1 Spring Boot简介2.2 Vue简介2.3 前后端分离架构概述2.4 其他技术和工具 三、需求分析3.1 功能需求3.1.1 用户模块功能需求3.1.2 商品模块功能需求3.1.3 论坛模块功能需求3.1.4 留言板模块功能需求 3.2 用户…

异常机制总结

异常的本质_调试错误 异常是什么&#xff1f; 软件程序在运行过程中&#xff0c;非常可能遇到刚刚提到的这些问题&#xff0c;我们称之为异常&#xff0c;英文是&#xff1a;Exception&#xff0c;意思是例外。遇到这些例外情况&#xff0c;或者叫异常。 伪代码说明异常机制…

会员项目定价卡css3特效

会员项目定价卡css3特效&#xff0c;源码由HTMLCSSJS组成&#xff0c;记事本打开源码文件可以进行内容文字之类的修改&#xff0c;双击html文件可以本地运行效果&#xff0c;也可以上传到服务器里面 下载地址 会员项目定价卡css3特效代码

谁将是RAG的头部玩家?

开篇 菩提修妙树&#xff0c;接引证法源&#xff0c;屠龙万仙阵&#xff0c;玉虚祭封神。 混战是国内技术圈的常态&#xff0c;在众仙跟风与追捧的大潮中&#xff0c;如何看清方向至关重要&#xff0c;决定谁最终将封神。 语言大模型(LLM)&#xff0c;多模态(MM)&#xff0c;…

代码随想录day22(1)二叉树:左叶子之和(leetcode404)

题目要求&#xff1a;计算二叉树所有左叶子之和 思路&#xff1a;本题应该满足两个条件&#xff0c;一是叶子节点&#xff0c;二是要求是左叶子。所以判断时&#xff0c;如果一个节点左孩子的左右孩子均为空&#xff0c;且其右孩子也为空&#xff0c;此节点的左孩子就为左叶子…

编程语言常识

看图区别编程语言 什么是强类型、弱类型语言&#xff1f;哪种更好&#xff1f; 强类型语言 强类型语言是一种强制类型定义的语言&#xff0c;即一旦某一个变量被定义类型&#xff0c;如果不经强制转换&#xff0c;那么它永远就是该数据类型。 在强类型语言中&#xff0c;变量的…

【Eviews实战】——时序的平稳性检验

&#x1f349;CSDN小墨&晓末:https://blog.csdn.net/jd1813346972 个人介绍: 研一&#xff5c;统计学&#xff5c;干货分享          擅长Python、Matlab、R等主流编程软件          累计十余项国家级比赛奖项&#xff0c;参与研究经费10w、40w级横向 文…

C++ 入门篇

目录 1、了解C 2、C关键字 2、命名空间 2.1 命名空间的定义 2.2 命名空间的使用 3. C输入与输出 4.缺省参数 4.1 缺省参数的概念 4.2 缺省参数的分类 5. 函数重载 5.1 函数重载的概念 5.2 C中支持函数重载的原理--名字修饰 6. 引用 6.1 引用概念 6.2 引用…

SQLiteC/C++接口详细介绍之sqlite3类(四)

快速跳转文章列表&#xff1a;SQLite—系列文章目录 上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;三&#xff09; 下一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;五&#xff09; 编写不易&#xff0c;有用的朋友点个赞或加粉一下万分感…

day05-SpringBootWeb请求响应

请求响应&#xff1a; 请求&#xff08;HttpServletRequest&#xff09;&#xff1a;获取请求数据响应&#xff08;HttpServletResponse&#xff09;&#xff1a;设置响应数据 BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xf…

Python环境安装及Selenium引入

Python环境安装 环境下载 Download Python | Python.org 环境安装 需使用管理员身份运行 查看环境是否安装成功 python --version 如果未成功则检查环境变量配置 安装 Selenium 库 pip install selenium Selenium 可以模拟用户在浏览器中的操作&#xff0c;如点击按钮、填写…