Vue从零到实战基础篇

  💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。



非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Vue的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目，希望广大网友一起监督学习，互相进步!

项目目录介绍和运行流程

运行流程

组件化开发

组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

好处：便于维护，利于复用 → 提升开发效率。

组件分类：普通组件、根组件。

比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

根组件 App.vue

1.根组件介绍

整个应用最上层的组件，包裹所有普通小组件

2.组件是由三部分构成

  • 三部分构成

    • template：结构 （有且只能一个根元素）

    • script: js逻辑

    • style： 样式 (可支持less，需要装包)

  • 让组件支持less

    （1） style标签，lang="less" 开启less功能

    （2） 装包: yarn add less less-loader -D 或者npm i less less-loader -D

普通组件的注册使用-局部注册

1.特点：

只能在注册的组件内使用

2.步骤：

  1. 创建.vue文件（三个组成部分）

  2. 在使用的组件内先导入再注册，最后使用

3.使用方式：

当成html标签使用即可 <组件名></组件名>

4.注意：

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法：

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'export default {  // 局部注册components: {'组件名': 组件对象,HmHeader:HmHeaer,HmHeader}
}

普通组件的注册使用-全局注册

1.特点：

全局注册的组件，在项目的任何组件中都能使用

2.步骤

  1. 创建.vue组件（三个组成部分）

  2. main.js中进行全局注册

3.使用方式

当成HTML标签直接使用

<组件名></组件名>

4.注意

组件名规范 —> 大驼峰命名法， 如 HmHeader

5.语法

Vue.component('组件名', 组件对象)  注意:这里的component没有s

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

scoped解决样式冲突

1.默认情况：

写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

  1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

  1. 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件

2.代码演示

BaseOne.vue

<template><div class="base-one">BaseOne</div>
</template><script>
export default {}
</script>
<style scoped>
</style>

BaseTwo.vue

<template><div class="base-one">BaseTwo</div>
</template><script>
export default {}
</script><style scoped>
</style>

App.vue

<template><div id="app"><BaseOne></BaseOne><BaseTwo></BaseTwo></div>
</template><script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {name: 'App',components: {BaseOne,BaseTwo}
}
</script>

3.scoped原理

  1. 当前组件内标签都被添加data-v-hash值 的属性

  2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

data必须是一个函数

data为什么要写成函数

一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。

组件通信

1.什么是组件通信？

组件通信，就是指组件与组件之间的数据传递

  • 组件的数据是独立的，无法直接访问其他组件的数据。

  • 想使用其他组件的数据，就需要组件通信

2.组件之间如何通信

3.组件关系分类

  1. 父子关系

  2. 非父子关系

4.通信解决方案

5.父子通信流程

  1. 父组件通过 props 将数据传递给子组件

  2. 子组件利用 $emit 通知父组件修改更新

6.父向子通信代码示例

父组件通过props将数据传递给子组件

父组件App.vue

<template><div class="app" style="border: 3px solid #000; margin: 10px">我是APP组件 <Son></Son></div>
</template><script>
import Son from './components/Son.vue'
export default {name: 'App',data() {return {myTitle: '学前端，就来黑马程序员',}},components: {Son,},
}
</script><style>
</style>

子组件Son.vue

<template><div class="son" style="border:3px solid #000;margin:10px">我是Son组件</div>
</template><script>
export default {name: 'Son-Child',
}
</script><style></style>

父向子传值步骤

  1. 给子组件以添加属性的方式传值

  2. 子组件内部通过props接收

  3. 模板中直接使用 props接收的值

7.子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

  1. $emit触发事件，给父组件发送消息通知

  2. 父组件监听$emit触发的事件

  3. 提供处理函数，在函数的性参中获取传过来的参数

什么是props

1.Props 定义

组件上 注册的一些 自定义属性

2.Props 作用

向子组件传递数据

3.特点

  1. 可以 传递 任意数量 的prop

  2. 可以 传递 任意类型 的prop

props校验

作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

语法

  • 类型校验

  • 非空校验

  • 默认值

  • 自定义校验

props校验完整写法

1.语法

props: {校验的属性名: {type: 类型,  // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}}
},

2.代码实例

<script>
export default {// 完整写法（类型、默认值、非空、自定义校验）props: {w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val >= 100 || val <= 0) {console.error('传入的范围必须是0-100之间')return false} else {return true}},},},
}
</script>

3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

props&data、单向数据流

1.共同点

都可以给组件提供数据

2.区别

  • data 的数据是自己的 → 随便改

  • prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

3.单向数据流：

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

非父子通信-event bus 事件总线

1.作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

2.步骤

  1. 创建一个都能访问的事件总线 （空Vue实例）

import Vue from 'vue'
const Bus = new Vue()
export default Bus

2. A组件（接受方），监听Bus的 $on事件

created () {Bus.$on('sendMsg', (msg) => {this.msg = msg})
}

B组件（发送方），触发Bus的$emit事件

Bus.$emit('sendMsg', '这是一个消息')

非父子通信-provide&inject

1.作用

跨层级共享数据

2.场景

3.语法

  1. 父组件 provide提供数据

export default {provide () {return {// 普通类型【非响应式】color: this.color, // 复杂类型【响应式】userInfo: this.userInfo, }}
}

2.子/孙组件 inject获取数据

export default {  
inject: ['color','userInfo'],  
created () 
{    console.log(this.color, this.userInfo) }
}

4.注意

  • provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）

  • 子/孙组件通过inject获取的数据，不能在自身组件内修改

v-model原理

1.原理：

v-model本质上是一个语法糖。例如应用在输入框上，就是value属性 和 input事件 的合写

<template><div id="app" ><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text"></div>
</template>

2.作用：

提供数据的双向绑定

  • 数据变，视图跟着变 :value

  • 视图变，数据跟着变 @input

3.注意

$event 用于在模板中，获取事件的形参

v-model使用在其他表单元素上的原理

不同的表单元素， v-model在底层的处理机制是不一样的。比如给checkbox使用v-model

底层处理的是 checked属性和change事件。

不过咱们只需要掌握应用在文本框上的原理即可

表单类组件封装

1.需求目标

实现子组件和父组件数据的双向绑定 （实现App.vue中的selectId和子组件选中的数据进行双向绑定）

2.代码演示

App.vue

<template><div class="app"><BaseSelect></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},
}
</script><style>
</style>

BaseSelect.vue

<template><div><select><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {
}
</script><style>
</style>

v-model简化代码

1.目标：

父组件通过v-model 简化代码，实现子组件和父组件数据 双向绑定

2.如何简化：

v-model其实就是 :value和@input事件的简写

  • 子组件：props通过value接收数据，事件触发 input

  • 父组件：v-model直接绑定数据

3.代码示例

子组件

<select :value="value" @change="handleChange">...</select>
props: {value: String
},
methods: {handleChange (e) {this.$emit('input', e.target.value)}
}

父组件

<BaseSelect v-model="selectId"></BaseSelect>

.sync修饰符

1.作用

可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

简单理解：子组件可以修改父组件传过来的props值

2.场景

封装弹框类的基础组件， visible属性 true显示 false隐藏

3.本质

.sync修饰符 就是 :属性名 和 @update:属性名 合写

4.语法

父组件

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog :visible="isShow" @update:visible="isShow = $event" 
/>

子组件

props: {visible: Boolean
},this.$emit('update:visible', false)

ref和$refs

1.作用

利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例

2.特点：

查找范围 → 当前组件内(更精确稳定)

3.语法

1.给要获取的盒子添加ref属性

<div ref="chartRef">我是渲染图表的容器</div>

2.获取时通过 $refs获取 this.$refs.chartRef 获取

mounted () {console.log(this.$refs.chartRef)
}

4.注意

之前只用document.querySelect('.box') 获取的是整个页面中的盒子

异步更新 & $nextTick

1.需求

编辑标题, 编辑框自动聚焦

  1. 点击编辑，显示编辑框

  2. 让编辑框，立刻获取焦点

2.代码实现

<template><div class="app"><div v-if="isShowEdit"><input type="text" v-model="editValue" ref="inp" /><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="editFn">编辑</button></div></div>
</template><script>
export default {data() {return {title: '大标题',isShowEdit: false,editValue: '',}},methods: {editFn() {// 显示输入框this.isShowEdit = true  // 获取焦点this.$refs.inp.focus() }  },
}
</script>

3.问题

"显示之后"，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM (提升性能)

4.解决方案

"显示之后"，立刻获取焦点是不能成功的！

原因：Vue 是异步更新DOM (提升性能)

this.$nextTick(() => {this.$refs.inp.focus()
})

注意：$nextTick 内的函数体 一定是箭头函数，这样才能让函数内部的this指向Vue实例

总结:

本篇博客讲解了以下的知识点:

1.组件的三大组成部分（结构/样式/逻辑）

scoped解决样式冲突/data是一个函数

2.组件通信

  1. 组件通信语法

  2. 父传子

  3. 子传父

  4. 非父子通信（扩展）

3.进阶语法

  1. v-model原理

  2. v-model应用于组件

  3. sync修饰符

  4. ref和$refs

  5. $nextTick

❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍

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

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

C语言丢失精度 如何实现高精度计算

C语言丢失精度 如何实现高精度计算

&#xff08;1&#xff09;int 类型举例 int &#xff1a;占4个字节&#xff0c;也就是32位&#xff0c;及最大值是2^32-11024*1024*1024*4-14294967295 以上说法错误&#xff0c;因为Int是有符号类型整数&#xff0c;所以最高位是符号位&#xff0c;及int的最大值应该是2^31…
阅读更多...
spring是如何解决循环依赖的，为什么不是两级

spring是如何解决循环依赖的，为什么不是两级

1. Spring使用三级缓存来解决循环依赖问题 Spring使用三级缓存来解决循环依赖问题&#xff0c;‌而不是使用两级缓存。‌ 在Spring框架中&#xff0c;‌解决循环依赖的关键在于正确地管理Bean的生命周期和依赖关系。‌循环依赖指的是两个或多个Bean相互依赖&#xff0c;‌如果…
阅读更多...
VC运营指南：提升亚马逊VC账户销量的策略——WAYLI威利跨境助力商家

VC运营指南：提升亚马逊VC账户销量的策略——WAYLI威利跨境助力商家

亚马逊VC作为供应商中心账户&#xff0c;其运营策略与普通的第三方卖家账户有所不同。想要在此平台上取得卓越的销售业绩&#xff0c;需要深入理解和运用一系列策略。 1、产品策略是基石 深入市场研究&#xff0c;了解消费者的真实需求&#xff0c;是选择产品的关键。只有选对…
阅读更多...
vue echarts 柱状图表，点击柱子，路由代参数（X轴坐标）跳转

vue echarts 柱状图表，点击柱子，路由代参数（X轴坐标）跳转

一 myChart.on(click, (params) > {if (params.componentType series && params.dataIndex ! undefined) {const months this.month_htqd[params.dataIndex]; // 获取点击柱状图的 X 轴坐标值alert(点击了柱状图&#xff0c;值为: ${months});// 根据点击的柱状图…
阅读更多...
7.SpringBoot整合Neo4j

7.SpringBoot整合Neo4j

1.引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-neo4j</artifactId> </dependency> 说明&#xff1a;这里引入neo4j的版本跟spring框架的版本有关系。需要注意不同的版本在neo…
阅读更多...
poi库简单使用（java如何实现动态替换模板Word内容）

poi库简单使用（java如何实现动态替换模板Word内容）

目录 Blue留言&#xff1a; Blue的推荐&#xff1a; 什么是poi库&#xff1f; 实现动态替换 第一步&#xff1a;依赖 第二步&#xff1a;实现word模板中替换文字 模板word&#xff1a; 通过以下代码&#xff1a;&#xff08;自己建一个类&#xff0c;随意取名&#xf…
阅读更多...
Qt 制作安装包

Qt 制作安装包

记录使用Qt工具制作一个安装包的过程 目录 1.准备工作 1.1检查Qt Installer Frameworks是否安装 1.2.安装Qt Installer Frameworks 1.3准备release出来的exe dll等文件 2.创建打包工程所需要的文件及目录 2.1创建子目录 2.2 创建工程文件 2.3 创建config/config.xml …
阅读更多...
C语言 ——— 打印水仙花数

C语言 ——— 打印水仙花数

目录 何为水仙花数 题目要求 代码实现 何为水仙花数 “水仙花数”是指一个n位数&#xff0c;其各位数字的n次方之和等于该数本身 如&#xff1a;153 1^3 5^3 3^3&#xff0c;则153就是一个“水仙花数” 题目要求 求出0~100000的所有“水仙花数”并输出 代码实现 #i…
阅读更多...
华为机试HJ97记负均正

华为机试HJ97记负均正

华为机试HJ97记负均正 题目&#xff1a; 想法&#xff1a; 遍历输入的列表&#xff0c;记录所有负数的个数&#xff0c;记录所有正数的个数&#xff0c;并累加所有正数&#xff0c;最终获得所有负数的个数和正数的平均值 input_number input() input_number_list input().…
阅读更多...
华为od机试真题 — 分披萨(Python)

华为od机试真题 — 分披萨(Python)

题目描述 “吃货”和“馋嘴”两人到披萨店点了一份铁盘(圆形)披萨&#xff0c;并嘱咐店员将披萨按放射状切成大小相同的偶数个小块。 但是粗心服务员将披萨切成了每块大小都完全不同奇数块&#xff0c;且肉眼能分辨出大小。 由于两人都想吃到最多的披萨&#xff0c;他们商量…
阅读更多...
QT5:简单显示百度页面

QT5:简单显示百度页面

目录 前言 一、环境 二、实现过程 1.引入模块 2.环境构建 三、代码示例 总结 参考博客 前言 使用qt5 QT WebEngine 模块实现在Designer 上展示百度页面。 一、环境 qt版本&#xff1a;5.12.7 windows 11 下的 Qt Designer &#xff08;已搭建&#xff09; 编译器&a…
阅读更多...
达梦数据库DM8-索引篇

达梦数据库DM8-索引篇

目录 一、前景二、名词三、语法1、命令方式创建索引1.1 创建索引空间1.2.1 创建普通索引并指定索引数据空间1.2.2 另一种没验证&#xff0c;官方写法1.3 复合索引1.4 唯一索引1.5 位图索引1.6 函数索引 2、创建表时候创建索引3、可视化方式创建索引3.1 打开DM管理工具3.2 找到要…
阅读更多...
Java IO流（详解）

Java IO流（详解）

目录 1.概述 2.File文件类 2.1 文件的创建操作 2.2 文件的查找操作 3. File里面一些其他方法 3.1 经典案例 4. IO流 4.1 概念 4.2 IO分类 4.3 字节输出流 4.4 字节输入流 4.5 案例 4.6 字符输出流 4.7 字符输入流 4.8 案例 4.9 处理流--缓冲流 4.10 对象流: 1.…
阅读更多...
源代码加密软件哪家好？2024八款源代码加密软件排行榜

源代码加密软件哪家好？2024八款源代码加密软件排行榜

源代码加密软件哪家好&#xff1f;2024八款源代码加密软件排行榜 在数字化时代&#xff0c;源代码作为软件开发的生命线&#xff0c;其安全性对于企业来说至关重要。源代码加密软件是保护这一宝贵资产的有力工具&#xff0c;它们通过加密技术防止源代码被非法访问、复制或修改…
阅读更多...
人、智能、机器人……

人、智能、机器人……

在遥远的未来之城&#xff0c;智能时代如同晨曦般照亮了每一个角落&#xff0c;万物互联&#xff0c;机器智能与人类智慧交织成一幅前所未有的图景。这座城市&#xff0c;既是科技的盛宴&#xff0c;也是人性与情感深刻反思的舞台。 寓言&#xff1a;《智光与心影》 在智能之…
阅读更多...
字节面试：如何让单机下Netty支持百万长连接？

字节面试：如何让单机下Netty支持百万长连接？

最近有同学在面试遇到了一道非常有深度的面试题&#xff1a; 如何让单机下Netty支持百万长连接&#xff1f; 当时在群里问小北&#xff0c;我发现我也没有系统化的梳理过这个问题&#xff0c;所以一时也没有回答的特别好。 痛定思痛的我赶紧去各种搜集资料&#xff0c;系统化的…
阅读更多...
(三)原生js案例之滚动到底部解锁按钮状态

(三)原生js案例之滚动到底部解锁按钮状态

业务主要是注册页面&#xff0c;有很长的条款需要用户去读&#xff0c;必须确认用户是不是看到全部的条款&#xff0c;这个场景下可以使用 效果 代码实现 必要的css <style>*{padding: 0;margin: 0;}ul{list-style: none;width: 330px;height: 100%;/* height: 200px;…
阅读更多...
kotlin compose 实现应用内多语言切换（不重新打开App）

kotlin compose 实现应用内多语言切换（不重新打开App）

1. 示例图 2.具体实现 如何实现上述示例，且不需要重新打开App ①自定义 MainApplication 实现 Application ，定义两个变量： class MainApplication : Application() { object GlobalDpData { var language: String = "" var defaultLanguage: Strin…
阅读更多...
DA-SVM多变量分类预测|蜻蜓优化算法-支持向量机|Matalb

DA-SVM多变量分类预测|蜻蜓优化算法-支持向量机|Matalb

目录 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 亮点与优势&#xff1a; 二、实际运行效果&#xff1a; 三、原理介绍&#xff1a; 四、完整程序下载&#xff1a; 一、程序及算法内容介绍&#xff1a; 基本内容&#xff1a; 本代码基于Matlab平台编译&a…
阅读更多...
【LeetCode】十四、回溯法：括号生成 + 子集

【LeetCode】十四、回溯法：括号生成 + 子集

文章目录 1、回溯法2、leetcode22&#xff1a;括号生成3、leetcode78&#xff1a;子集 1、回溯法 使用场景&#xff0c;如找[1&#xff0c;2&#xff0c;3]的所有子集&#xff1a; 2、leetcode22&#xff1a;括号生成 以n2为例&#xff0c;即两个左括号、两个右括号&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023