Vue
关注
分享
扫一扫
zbailing
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
element ui组件的自定义类名样式不生效
需要注意，样式不能写在<style scoped>标签中，会被vue自动加上data-v属性，导致样式失效。element ui中，类似描述列表这种组件。必须写在<style>标签里。会提供自定义类名属性。原创 2023-07-07 10:29:03 · 942 阅读 · 0 评论 -
Vue 卸载Better Scroll插件
【代码】Vue 卸载Better Scroll插件。原创 2022-11-01 13:04:40 · 291 阅读 · 0 评论 -
Vue ＜transition-group＞ 多组table滚动显示数据 过渡效果案例2
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例2</title> <!-- 上篇文章的代码，实际使用中发现有bug 比如：如果文本过长，有需要折行的文本，在滚动时，会因为positio...原创 2022-03-10 13:23:15 · 1668 阅读 · 0 评论 -
Vue ＜transition＞ 通过动态name属性实现动态过渡案例
<!-- Vue <transition> 通过动态name属性实现动态过渡案例 --><template> <div class="page"> <p> <button @click="switchTransName">switch transitionName</button> </p> <transition :name="tranName"...原创 2022-03-10 09:16:25 · 1308 阅读 · 0 评论 -
Vue ＜transition＞ 通过事件钩子实现动态过渡案例2
<!-- Vue <transition> 通过事件钩子实现动态过渡案例2 --><template> <div class="page"> <p> fade in <input type="range" min="0" :max="fadeMax" v-model="fadeInVal"/> fade out <input type="range" min="0" :max="fad...原创 2022-03-09 13:53:43 · 924 阅读 · 0 评论 -
Vue ＜transition＞ 用函数式组件实现可复用过渡动画案例
// 在main.js中全局定义<transition>函数式组件Vue.component('my-special-transition', { /* * 设置functional: true则表示该组件为函数式组件 * 函数式组件定义： * 没有管理任何状态，没有监听任何传递给它的状态， * 没有生命周期方法，只是一个接收一些prop的函数 * 没有实例（没有this上下文） * */ functional: true, //...原创 2022-03-08 09:22:52 · 276 阅读 · 0 评论 -
Vue ＜transition＞ 实现可复用过渡案例
<!-- Vue <transition> 实现可复用过渡案例--><template> <div class="page"> <button @click="isHello = !isHello">click</button> <mySpecialTransition> <!-- 当有相同标签名的元素切换时， 需通过key属性设置唯一的值来让Vue区分...原创 2022-03-07 15:57:58 · 532 阅读 · 0 评论 -
Vue ＜transition-group＞ 多组table滚动显示数据 过渡效果案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> 多组table滚动显示数据 过渡效果案例</title> <style> .table { margin-top: 50px; } ...原创 2022-03-07 10:52:12 · 368 阅读 · 0 评论 -
Vue ＜transition-group＞ table滚动显示数据 过渡效果案例(vue.js版)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue <transition-group> table滚动显示数据 过渡效果案例</title> <style> .list-complete-item { transition: all 1s;...原创 2022-03-04 16:19:38 · 772 阅读 · 0 评论 -
Vue ＜transition-group＞ ＜table＞数据滚动显示过渡案例
<!-- Vue <transition-group> <table>数据滚动显示过渡案例--><template> <div class="page"> <!-- Vue几乎支持所有原生js dom事件 html dom事件列表：https://www.runoob.com/jsref/dom-obj-event.html --> <table @mouseover="...原创 2022-03-04 14:28:24 · 654 阅读 · 0 评论 -
Vue ＜transition-group＞ 列表的删除、增加元素过渡案例
<!-- Vue <transition-group> 列表的删除、增加元素过渡案例--><template> <div class="page"> <p> <button v-on:click="shuffle">Shuffle</button> <button v-on:click="add">Add</button> <but...原创 2022-03-04 11:26:57 · 291 阅读 · 0 评论 -
＜transition-group＞ ＜table＞列表筛选过渡效果案例
<!-- <transition-group> <table>列表筛选过渡效果案例 --><template> <div> <p> <input v-model="query" type="text"/> </p> <table class="table"> <thead> <tr> ...原创 2022-03-04 10:23:58 · 323 阅读 · 0 评论 -
Vue ＜transition-group＞ 中＜table＞列表的排序过渡案例
<!-- Vue <transition-group> 中<table>列表的排序过渡案例--><template> <div class="page"> <p> <!-- <transition-group>的排序过渡动画对<table>元素也好使 --> <button @click="shuffle">shuffle</button>.原创 2022-03-03 16:11:34 · 605 阅读 · 0 评论 -
Vue ＜transition-group＞ 列表的排序过渡案例2 - 翻牌、洗牌小动画
<!-- Vue <transition-group> 列表的排序过渡案例2 - 翻牌、洗牌小动画 --><template> <div class="page"> <p class="text-center"> <button @click="shuffle">洗牌</button> </p> <transition-group name="car...原创 2022-03-02 14:10:20 · 797 阅读 · 0 评论 -
Vue ＜transition-group＞ 列表的排序过渡案例
<!-- Vue <transition-group> 列表的排序过渡案例 --><template> <div class="page"> <!-- flip n 空翻、轻抛 shuffle vt 洗牌 --> <button @click="shuffle">shuffle</button> <transition-group name="flip-list".原创 2022-03-02 09:34:06 · 845 阅读 · 0 评论 -
Vue ＜transition-group＞ 列表的 添加/删除元素 过渡案例2
<!-- Vue <transition-group> 列表的 添加/删除元素 过渡案例2 --><template> <div class="page"> <transition-group name="fade" tag="ul"> <li v-for="(item,index) in items" :key="item.id" class="list-item"> <span>.原创 2022-03-01 17:09:59 · 269 阅读 · 0 评论 -
Vue ＜transition-group＞ 列表的 添加/删除元素 过渡案例
<!-- Vue <transition-group> 列表的 添加/删除元素 过渡案例 --><template> <div class="page"> <button @click="add">add</button> <button @click="remove">remove</button> <!-- <transition-group>以一个真.原创 2022-03-01 14:43:07 · 901 阅读 · 0 评论 -
Vue ＜transition＞ 多个组件的过渡案例2
<!-- Vue <transition> 多个组件的过渡案例2 --><template> <div class="page"> <div class="text-center"> <input type="radio" v-model="view" value="componentA">a <input type="radio" v-model="view" value="compon.原创 2022-03-01 13:42:52 · 421 阅读 · 0 评论 -
Vue ＜transition＞ 多个组件的过渡案例
<!-- Vue <transition> 多个组件的过渡案例 --><!--多个元素之间的过渡，使用key属性来实现多个组件之间的过渡，使用动态组件来实现--><template> <div class="page"> <div> <!-- 在<input>上设置id属性 在<label>上设置for属性 让 id属性的值 = for.原创 2022-03-01 10:52:16 · 483 阅读 · 0 评论 -
Vue ＜transition＞ 过渡模式使用案例
<!-- Vue <transition> 过渡模式使用案例 --><template> <div class="page"> <!-- mode属性 in-out 新元素先进行过渡，完成之后，当前元素过渡离开 （先进后出，不经常使用） out-in 当前元素先进行过渡，完成之后，新元素过渡进入 （先出后进，经常使用） --> <transiti.原创 2022-02-28 14:23:26 · 690 阅读 · 0 评论 -
Vue ＜transition＞多个元素过渡 css过渡使用案例
<!-- Vue <transition>多个元素过渡 css过渡使用案例 --><!--<transition>过渡应用于元素的切换效果： 1、元素的显示或隐藏 2、从一个元素切换到另一个元素--><template> <div class="page"> <transition enter-active-class="animate__animated animate__flash"> .原创 2022-02-28 10:03:49 · 231 阅读 · 0 评论 -
Vue ＜transition＞多个元素过渡 css过渡使用案例
<!-- Vue <transition>多个元素过渡 css过渡使用案例 --><template> <div class="page"> <transition name="tra"> <!-- 当有相同标签的元素切换时，需要通过key属性设置唯一的值来标记它们，以此让Vue能过区分它们， 否则Vue为了效率只会替换相同标签内部的内容 --> <bu.原创 2022-02-22 11:34:11 · 946 阅读 · 0 评论 -
Vue ＜transition＞多个元素过渡 自定义过渡类名使用案例
<!-- Vue <transition>多个元素过渡 自定义过渡类名使用案例 --><!--<transition>多个元素过渡动效的使用与单个元素类似--><template> <div class="page"> <!-- 加上appear属性后，浏览器会有初始渲染动效，默认的初始渲染动效为enter-active-class设置的动效 当然，也可以通过 appear-cla.原创 2022-02-22 10:47:36 · 727 阅读 · 0 评论 -
Vue ＜transition＞初始渲染的过渡案例
<!-- Vue <transition>初始渲染的过渡案例 --><!--appear初始渲染过渡，就是浏览器最初渲染已有元素时的开场动效--><template> <div class="page"> <button @click="show = !show">click</button> <!-- 可以通过appear属性设置节点在初始渲染的过渡 appear 必选值.原创 2022-02-21 17:13:13 · 424 阅读 · 0 评论 -
Vue ＜transition＞使用JS过渡的loading动画小案例
<!-- Vue <transition>使用JS过渡的loading动画小案例 --><template> <div class="page"> <button @click="show = !show">Start</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on.原创 2022-02-21 16:43:16 · 394 阅读 · 0 评论 -
Vue ＜transition＞过渡中的JS钩子
<!-- Vue <transition>过渡中的JS钩子--><template> <div class="page"> <button @click="show = !show">click</button> <transition name="ani" v-on:before-enter="beforeEnter"> <div class="box" v-if="show"&.原创 2022-02-21 15:04:32 · 457 阅读 · 0 评论 -
Vue ＜transition＞过渡动画中使用 animate.css
在<transition>过渡动画中使用，外部css插件 animate.css可以让动画效果更丰富，使用起来更方便<!-- Vue <transition>过渡动画中使用 animate.css--><!--在<transition>过渡动画中使用，外部css插件 animate.css可以让动画效果更丰富，使用起来更方便--><template> <div class="page"> &.原创 2022-02-21 10:03:27 · 623 阅读 · 0 评论 -
Vue ＜transition＞过渡动画案例
<!-- Vue <transition>过渡动画 --><template> <div class="page"> <button @click="show = !show">Toggle show</button> <transition name="bounce"> <!-- 注意： css animation动画无法应用在内联元素（display: i.原创 2022-02-18 11:06:00 · 346 阅读 · 0 评论 -
vue ＜transition＞ css过渡案例
<template> <div class="page"> <button @click="show=!show"> toggle </button> <transition name="slide-fade"> <p class="box" v-if="show"><span>hello</span></p> </transiti.原创 2022-02-17 16:07:15 · 193 阅读 · 0 评论 -
Vue单元素/组件进入/离开过渡
<template> <div class="page"> <h1>单元素/组件过渡</h1> <!--为.box元素添加进入/离开过渡--> <transition name="fade" v-for="item in items"> <div class="box" v-if="item.isShow" @click="item.isShow=!item.isShow">{{it.原创 2022-02-17 15:42:10 · 478 阅读 · 0 评论 -
命名视图案例
app.vue<template> <div id="app"> <router-view /> <router-view name="a"/> <router-view name="b"/> </div></template>router.jsexport default new Router({ routes: [ { path: '/',原创 2022-01-20 09:53:12 · 535 阅读 · 0 评论 -
To install it, you can run: npm install --save core-js/modules/es.regexp.dot-all.js
解决方法：cnpm i core-js@3.19.1 --save重新运行好使原创 2021-11-17 13:53:45 · 1766 阅读 · 1 评论 -
vue中使用less
一、首先vue开发环境已经安装成功二、安装less依赖，npm install less less-loader --savenpm install less less-loader --save三、scoped<style lang="less" scoped> .navbar { box-shadow: 0 0 8px rgba(0, 0, 0,...转载 2019-07-03 16:24:47 · 2229 阅读 · 0 评论