vue
关注
分享
扫一扫
素描本里的男子
做一个温文尔雅的美男子
展开
-
Vue3.0
vue3.0和vue2.0区别以及vue3.0使用方法原创 2023-04-19 13:42:29 · 957 阅读 · 1 评论 -
js实现局部全屏效果
全屏 API全屏 API 为使用用户的整个屏幕展现网络内容提供了一种简单的方式，并且在不需要时退出全屏模式。这种 API 让你可以简单地控制浏览器，使得一个元素与其子元素，如果存在的话，可以占据整个屏幕，并在此期间，从屏幕上隐藏所有的浏览器用户界面以及其他应用。Document 中的方法Document.exitFullscreen()用于请求从全屏模式切换到窗口模式，会返回一个 Promise，会在全屏模式完全关闭的时候被置为 resolved 状态。Element 中的方法Element.原创 2021-11-23 17:25:53 · 1893 阅读 · 0 评论 -
vue动态组件
交互中，程序运行会有不同的结果，需要根据不同的结果展示不同的组件，用if，elseif会比较繁琐当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题is attribute示例代码html：<component :is="isWhitchDialogComp"></component>js：import DefaultDialog from './dialog/default-dialog'import ConfilctDialo原创 2021-03-01 16:33:33 · 170 阅读 · 0 评论 -
vue搜索高亮显示
效果展示：js部分：import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g') const txt = binding.arg let str = '' if (txt) { str = txt.replace(reg, `<span style="color:red">${mat原创 2020-11-09 09:50:49 · 748 阅读 · 0 评论 -
JS数组的几种开发技巧（去重、过滤、随机排列、排序）
1、随机排列function shuffle(arr) { var i, j, temp for (i = arr.length - 1; i > 0; i--) { j = Math.floor(Math.random() * (i + 1)) temp = arr[i] arr[i] = arr[j] arr[j] = temp } return arr}2. 唯一值在开发者，我们经常需要过滤重复的值，这里提供几种方式来过滤数组的重复值。原创 2020-08-07 14:45:42 · 931 阅读 · 0 评论 -
详解JS取出两个数组中的不同或相同元素
1、取出两个数组的不同元素var arr1 = [0, 1, 2, 3, 4, 5] var arr2 = [0, 4, 6, 1, 3, 9] function getArrDifference (arr1, arr2) { return arr1.concat(arr2).filter(function (v, i, arr) { return arr.indexOf(v) === arr.lastIndexOf(v) }) } console.log(getArrDif原创 2020-06-02 10:14:02 · 1711 阅读 · 0 评论 -
浅谈Javascript中try catch 的用法
demo：<!DOCTYPE html><html><head><meta charset="utf-8"><title>power by Adam</title></head><body><p>try 语句块中的函数未定义：</p><p id="demo"></p><script>try { adddlert("hell原创 2020-05-28 18:12:18 · 1787 阅读 · 0 评论 -
CSS3更改原生滚动条的样式
话不多说直接上代码：/*滚动条样式*/ .scrollbar::-webkit-scrollbar { /*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px; } .scrollbar::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px; -webkit-box-shadow: inset 0 0 5px r原创 2020-05-28 16:35:49 · 668 阅读 · 0 评论 -
封装公共的节流函数和防抖函数
代码如下：// 节流函数export const throttle = function (fn, gapTime = 2000) { let _lastTime = null return function () { let _nowTime = +new Date() // 当前时间戳 if (!_lastTime || _nowTime - _lastTime > gapTime) { fn.apply(this, arguments) _la原创 2020-05-26 16:07:19 · 424 阅读 · 0 评论 -
js 时间戳转换成几分钟前，几小时前，几天前（亲测有效）
思路：1：将当前的时间转换为毫秒数（nowNew）2：将时间戳转换为标准时间再转换为毫秒数 （millisecond）3：将两者相减然后进行判断代码如下：HTML部分：<span>{{formatMsgTime(时间戳)}}</span>JS部分：formatMsgTime (timespan) { var dateTime = new Date(timespan) // 将传进来的字符串或者毫秒转为标准时间 var year = dateTime.getF原创 2020-05-26 15:29:13 · 4238 阅读 · 0 评论 -
vue-3d-model：一个展示三维模型的 Vue 组件
vue-3d-modelvue.js 3D model viewer component, based on threejs, inspired by model-tag一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。ExampleDEMOInstallusing npmnpm install vue-3d-model --saveOr using script tag for global use<scri...转载 2020-05-22 10:55:25 · 8040 阅读 · 5 评论 -
vue搜索关键字使文本高亮
思路：通过正则RegExp进行全局匹配，将符合条件的元素通过replace替换成为HTML代码片段封装成自定义指令在main.js里引入增加可复用性import Vue from 'vue'function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g'...原创 2020-05-06 14:50:28 · 1189 阅读 · 0 评论 -
结合element面包屑组件创建动态路由
$route.matched1、一个数组，包含当前路由的所有嵌套路径片段的路由记录2、 一个路由匹配到的所有路由记录会暴露为 $route 对象 (还有在导航守卫中的路由对象) 的 $route.matched 数组<template> <div id="example-container"> <el-breadcrumb separator-cla...原创 2020-05-06 09:53:28 · 396 阅读 · 0 评论 -
vue修饰符
Vue提供了一些修饰符，这些修饰符在使用起来非常方便，比如阻止默认事件、冒泡等。.lazy：v-modeil不用多说，输入框改变，这个数据就会改变，lazy这个修饰符会在光标离开input框才会更新数据：<input type="text" v-model.lazy="value">.trim：输入框过滤首尾的空格：<input type="text" v-mode...转载 2020-03-31 10:29:08 · 209 阅读 · 1 评论 -
vue封装公共方法处理js计算科学记数法精度问题
单独建一个文件（calculation.js）来放这个公共的方法，一般我喜欢放在utils里，calculation.js 代码：var countDecimals = function(num) { var len = 0; try { num = Number(num); var str = num.toString().toUpperCas...转载 2020-01-09 09:34:02 · 586 阅读 · 0 评论 -
js处理拖拽事件与点击事件并存
解决思路：1.记录下鼠标按下mousedown和鼠标抬起mouseup的时候当前的pageX和pageY2.通过开方将两个位置坐标进行对比，当值等于0或者小于7的时候证明当前是点击事件，反之则是拖拽事件3.关于原本的点击事件函数里的逻辑，现在写到判断语句里就可以了案例附上：<!DOCTYPE html><html><head> <meta...原创 2019-11-28 09:19:39 · 3138 阅读 · 1 评论 -
vue从入门到放弃——（7） 组件的基本使用
什么是组件组件的概念：组件即自定义控件，是Vue.js最强大的功能之一组件的用途：组件能够封装可重用代码，扩展HTML标签功能组件的本质：自定义标签组件的分类全局组件作用域：不同作用域内均可使用局部组件作用域：只在定义该组件的作用域内可以使用注意：Vue组件只有全局组件和局部组件两种全局组件语法：Vue.component(‘name’, { tem...原创 2019-07-02 21:34:19 · 318 阅读 · 0 评论 -
vue从入门到放弃——（1）vue的概念
Vue作者：尤雨溪Vue简单的来说就是一套用于构建用户界面的mvvm框架他的核心可以理解为用于构建用户界面 渐进式的, 自底向上增量开发MVVM框架渐进式每个框架都会有自己的一些特点，会对开发者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。可以在原有大系统的上面，把一两个组件改用vue实现，也可以整个用vue全家桶开发不会做职责之外的事自底...原创 2019-06-27 17:18:07 · 241 阅读 · 0 评论 -
vue从入门到放弃——（2）vue起步vue.js指令
Vue.js起步步骤第一步 创建 View 视图 应用程序的界面将显示在这里第二步 创建 VM视图模型 控制器也就是 Vue.js 的实例第三步 创建 Model 数据 data 为 Vue.js 实例的固定属性，存储数据第四步 使用数据（模板语法） 将 data 中变量 message 放在 #app内的双花括号内 修改 data 中的 mes...原创 2019-06-27 17:20:11 · 260 阅读 · 0 评论 -
vue从入门到放弃——（3）vue基础练习
Vue基础练习$event事件对象【扩展】事件对象语法：<div @click=“fn(美元符号+event)”>中，$event为事件对象作用：记录事件相关的信息注：函数传参必须写$event<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-06-27 17:22:59 · 496 阅读 · 0 评论 -
vue从入门到放弃——（4）虚拟 dom 与 diff 算法
虚拟 dom 与 diff 算法什么是虚拟DOM所谓的虚拟 dom，也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render（渲染）方法将其渲染成真实的DOM的节点。为什么使用虚拟DOM使用JQuery的时候，会大量操作DOM，那么DOM元素的变化自然会引起页面的回流或者重绘，页面的DOM重绘自然会导致页面性能下降，那么如何尽可能的去减少DO...原创 2019-06-27 17:25:18 · 215 阅读 · 0 评论 -
vue从入门到放弃——（8） 组件高级（父子组件和solt槽口）
组件高级父子组件语法：components：{ ‘parent’: { template:’<div></div>’, components:{ ‘child’: { template:’<div></div>’ } } }}父子组件的作用域1.组件相当于完整的vue实例2.组件与vue实例间作用域...原创 2019-07-03 20:36:54 · 409 阅读 · 0 评论 -
vue从入门到放弃——（5）watch与计算属性以及方法的区别-基础练习
Vue基础练习$event事件对象【扩展】事件对象语法：<div @click=“fn(美元符号+event)”>中，$event为事件对象作用：记录事件相关的信息注：函数传参必须写$event<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-06-29 09:08:49 · 333 阅读 · 0 评论 -
Vue-cli打包后css样式出不来的解决办法
因为用vue做的大部分项目都是移动端，关于css样式不出来的解决办法针对rem布局：我们App.vue里肯定设置了如下样式<template> <div id="app"> <!-- 组件缓存 --> <keep-alive> <router-view></router-view> <...原创 2019-07-31 13:56:46 · 6052 阅读 · 1 评论 -
Vue-cli中post请求发送Json格式数据
这里就不详细说明了，举个例子var param = new URLSearchParams(); param.append("productId",this.$route.params.id) this.axios({ url:"http://39.106.44.63:10086/loadAllProduct", m...原创 2019-08-01 20:41:41 · 9471 阅读 · 0 评论 -
vue从入门到放弃——（6）交互与实例的生命周期
前端和后端的概念任何一个应用程序都有前端和后端前端：客户端，就是浏览器（pc端 手机端）后端：服务器（性能很好的电脑）是提供计算服务的设备。服务器的构成包括处理器、硬盘、内存、系统总线等，和通用的计算机架构类似，但是由于需要提供高可靠的服务，因此在处理能力、稳定性、可靠性、安全性、可扩展性、可管理性等方面要求较高。前后端交互原理[外链图片转存失败(img-RrwDsZFq-156207...原创 2019-07-02 21:31:09 · 609 阅读 · 0 评论