【前端51_Vue】重学 Vue 之基础复习(二):过渡动画、复用性:过滤器、自定义指令、虚拟DOM、函数式组件、混入、插件

本文主要是介绍【前端51_Vue】重学 Vue 之基础复习(二):过渡动画、复用性:过滤器、自定义指令、虚拟DOM、函数式组件、混入、插件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 前言
    • Vue 中的 过渡 & 动画
      • transition 组件
      • 使用 Animated.css 动画库
      • JavaScript 钩子
      • 过渡组
    • 过滤器
    • 自定义指令
    • 渲染函数
      • createElement() & h()
        • 例子1:根据渲染函数创建 h2 标签
        • 例子2:根据渲染函数创建可绑定图标的组件
      • this.$slots.default
    • 函数式组件
    • 混入
    • 插件
      • 定义 & 使用
      • 优点
      • 使用案例
    • 最后


前言

呜呜呜,因为疫情原因,小区封了,我只能在家办公了,情况是这样的,心里还是不爽啊,因为来的太突然,都没有时间屯粮,朋友还说为啥没有屯粮?我听到这个真的很恼火,谁又知道这么突然呢,大超市关门了,小超市东西都卖没了,是我不想屯吗?发生事情我需要的是安慰,不是责备。

第一天我连饭都不能按时吃到,饿的难受,学习了,忙的忘记吃饭吧。


Vue 中的 过渡 & 动画

有以下几个方式去添加过渡 & 动画:

  • CSS 过渡和动画中自动应用 class
  • 可以配合使用第三方 CSS 动画库,如 Animate.css
  • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
  • 可以配合使用第三方 JavaScript 动画库,如 Velocity.js

transition 组件

Vue 中的动画组件详细说明

官方的说明如下:

当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理:

  • 自动嗅探目标元素是否应用了 CSS 过渡或动画,如果是,在恰当的时机添加/删除 CSS 类名。
  • 如果过渡组件提供了 JavaScript 钩子函数,这些钩子函数将在恰当的时机被调用。

如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画,DOM 操作 (插入/删除) 在下一帧中立即执行。(注意:此指浏览器逐帧动画机制,和 VuenextTick 概念不同)

请添加图片描述
在这里插入图片描述

效果如下:

请添加图片描述

使用 Animated.css 动画库

animate.css 的 demo

在这里插入图片描述
演示结果如下:

请添加图片描述

JavaScript 钩子

官方的解释

那我就直接拿官方的纯 JS 例子吧

在这里插入图片描述

请添加图片描述

过渡组

还是拿官网上的例子,这例子写的太棒了

列表的进入/离开过渡

在这里插入图片描述

请添加图片描述


过滤器

处理一些字符串比较好用

来张图吧
在这里插入图片描述

自定义指令

官网例子

像什么 v-forv-bindvue 定义好了的指令,如果我们也想写一个类似形式的指令呢?

Vue 想到了这一点,让你自定义指令,可以通过 Vue.directive() 来实现。

注意:在命名的时候是不需要加 v-
在这里插入图片描述

渲染函数

可以通过 render() 函数来渲染 VNode

createElement() & h()

render() 函数 默认接收一个形参函数:createElement,而我们习惯写成 h ,所以你可以理解成 h就是 createElement ,以下下统称为 h 函数

h 函数执行后,会返回个 VNode 类型的对象,我们称之为虚拟节点

h 函数的由来:有个算法叫 snabb dom ,这里的创建元素用的就是 h() 函数

例子1:根据渲染函数创建 h2 标签

在这里我们用 h 函数,动态创建个 h2 标签h 几 是由 level 来控制的。
在这里插入图片描述

代码执行后

在这里插入图片描述

例子2:根据渲染函数创建可绑定图标的组件
// 我想这样使用啊:
<heading :level="2" icon="cardboard">干什么</heading>

实现的代码截图如下:
在这里插入图片描述
实现的样式如下:

在这里插入图片描述
部分代码如下:

// 使用
<div id="app"><heading :level="2" icon="cardboard">干什么</heading>
</div>// render 函数
render(h) {const children = [];children.push(h('svg',{class: 'icon',},[h('use', {attrs: {'xlink:href': `#icon-${this.icon}`,},}),]));const VNode = h('h' + this.level,{ attrs: { title: this.title } }, // 第二个参数会放到 VNode 的 data 属性中[...children, ...this.$slots.default]);console.log(VNode);return VNode;
},

this.$slots.default

这个相当于标签里的所有内容,举个例子

在这里插入图片描述

函数式组件

官网的说明内容在这里

组件没有管理任何状态,也没有监听任何传递给它的状态,也没有生命周期方法时,可以将组件标记为 functional ,这意味它无状态 (没有响应式数据),也没有实例 (没有 this 上下文)。

我们把上面的例子组件改成函数式组件

在这里插入图片描述

混入

这也算是比较好用的提高可复用性的方法了
请添加图片描述

对于混用变量与组件中的变量的优先级实践,官网上的例子,Vue 会优先保证组件中的变量不会被顶替

在这里插入图片描述


插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器,第二个参数是一 个可选的选项对象

定义 & 使用

大概有以下几个方法:

MyPlugin.install = function (Vue, options) {// 1. 添加全局方法或属性Vue.myGlobalMethod = function () {};// 2. 添加全局资源Vue.directive('my-directive', {});// 3. 注入组件选项Vue.mixin({created: function () {// 逻辑...},});// 4. 添加实例方法Vue.prototype.$myMethod = function (methodOptions) {};
};

我这里把上面写过的组件直接拿来用了,写了个插件

具体使用

在这里插入图片描述
也可以自动注册组件:

// 浏览器环境,自动注册插件
// if (typeof window !== 'undefined' && window.Vue) {
//   // 使用插件
//   window.Vue.use(MyPlugin);
// }

优点

插件的优点

  • 利于分发,无论是 git 还是 npm,就是以后让别人用

使用案例

这里举个例子,把上面的例子做成插件

在这里插入图片描述

使用后页面如下:
在这里插入图片描述

最后

有写的不好的地方,还望见谅,请在评论区里指出,或者私信我,感谢。

请添加图片描述

这篇关于【前端51_Vue】重学 Vue 之基础复习(二):过渡动画、复用性:过滤器、自定义指令、虚拟DOM、函数式组件、混入、插件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/976058

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Kotlin 作用域函数apply、let、run、with、also使用指南

《Kotlin作用域函数apply、let、run、with、also使用指南》在Kotlin开发中,作用域函数(ScopeFunctions)是一组能让代码更简洁、更函数式的高阶函数,本文将... 目录一、引言:为什么需要作用域函数?二、作用域函China编程数详解1. apply:对象配置的 “流式构建器”最

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Spring Boot3虚拟线程的使用步骤详解

《SpringBoot3虚拟线程的使用步骤详解》虚拟线程是Java19中引入的一个新特性,旨在通过简化线程管理来提升应用程序的并发性能,:本文主要介绍SpringBoot3虚拟线程的使用步骤,... 目录问题根源分析解决方案验证验证实验实验1:未启用keep-alive实验2:启用keep-alive扩展建

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

Android Kotlin 高阶函数详解及其在协程中的应用小结

《AndroidKotlin高阶函数详解及其在协程中的应用小结》高阶函数是Kotlin中的一个重要特性,它能够将函数作为一等公民(First-ClassCitizen),使得代码更加简洁、灵活和可... 目录1. 引言2. 什么是高阶函数?3. 高阶函数的基础用法3.1 传递函数作为参数3.2 Lambda

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各