![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 92
华天下之大软
兴趣爱好:咖啡、桌球、健身、户外、骑行、黄宗泽
展开
-
vue3知识点汇总
vue3和vue2的对比和一些个人理解原创 2022-08-19 00:02:37 · 600 阅读 · 0 评论 -
实现过渡进场和出场的动画效果
以下是vue动画从入门到跑路目录Vue中CSS动画原理实现过渡进场和出场的动画效果在Vue中使用Animate.css库同时具备过渡和动画效果Vue中的js动画与Velocity.js的结合Vue中多个元素或组件的过渡Vue中的列表过渡Vue中的动画封装<html><head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <s...原创 2020-11-17 00:59:42 · 592 阅读 · 0 评论 -
Vue中的动画封装
对最初的代码——实现点击按钮使文字渐隐渐现的隐藏和显示,进行封装,以下是初始代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue中的进场和出场过渡</title> <script src="./vue.js"></script> <style> .fade-enter, .fa.原创 2020-11-17 00:32:43 · 225 阅读 · 0 评论 -
Vue中的列表过渡
实现点击按钮的时候,添加的列表项过渡显示。原理:使用transition-group之后,相当于transition-group里包裹的标签都在外头套一层transition,此处则相当于是在每个div外头都套了一层transition<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue中的列表过渡</title> <script src=.原创 2020-11-17 00:07:08 · 409 阅读 · 0 评论 -
Vue中多个元素或组件的过渡
实现show为true的时候,hello world显示在页面上,当show为false的时候, bye worldx显示在页面上.注意:1、默认的前缀是v,要是要换其他前缀就给transition加上属性name,如name="fade"2、如果不加上key的话会复用页面的DOM,就不会出现动画效果,加上key之后,就不会复用了3、mode是控制组件是先显示再隐藏还是先隐藏再显示,in-out表示先进场再出场,即先显示,再隐藏;out-in表示先出场再进场。<!DOCTYPE.原创 2020-11-16 23:54:27 · 251 阅读 · 0 评论 -
Vue中的js动画与Velocity.js的结合
使用js动画钩子实现:从隐藏到显示的时候。一开始是红色,2s后变成绿色,再2s后变成黑色,done()函数执行表示动画结束就会开始执行after-enter<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script></head原创 2020-11-16 00:11:55 · 310 阅读 · 0 评论 -
同时具备过渡和动画效果
appear和apper-active-class控制初次渲染的时候也有动画效果,type控制动画播放时长由transition决定还是@keyframes也可自定义时长,如下::duration="10000"还可以分别设置入场和出场动画的时长,如下::duration="{ enter:5000, leave: 10000 }"<!DOCTYPE html><html><head> <meta charset="UTF-8..原创 2020-11-15 23:16:56 · 157 阅读 · 0 评论 -
在Vue中使用Animate.css库
实现隐藏和显示的时候放大缩小动态过渡。<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script> <style> @keyframes bounce-in{ 0% { .原创 2020-11-15 14:32:41 · 413 阅读 · 0 评论 -
HTTP协议类
HTTP协议的特点1、简单快速:客户向服务器请求服务时,只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单,使得HTTP服务器的程序规模小,因而通信速度很快。2、灵活:HTTP允许传输任意类型的数据对象。3.无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。...原创 2019-12-15 23:51:41 · 143 阅读 · 0 评论 -
CSS盒模型?边距重叠?BFC?从入门到自闭
CSS盒模型:border padding margin content标准模型和IE模型的区别(如图般的明显区别):CSS如何设置这两种模型:box-sizing:content-box;(标准模型,浏览器的默认方式)box-sizing:border-box;(IE模型)JS如何设置获取盒模型对应的宽和高:内联样式的样式才能取:dom.style.width/he...原创 2019-12-15 18:55:04 · 201 阅读 · 0 评论 -
Vue启动报错 Cannot find module 'webpack/bin/config-yargs'
鳖废话,先上错误Cannot find module 'webpack/bin/config-yargs' at Function.Module._resolveFilename (module.js:325:15) at Function.Module._load (module.js:276:25) at Module.require (module.js:353:17)...转载 2019-11-28 17:47:41 · 366 阅读 · 0 评论 -
Vue2.5开发去哪儿网App
项目源码下载链接 https://download.csdn.net/download/qq_37117521/11985714首页使用轮播插件swesome-Swiperswesome-Swiper的GitHub链接: https://github.com/surmon-china/vue-awesome-swiper城市列表页面使用了Better-scroll和字母...原创 2019-11-19 18:59:40 · 541 阅读 · 0 评论 -
Vue父组件ajax请求到的数据父子组件间传值
举个栗子,父组件<template> <div> <Home-header></Home-header> <Home-swiper :list="swiperList"></Home-swiper> <Home-Icons :list="iconList"></Home-Ic...原创 2019-10-17 14:23:05 · 788 阅读 · 0 评论 -
Vue——使用axios发送ajax请求
引入axiosimport axios from 'axios'举个栗子methods: { getHomeInfo () { axios.get('/api/index.json') .then(this.getHomeInfoSucc) }, getHomeInfoSucc (res) { console.log(...原创 2019-10-17 11:39:01 · 148 阅读 · 0 评论 -
Vue常用组件——轮播区域分页显示逻辑实现
<template> <div class="icons"> <swiper > <swiper-slide v-for="(page,index) of pages" :key="index"> <div class="icon" v-for="item of ...原创 2019-10-16 15:44:14 · 427 阅读 · 0 评论 -
Vue常用组件——vue-awesome-swiper首页轮播图
在GitHub上搜vue-awesome-swiper有使用教程https://github.com/surmon-china/vue-awesome-swipernpm install vue-awesome-swiper@2.6.7 --save在入口文件引入及使用:import VueAwesomeSwiper from 'vue-awesome-swiper'im...原创 2019-10-16 15:16:56 · 181 阅读 · 0 评论 -
Vue环境配置
原创 2019-10-15 14:13:24 · 79 阅读 · 0 评论 -
Vue中CSS动画原理
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue中CSS动画原理</title> <script src="./vue.js"></script> <style> .fade-enter, ....原创 2019-10-15 11:08:18 · 235 阅读 · 0 评论 -
Vue动态组件与v-once指令
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>动态组件与v-once指令</title> <script src="./vue.js"></script></head><body> <d...原创 2019-10-15 10:02:22 · 131 阅读 · 0 评论 -
Vue作用域插槽
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>作用于插槽</title> <script src="./vue.js"></script></head><body> <div id="r...原创 2019-10-15 10:00:59 · 98 阅读 · 0 评论 -
Vue中使用插槽(slot)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue中使用插槽(slot)</title> <script src="./vue.js"></script></head><body> <...原创 2019-10-15 09:58:51 · 182 阅读 · 0 评论 -
Vue非父子组件间的传值(Bus/总线/发布订阅者模式/观察着模式)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅者模式/观察着模式)</title> <script src="./vue.js"></script></head>&...原创 2019-10-15 09:58:04 · 173 阅读 · 0 评论 -
Vue给组件绑定原生事件
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>给组件绑定原生事件</title> <script src="./vue.js"></script></head><body> <div i...原创 2019-10-15 09:47:43 · 129 阅读 · 0 评论 -
Vue组件参数校验与非props特性
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>组件参数校验与非props特性</title> <script src="./vue.js"></script></head><body> <...原创 2019-10-14 16:06:44 · 145 阅读 · 0 评论 -
Vue父子组件的数据传递
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>父子组件的数据传递</title> <script src="./vue.js"></script></head><body> <div i...原创 2019-10-14 15:17:39 · 134 阅读 · 0 评论 -
Vue组件使用中的细节点
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>组件使用中的细节点</title> <script src="./vue.js"></script></head><body> <div i...原创 2019-10-14 14:25:48 · 97 阅读 · 0 评论 -
Vue的列表渲染
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue的列表渲染</title> <script src="./vue.js"></script></head><body> <div id...原创 2019-10-14 14:24:47 · 100 阅读 · 0 评论 -
Vue的条件渲染
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue的条件渲染</title> <script src="./vue.js"></script></head><body> <div id...原创 2019-10-14 14:23:56 · 91 阅读 · 0 评论 -
Vue的样式绑定
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>vue的样式绑定</title> <script src="./vue.js"></script> <style> .active{ ...原创 2019-10-14 14:23:07 · 92 阅读 · 0 评论 -
Vue的计算属性的getter和setter
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>计算属性的getter和setter</title> <script src="./vue.js"></script></head><body> ...原创 2019-10-14 14:21:34 · 125 阅读 · 0 评论 -
Vue的计算属性、方法与侦听器
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>计算属性、方法与侦听器</title> <script src="./vue.js"></script></head><body> <div...原创 2019-10-14 14:18:00 · 96 阅读 · 0 评论 -
Vue的模板语法
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>模板语法</title> <script src="./vue.js"></script></head><body> <div id="ap...原创 2019-10-14 14:16:24 · 110 阅读 · 2 评论 -
Vue生命周期
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Vue生命周期函数</title> <script src="./vue.js"></script></head><body> <div i...原创 2019-10-14 14:14:04 · 77 阅读 · 0 评论