![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
荒糖落
这个作者很懒,什么都没留下…
展开
-
vue中列表的过渡——点击增加效果
文章目录前言一、transition-group二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、transition-grouptransition-group标签相当于在每一个标签上添加transition这个动画标签,可用于列表的循环输出二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti原创 2021-06-05 17:19:04 · 216 阅读 · 0 评论 -
vue多个元素或组件的过渡——点击切换效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、动态组件二、使用步骤总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、动态组件将相互切换关联的组件整合二、使用步骤代码如下(示例):<!DOCTYPE html><html> <head> &l原创 2021-06-05 17:13:09 · 326 阅读 · 0 评论 -
vue中js动画和velocity.js的结合
文章目录前言一、pandas是什么?二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、pandas是什么?官网:http://velocityjs.org/ ,下载后引入二、使用步骤1.引入库代码如下(示例): <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link hre原创 2021-06-05 17:03:14 · 101 阅读 · 0 评论 -
vue中同时使用过渡和动画
文章目录前言一、vue中同时使用过渡和动画二、使用步骤总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、vue中同时使用过渡和动画二、使用步骤代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript"原创 2021-06-05 16:50:09 · 115 阅读 · 0 评论 -
vue中使用animate.css库
文章目录前言一、animate.css库二、使用步骤总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、animate.css库示例:官网http://www.animate.net.cn/ ,下载后直接引用二、使用步骤代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script s原创 2021-06-05 16:40:38 · 138 阅读 · 0 评论 -
vue中css动画原理
文章目录前言一、动画效果二、使用步骤总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、动画效果vue的css动画效果二、使用步骤代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <ti原创 2021-06-05 16:36:11 · 108 阅读 · 0 评论 -
动态组件和v-once指令——一个点击切换的按钮效果
文章目录前言一、v-once和动态组件二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、v-once和动态组件v-once属性可以把数据放到内存而不是销毁,需要用到再拿出来,优化性能vue自带的指的就是动态标签,会根据is里面数据的变化自动加载不同数据二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> &原创 2021-06-05 11:54:20 · 128 阅读 · 0 评论 -
vue作用域插槽(子传父)——slot-scope
文章目录前言一、slot-scope二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、slot-scope作用域插槽,父组件调用子组件时,直接引用组件插入,再进行实际需要的样式渲染二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>slot</title> </原创 2021-06-05 11:44:33 · 534 阅读 · 0 评论 -
vue中使用插槽(父传子)——slot
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、slot二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、slot示例:可以往子组件里面相互传递和使用内容二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>slot</title>原创 2021-06-05 11:16:36 · 856 阅读 · 0 评论 -
非父子组件间传值——Bus/总线机制
文章目录前言一、二、使用步骤1.引入库总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):总结提示:这里对文章进行总结:例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使原创 2021-06-05 10:57:50 · 164 阅读 · 0 评论 -
组件参数校验与非props特性
文章目录前言一、props和content二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、props和contentprops特性是接收父组件传来的内容,非props特性无法使用父传来的内容示例:二、使用步骤1.引入库代码如下(示例):<!doctype html><html> <head> <meta charset="utf-8"> <title></title>原创 2021-06-04 17:52:33 · 64 阅读 · 0 评论 -
父子组件相互传值——一个计算器的效果
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、props,$emit和:组件名和@组件名二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、props,$emit和:组件名和@组件名示例:二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title><原创 2021-06-04 17:41:01 · 209 阅读 · 0 评论 -
vue引用方法ref和一个计算器效果
文章目录前言一、ref和table的特性is的用法二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、ref和table的特性is的用法ref可以引用dom,由于table的特性,is用法用来代指组件示例:二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title&g原创 2021-06-04 16:57:41 · 107 阅读 · 0 评论 -
vue列表渲染
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一,数组,对象的循环二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一,数组,对象的循环示例:二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head>原创 2021-06-04 15:19:41 · 60 阅读 · 0 评论 -
vue条件渲染——v-if和v-else,v-show和key值
文章目录前言一、v-if,v-else,v-show和key值二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、v-if,v-else,v-show和key值前三者都属于条件判断,key值会让标签成为唯一,不会被复用二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></.原创 2021-06-04 11:54:44 · 398 阅读 · 0 评论 -
vue样式的绑定——增加class事件写法和判断
文章目录一、:class="{activeted: isActiveted}"二、使用步骤1.引入库总结提示:以下是本篇文章正文内容,下面案例可供参考一、:class="{activeted: isActiveted}"class的对象绑定,div上面要有一个class,class名字是activeted,显示不显示取决于isActiveted这个变量-示例:二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head&g原创 2021-06-04 11:00:59 · 643 阅读 · 0 评论 -
计算属性setter和getter
文章目录一、计算属性setter和getter二、使用步骤1.引入库总结提示:以下是本篇文章正文内容,下面案例可供参考一、计算属性setter和getter示例:二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <原创 2021-06-04 10:04:21 · 142 阅读 · 0 评论 -
计算属性computed,侦听器watch,方法methods
文章目录一、计算属性computed,侦听器watch,方法methods二、使用步骤1.引入库总结提示:以下是本篇文章正文内容,下面案例可供参考一、计算属性computed,侦听器watch,方法methods示例:二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </hea.原创 2021-06-04 09:54:01 · 85 阅读 · 0 评论 -
vue实例生命周期钩子
文章目录前言一、生命周期钩子二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、生命周期钩子vue特殊钩子触发事件二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="ap原创 2021-06-04 00:45:24 · 66 阅读 · 0 评论 -
子组件向父组件传值——tudolist点击删除
文章目录前言一、效果二、使用步骤1.引入库总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、效果点击子组件,父组件内容效果二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2021-06-03 19:49:29 · 217 阅读 · 0 评论 -
父组件向子组件传值——tudulist
文章目录前言一、使用步骤1.引入库总结前言效果图提示:以下是本篇文章正文内容,下面案例可供参考一、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script&g原创 2021-06-03 19:33:23 · 310 阅读 · 0 评论 -
vue模板语法-v-html v-text
文章目录前言一、vue的一些语法二、使用步骤1.引入库总结前言提示:以下是本篇文章正文内容,下面案例可供参考一、vue的一些语法二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app">原创 2021-06-04 00:56:41 · 110 阅读 · 0 评论 -
vue制作todulist
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录vue制作todulist(待完成的列表)一、todulist?二、使用步骤1.引入库2.关键总结vue制作todulist(待完成的列表)提示:以下是本篇文章正文内容,下面案例可供参考一、todulist?待办列表二、使用步骤1.引入库代码如下(示例):<!DOCTYPE html><html> <head> <meta charset="UTF-8">原创 2021-06-03 19:15:48 · 427 阅读 · 0 评论 -
vue的应用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、vue?二、使用步骤1.实例总结前言关于vue的使用提示:以下是本篇文章正文内容,下面案例可供参考一、vue?示例:https://cn.vuejs.org/ 官网下载js文件二、使用步骤1.实例注意,要下载开发版本(示例):<!DOCTYPE html><html><head> <meta charset="utf-8"> <原创 2021-06-03 18:47:26 · 208 阅读 · 0 评论