前端
CSS 实现卡片边框渐变动画
前言
👏CSS实现卡片边框渐变动画,速速来Get吧~
🥇文末分享源代码。记得点赞+关注+收藏!
1.实现效果
在这里插入图片描述
2.实现步骤
父容器添加背景渐变色
在这里插入图片描述
<div class="card"></div>
.card {
background: linear-gradient(0deg, #ff1d74, #
50行代码用Vue实现可拖拽调节的分割布局
按住分割线调节比例
实现并不难,但是网上其他的文章实在是把简单的事情复杂化了
今天教大家的方法超级简洁!!!!只用50行代码!!
当鼠标在分割线位置按下时
triggerDragging变量变为true
这时split-pane-wrapper的mousemove中判断triggerDragging
如果为true则改变leftOffset,pane-left的width就会随之改
vue 项目打包分析和优化
打包分析工具(webpack-bundle-analyzer)
分析 Bundle 由什么模块组成
分析什么模块占据了比较大的体积
分析是否有什么错误的模块被打包了
未优化前的代码2.85M
image.png
安装及配置
npm install -D webpack-bundle-analyzer
配置环境变量 .env.analyze
NODE_ENV = pro
Android元素分散-飘移-聚合动效
效果预览
元素分散-飘移-聚合动效.gif
功能说明
使用Canvas绘制元素移动动效,极致高效;
支持任意方向元素漂移(起点、终点任意);
支持修改元素图标及其大小(单位dp);
支持修改动效持续时间及动画结束时回调;
支持修改元素飘动个数;
使用方式
在工程根目录的build.gradle中添加
allprojects {
repositories {
Vue.js基础-13-混入对象(应用示例,同名函数优先级,选项合并,选项优先级,全局混入,Vue.mixin)
1. 混入对象
1.1 简单应用
语法示例
定义混入对象
var 混入对象名 = {
created: 操作
};
组件中引用混入对象
new Vue({
component: {
mixins: [混用对象名],
}
完整示例
<!DOCTYPE html>
<h
Vue.js 基础-02-模板语法(常用指令v-html/v-bind/v-if/v-model/v-on,插值,参数,修饰符,缩写)
@[toc]
前言:
Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
1. 插值
1.1 插入文本
语法
使用 {{……}}
前端vue:路由的基本使用
1. 路由
概念: Hash 地址与组件之间的对应关系
工作方式:
当用户点击页面上的路由链接
导致了 URL 地址栏中的 Hash 值发生了变化
前端路由就会监听到 Hash 地址的变化
前端路由把当前 Hash 地址对应的组件渲染都浏览器中
2. vue-router`
vue-router 是 vue.js 官方给出的路由解决方案
2.1 vue-router 的基本用法
安装 vue-r