随笔分类 - Vue
Vue回顾
摘要：1.Auto Close Tag 自动闭合HTML/XML标签 2.Auto Rename Tag 自动完成另一侧标签的同步修改 3.Beautify 格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则 4.Bracket Pair Colorizer 给括号加上不同的颜色，便于
阅读全文
摘要：1. 先创建一个lang 文件夹,创建两个js文件en.js(英文), zh.js(中文), 另外创建一个index.js文件(用于) en.js zh.js (两者必须保持一致) 2. 在index.js 中引入vue和vue-i18n, 并注册vue-i18n 然后 引入en.js和zh.js两
阅读全文
摘要：1.第一步 在main.js文件中定义全局过滤器函数 // 全局过滤器--时间戳格式化时间//.padStart(2 , "0") 不足两位的，用0填充 Vue.filter('dateFormat', function(originVal) { const dt = new Date(origin
阅读全文
摘要：1. 在src下新建文件夹utils，里面新建文件canvas-nest.js，将代码复制进去。（可以自己定义存放路径） !function() { function n(n, e, t) { return n.getAttribute(e) || t } function e(n) { retur
阅读全文
摘要：开发中向服务器请求到的数据是特别复杂的，需要从中抽离出需要展示的数据进行展示个和交互。 思路： 先将请求到的复杂数据传递到一个类A中，从类A里抽离出需要的数据。需要展示数据的地方，面向类A开发，类A关心数据抽离问题，不关心如何展示，只管提供所需要的数据。 页面关心展示数据问题，不关心数据问题，只管和
阅读全文
摘要：一、什么是函数防抖 概念：函数防抖（debounce），就是指触发事件后，在 n 秒内函数只能执行一次，如果触发事件后在 n 秒内又触发了事件，则会重新计算函数延执行时间。 举个栗子，坐电梯的时候，如果电梯检测到有人进来（触发事件），就会多等待 10 秒，此时如果又有人进来（10秒之内重复触发事件）
阅读全文
摘要：需求：滚动到一定位置，固定，不再滚动，实现吸顶效果。 思路一： 使用原生滚动，给需要吸顶的组件添加样式 .tab-control{ position: sticky; /* 从顶部向下滚动44px，固定，不在向下滚动。向上y小于44px恢复滚动*/ top: 44px } 思路二： hack的方法(
阅读全文
摘要：<template> <div class="tab-control"> <div v-for="(item , index) in title" class="tab-control-item" :class="{active: index currentIndex}" @click='itemC
阅读全文
摘要：前言： 对第三方库进行二次封装和抽离到统一模块，项目面对自己的模块进行开发。如果有一天更换库，只需要修改自己模块中的代码，无需对整个项目进行重构。 将axios网络请求库封装到network文件下的request.js中，项目中所有网络请求相关，全部面对request.js开发。 一、vue目录结构
阅读全文
摘要：github：https://github.com/zwnsyw/TabBar 一、实现简单思路 1.在页面底部有一个单独的TabBar组件1.1自定义TabBar组件，在APP中使用1.2让TabBar出于底部，并设置相关的样式 2.TabBar中显示的内容由外界决定 2.1定义插槽 2.2fle
阅读全文
摘要：一、目录结构 二、配置方法 提示：和package.json同级新建vue.config.js文件(可选文件，默认没有创建)。 const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirn
阅读全文
摘要：替换新版vue-cli创建项目的public>index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
阅读全文
摘要：关键字：路由懒加载，全局导航守卫，组件导航守卫，redirect重定向，keep-alive，params，query 一、目录结构 二、index.js 1 // 配置路由相关的信息 2 import VueRouter from 'vue-router' 3 import Vue from 'v
阅读全文
摘要：Vue路由vue-router 前面的话 在Web开发中，路由是指根据URL分配到对应的处理程序。对于大多数单页面应用，都推荐使用官方支持的vue-router。Vue-router通过管理URL，实现URL和组件的对应，以及通过URL进行组件之间的切换。本文将详细介绍Vue路由vue-router
阅读全文
摘要：Vue前端路由 1. npm install vue-router --save 2.脚手架安装 一、目录结构 二、index.js // 0.导入vue和路由插件 import Vue from 'vue' import VueRouter from 'vue-router' import Hom
阅读全文
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="app"> 10 <ul> 11 <li v-f
阅读全文
