首页 前端知识 Vue从零到实战

Vue从零到实战

2024-07-27 22:07:36 前端知识 前端哥 787 913 我要收藏

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



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

前言

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

自定义指令

1.指令介绍

  • 内置指令:v-html、v-if、v-bind、v-on... 这都是Vue给咱们内置的一些指令,可以直接使用

  • 自定义指令:同时Vue也支持让开发者,自己注册一些指令。这些指令被称为自定义指令

    每个指令都有自己各自独立的功能

2.自定义指令

概念:自己定义的指令,可以封装一些DOM操作,扩展额外的功能

3.自定义指令语法

  • 全局注册

//在main.js中
Vue.directive('指令名', {
  "inserted" (el) {
    // 可以对 el 标签,扩展额外功能
    el.focus()
  }
})

局部注册

//在Vue组件的配置项中
directives: {  
"指令名": {  
  inserted () {  
    // 可以对 el 标签,扩展额外功能   
   el.focus()    }  }}
  • 使用指令

    注意:在使用指令的时候,一定要先注册再使用,否则会报错 使用指令语法: v-指令名。如:<input type="text" v-focus/>

    注册指令时不用v-前缀,但使用时一定要加v-前缀

4.指令中的配置项介绍

inserted:被绑定元素插入父节点时调用的钩子函数

el:使用指令的那个DOM元素

自定义指令-指令的值

1.需求

实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

2.语法

1.在绑定指令时,可以通过“等号”的形式为指令 绑定 具体的参数值

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值,指令值修改会 触发 update 函数

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

v-loading指令的封装

1.场景

实际开发过程中,发送请求需要时间,在请求的数据未回来时,页面会处于空白状态 => 用户体验不好

2.需求

封装一个 v-loading 指令,实现加载中的效果

3.分析

1.本质 loading效果就是一个蒙层,盖在了盒子上

2.数据请求中,开启loading状态,添加蒙层

3.数据请求完毕,关闭loading状态,移除蒙层

4.实现

1.准备一个 loading类,通过伪元素定位,设置宽高,实现蒙层

2.开启关闭 loading状态(添加移除蒙层),本质只需要添加移除类即可

3.结合自定义指令的语法进行封装复用

插槽-默认插槽

1.作用

让组件内部的一些 结构 支持 自定义

2.需求

将需要多次显示的对话框,封装成一个组件

3.问题

组件的内容部分,不希望写死,希望能使用的时候自定义。怎么办

4.插槽的基本语法

  1. 组件内需要定制的结构部分,改用<slot></slot>占位

  2. 使用组件时, <MyDialog></MyDialog>标签内部, 传入结构替换slot

  3. 给插槽传入内容时,可以传入纯文本、html标签、组件

插槽-后备内容(默认值)

1.问题

通过插槽完成了内容的定制,传什么显示什么, 但是如果不传,则是空白

2.插槽的后备内容

封装组件时,可以为预留的 <slot> 插槽提供后备内容(默认内容)。

3.语法

在 <slot> 标签内,放置内容, 作为默认显示内容

4.效果

外部使用组件时,不传东西,则slot会显示后备内容

外部使用组件时,传东西了,则slot整体会被换掉

插槽-具名插槽

1.需求

一个组件内有多处结构,需要外部传入标签,进行定制

上面的弹框中有三处不同,但是默认插槽只能定制一个位置,这时候怎么办呢?

2.具名插槽语法

  • 多个slot使用name属性区分名字

template配合v-slot:名字来分发对应标签

3.v-slot的简写

v-slot写起来太长,vue给我们提供一个简单写法 v-slot —> #

作用域插槽

1.插槽分类

  • 默认插槽

  • 具名插槽

    插槽只有两种,作用域插槽不属于插槽的一种分类

2.作用

定义slot 插槽的同时, 是可以传值的。给 插槽 上可以 绑定数据,将来 使用组件时可以用

3.场景

封装表格组件

4.使用步骤

  1. 给 slot 标签, 以 添加属性的方式传值

    <slot :id="item.id" msg="测试文本"></slot>

  2. 所有添加的属性, 都会被收集到一个对象中

    { id: 3, msg: '测试文本' }

  3. 在template中, 通过 #插槽名= "obj" 接收,默认插槽名为 default

    <MyTable :list="list">
      <template #default="obj">
        <button @click="del(obj.id)">删除</button>
      </template>
    </MyTable>

单页应用程序介绍

1.概念

单页应用程序:SPA【Single Page Application】是指所有的功能都在一个html页面上实现

2.具体示例

单页应用网站: 网易云音乐

多页应用网站:京东

3.单页应用 VS 多页面应用

单页应用类网站:系统类网站 / 内部网站 / 文档类网站 / 移动端站点

多页应用类网站:公司官网 / 电商类网站

路由的基本使用

作用

修改地址栏路径时,切换显示匹配的组件

VueRouter的使用

  1. 下载 VueRouter 模块到当前工程,版本3.6.5

    yarn add vue-router@3.6.5   /    npm install vue-router@3.6.5

  2. main.js中引入VueRouter

    import VueRouter from 'vue-router'

  3. 安装注册

    Vue.use(VueRouter)

  4. 创建路由对象

    const router = new VueRouter()

  5. 注入,将路由对象注入到new Vue实例中,建立关联

    new Vue({
      render: h => h(App),
      router:router
    }).$mount('#app')

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

两个核心步骤

  1. 创建需要的组件 (views目录),配置路由规则

配置导航,配置路由出口(路径匹配的组件显示的位置)

App.vue

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>
</div>

组件的存放目录问题

注意: .vue文件 本质无区别

1.组件分类

.vue文件分为2类,都是 .vue文件(本质无区别)

  • 页面组件 (配置路由规则时使用的组件)

  • 复用组件(多个组件中都使用到的组件)

2.存放目录

分类开来的目的就是为了 更易维护

  1. src/views文件夹

    页面组件 - 页面展示 - 配合路由用

  2. src/components文件夹

    复用组件 - 展示数据 - 常用于复用

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14374.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!