vue 从入门到入土---复习 组件基础上
目录
单页面应用程序
vite 的基本使用
组件化开发思想
vue 组件的构成
组件的基本使用
封装组件的案例
总结
单页面应用程序
1. 什么是单页面应用程序
- 单页应用的内容的改变不需要重新加载整个页面
- 获取数据也是通过 Ajax 异步获取
- 没有页面之间的跳转,不会出现“白屏现象”
- 后端专注于提供 API 接口,更易实现 API 接口的复用
- 前端专注于页面的渲染,更利于前端工程化的发展
- 路由懒加载
- 代码压缩
- CDN 加速
- 网络传输压缩
- ① 基于 vite 创建 SPA 项目
- ② 基于 vue-cli 创建 SPA 项目
vite 的基本使用
1. 创建 vite 的项目
按照顺序执行如下的命令,即可基于 vite 创建 vue 3.x 的工程化项目:
2. 梳理项目的结构
![](/assets/blank.gif)
![](/assets/blank.gif)
3. vite 项目的运行流程
在工程化的项目中 vue 要做的事情很单纯 通过 main.js 把 App.vue 渲染到 index.html 的指定区域
- ① App.vue 用来编写待渲染的模板结构
- ② index.html 中需要预留一个 el 区域
- ③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
3.1 在 App.vue 中编写模板结构
清空 App.vue 的默认内容,并书写如下的模板结构:
3.2 在 index.html 中预留 el 区域
打开 index.html 页面,确认预留了 el 区域:
3.3 在 main.js 中进行渲染
按照 vue 3.x 的标准用法,把 App.vue 中的模板内容渲染到 index.html 页面的 el 区域中:
组件化开发思想
1. 什么是组件化开发
![](/assets/blank.gif)
2. 组件化开发的好处
前端组件化开发的好处主要体现在以下两方面
- 提高了前端代码的复用性和灵活性
- 提升了开发效率和后期的可维护性
3. vue 中的组件化开发
vue 组件的构成
1. vue 组件组成结构
- template -> 组件的模板结构
- script -> 组件的 JavaScript 行为
- style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
2. 组件的 template 节点
vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中
注意:<template> 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
2.1 在 template 中使用指令
![](/assets/blank.gif)
2.2 在 template 中定义根节点
在 vue 2.x 的版本中,<template> 节点内的 DOM 结构仅支持单个
但是,在 vue 3.x 的版本中,<template> 中支持定义多个根节点
3. 组件的 script 节点
![](/assets/blank.gif)
3.1 script 中的 name 节点
可以通过 name 节点为当前组件定义一个名称
在使用 vue-devtools 进行项目调试的时候,自定义的组件名称可以清晰的区分每个组件
3.2 script 中的 data 节点
组件中的 data 必须是函数
vue 组件渲染期间需要用到的数据,可以定义在 data 节点中:
组件中的 data 必须是函数
![](/assets/blank.gif)
3.3 script 中的 methods 节点
组件中的事件处理函数,必须定义到 methods 节点中,示例代码如下:
4. 组件的 style 节点
![](/assets/blank.gif)
- ① 运行 npm install less -D 命令安装依赖包,从而提供 less 语法的编译支持
- ② 在 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式
组件的基本使用
![](/assets/blank.gif)
1.1 注册组件的两种方式
vue 中注册组件的方式分为“全局注册”和“局部注册”两种,其中:
- 被全局注册的组件,可以在全局任何一个组件内使用
- 被局部注册的组件,只能在当前注册的范围内使用
1.2 全局注册组件
1.3 使用全局注册组件
使用 app.component() 方法注册的全局组件,直接以标签的形式进行使用即可,例如:
1.4 局部注册组件
1.5 全局注册和局部注册的区别
- ① 使用 kebab-case 命名法(俗称短横线命名法,例如 my-swiper 和 my-search)
- ② 使用 PascalCase 命名法(俗称帕斯卡命名法或大驼峰命名法,例如 MySwiper 和 MySearch)
![](/assets/blank.gif)
2. 组件之间的样式冲突问题
- ① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
- ② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素
2.1 思考:如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,
2.2 style 节点的 scoped 属性
为了提高开发效率和开发体验 vue 为 style 节点提供了 scoped 属性从而防止组件之间的样式冲突
2.3 /deep/ 样式穿透
![](/assets/blank.gif)
注意:/deep/ 是 vue2.x 中实现样式穿透的方案。在 vue3.x 中推荐使用 :deep() 替代 /deep/。
3. 组件的 props
- 组件的 DOM 结构、Style 样式要尽量复用
- 组件中要展示的数据,尽量由组件的使用者提供
为了方便使用者为组件提供要展示的数据,vue 组件提供了 props 的概念。
3.1 什么是组件的 props
![](/assets/blank.gif)
![](/assets/blank.gif)
3.3 无法使用未声明的 props
如果父组件给子组件传递了未声明的 props 属性,则这些属性会被忽略,无法被子组件使用,
3.4 动态绑定 props 的值
可以使用 v-bind 属性绑定的形式,为组件动态绑定 props 的值,示例代码如下
3.5 props 的大小写命名
组件中如果使用“camelCase (驼峰命名法)”声明了 props 属性的名称,则有两种方式为其绑定属性
4. Class 与 Style 绑定
![](/assets/blank.gif)
4.3 以对象语法绑定 HTML 的 class
使用数组语法动态绑定 class 会导致模板结构臃肿的问题。此时可以使用对象语法进行简化
4.4 以对象语法绑定内联的 style
![](/assets/blank.gif)
封装组件的案例
1. 案例效果
2. 用到的知识点
- ⚫ 组件的封装与注册
- ⚫ props
- ⚫ 样式绑定
3. 整体实现步骤
- 创建 MyHeader 组件
- 渲染 MyHeader 组件的基本结构
- 在 App 组件中注册并使用 MyHeader 组件
- 通过 props 为组件传递数据
总结
vue 从入门到入土---复习 组件基础上相关推荐
- ]Kinect for Windows SDK开发入门(六):骨骼追踪基础 上
原文来自:http://www.cnblogs.com/yangecnu/archive/2012/04/06/KinectSDK_Skeleton_Tracking_Part1.html Kinec ...
- vue移动端下拉刷新组件、上拉加载组件
1.下拉刷新DropDownRefresh.vue <template> <div @touchstart="touchStart($event)" @touch ...
- Java学习路线从入门到入土
Java学习路线从入门到入土 Java学习路线从入门到入土 Java学习路线从入门到入土 简介 Java基础课程 第一阶段 第一部分:Java开发介绍 第二部分:Java数组 第三部分:Java面向对 ...
- 2023年的深度学习入门指南(10) - CUDA编程基础
2023年的深度学习入门指南(10) - CUDA编程基础 上一篇我们走马观花地看了下SIMD和GPGPU的编程.不过线条太粗了,在开发大模型时遇到问题了肯定还会晕. 所以我们还是需要深入到CUDA中 ...
- 【Vue.js 牛刀小试】:第九章 - 组件基础再探(data、props)
系列目录地址 一.基础知识概览 第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
- animation基础练习源码_用vue简单写一个音乐播放组件「附源码」
作者:vipbic 转发链接:https://segmentfault.com/a/1190000022980992 前言 上次小编也分享一个关于Vue 开发过音乐播放对项目: 基于 electron ...
- vue实战入门基础篇五:从零开始仿门户网站实例-关于我们实现
上一篇:vue实战入门基础篇四:从零开始仿门户网站实例-网站首页实现https://blog.csdn.net/m0_37631110/article/details/123045334 一.目录 第 ...
- Vue全家桶学习笔记_零基础入门到入坑:Vue篇
文章目录 前言 什么是Vue,什么又是框架 完善的准备 Vue 引入 npm 安装 cnpm镜像加速器 安装 Vue-Cli脚手架 安装 webpack 安装 webpack-cli 安装 axios ...
- vue实战入门基础篇二:从零开始仿门户网站实例-开发框架搭建
上一篇:vue实战入门基础篇一:从零开始仿门户网站实例-前期准备工作 vue实战入门基础篇二:从零开始仿门户网-2022-2-23 21:00:27 一.目录 第一篇:前期准备工作 第二篇:开发框架搭 ...
最新文章
- EZBioCloud:16S和原核基因组物种注释和新种鉴定
- python如何读写文件-Python读写文件
- win7删除计算机库文件,win7怎么将“库”从资源管理器导航栏中删除【图文】
- Pavel and Triangles(贪心)
- Some functions worth remembered in C Library (Updating)
- 批处理如何清除文本文档里面的重复行
- 10 分钟学会 5 个酷炫 Linux 命令
- (1)kendo UI使用基础介绍与问题整理——简单说明
- html中属性的作用,html的标签中 unselectable=on 属性的作用
- 【LeetCode笔记】2. 两数相加(JAVA、链表)
- Java转置_Java实现单链表的逆转置
- 进价移动加权核算体系
- 机组组合问题常用术语
- IT行业对人才的需求已经饱和了吗?
- 西南交大计算机应用基础离线作业答案,西南交大计算机应用基础1-5作业答案.doc...
- CF831A-Unimodal Array(单峰阵列)
- 华为 Eth-Trunk链路聚合
- RLC并联谐振电路分析
- 组策略 控制台登录计算机用用户,更方便的管理计算机!Windows组策略应用全攻略一...
- Java解析pmml格式机器学习模型
热门文章
- Python--元类
- Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装
- 极简主义风格的应用方式,在纽约现代美术馆的体现了,技术,思潮,思维有哪些?解读。1000字以上...
- 高仿qq聊天:qt界面
- 2017年最新黑马Python2017年就业班不加密视频教程
- 画论06 姚最《续画品》
- 利用ChatGPT快速制作PPT
- 生成此程序集的运行时比当前加载的运行时新,无法加载此程序集
- Linux中rmp安装mysql
- c语言中冒号运算符,冒号等于 - G之间的差异:=和=运算符