vue

  • vue-element-admin项目导入和导出的实现

    vue-element-admin导入组件封装 模板和样式 首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可 excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件 npm i xlsx 将vue-element-admin提供的导入功能新建一个组件,位置: src/components/UploadExcel import CommonTools from ‘./CommonTools’ import UploadExcel from ‘./UploadExcel’ export default { insta…

    2021年6月10日
    0 4 0
  • 详解Vue3中Teleport的使用

    在本文中,我们将介绍: Teleport 的目的 Teleport 的例子 一些很有意思的代码交互 Teleport 的目的 首先是什么时候以及使用这个 Teleport 功能。 在开发较大的 Vue 项目时应该以可重用的逻辑去组织代码。但是当处理某些类型的组件(如模式、通知或工具提示)时,模板 HTML 的逻辑可能不会和我们希望渲染元素处于相同的文件中。 实际上在大多数情况下,与 Vue 的 DOM 完全分开处理相比,处理这些元素要容易得多。因为嵌套组件的位置、z-index 和样式等这些东西,可能由于需要处理其所有父对象的作用域而变得棘手。 而这些正是 Teleport 的用武之地。我们可…

    2021年5月30日
    0 4 0
  • vue移动端实现左滑编辑与删除的全过程

    前言 根据项目需要使用Vue-touch 实现了一个vue移动端的左滑编辑和删除功能,废话不多说,先看效果图,然后上代码吧! 方法如下: 第一步:安装vue-touch npm install [email protected] –save 第二步:main.js 中引入 import VueTouch from ‘vue-touch’; Vue.use(VueTouch, { name: ‘v-touch’ }); 第三步:使用(用v-touch包住你要左滑删除的内容) <div class=”wrap”> <v-touch style=”margin-bottom:10px”…

    2021年5月29日
    0 5 0
  • Vue新手指南之创建第一个vue-cli脚手架程序

    1. Vue–第一个vue-cli程序 Vue的开发都是要基于NodeJS,实际开发采用Vue-cli脚手架开发,vue-router路由,vuex做状态管理;Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目~~ ElementUI ICE 1.1 什么是vue-cli vue-cli官方提供的一个脚手架,用于快速生成一个vue的项目模板; 预先定义好的目录结构及基础代码,就好比咱们在创建Maven项目时可以选择创建一个骨架项目,这个估计项目就是脚手架,我们的开发更加的快速; 项目的功能 统一的目录结构 本地调试 热部署 …

    2021年5月29日
    0 4 0
  • Vue中父组件向子组件传递数据的几种方法

    最近在学习vue的源码,总结了几种vue中父子组件传递数据的方法。 1.props & event 父组件向子组件传递props数据,子组件通过触发事件向父组件回传数据,代码如下: //子组件 <template> <div @click=”changeName(‘YYY’)”>{{name}}</div> </template> <script> export default{ props:[‘name’],//or props:{name:{type:String,default:”}} methods:{ //不能在子…

    Javascript 2021年5月27日
    0 4 0
  • vue实现左右滑动效果实例代码

    前言 个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架,与其它大型框架不同的是:vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,另外一个方面,当vue与现代化的工具链以及各种支持类库结合使用时,vue也完全能够为复杂的单页应用提供驱动。 vue.js是用于构建交互式的Web界面的库,它提供MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲,vue.js集中在M…

    Javascript 2021年5月27日
    0 4 0
  • Vue自定义组件使用事件修饰符的踩坑记录

    前言 今天在使用自写组件时,突然遇到久违的冒泡事件,就想着使用Vue自带的事件修饰符(.stop),本以为可以就此解决冒泡,却遇到这个问题。 脑中一片问号????这是什么鬼,我是按照Vue文档写的啊(吐血) 于是,我开始踏上了解决错误的路程 程序员常规操作: 打开浏览器–百度/谷歌搜一搜,发现搜出来的东西不少,没一个是能解决我的问题的答案,没办法Vue文档走起!!!! 看了至少几十遍Vue文档的我,自以为没有看漏什么东西,确信Vue文档也没有解决这种问题的答案,苦苦寻找,来到这里 嗯?这个event.stopPropagation()??? 顿时灵光一现!!!! 既然是event.stopPr…

    2021年5月27日
    0 4 0
  • PHPCMS能用Vue开发吗?

    PHPCMS能用Vue开发吗? PHPCMS能用Vue开发,只需在PHPCMS模板中引入vue.js,就可以使用Vue进行开发,Vue是一套用于构建用户界面的渐进式JavaScript框架,该框架目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 Vue 特点 易用 在有HTML CSS JavaScript的基础上,快速上手。 灵活 简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。 性能 20kb min+gzip 运行大小、超快虚拟 DOM 、最省心的优化。 Vue 目录结构 目录/文件 说明 build 项目构建(webpack)相关代码 config 配置目录,包括…

    2021年4月28日
    0 6 0
  • vue diff算法全解析

    前言 我们知道 Vue 使用的是虚拟 DOM 去减少对真实 DOM 的操作次数,来提升页面运行的效率。今天我们来看看当页面的数据改变的时候,Vue 是如何来更新 DOM 的。Vue和React在更新dom时,使用的算法基本相同,都是基于 snabbdom。 当页面上的数据发生变化时,Vue 不会立即渲染。而是经过 diff 算法,判断出哪些是不需要变化的,哪些是需要变化更新的,只需要更新那些需要更新的 DOM 就可以了,这样就减少了很多不必要的 DOM 操作,大大提升了性能。 Vue就使用了这样的抽象节点VNode,它是对真实DOM的一层抽象,而不依赖某个平台,它可以是浏览器平台,也可以是we…

    Javascript 2021年4月25日
    0 14 0
  • 在Vue.js中加载字体的正确方法

    添加字体不应该对性能产生负面影响。在本文中,我们将探讨在 Vue 应用程序中加载字体的最佳实践。 正确声明 font-face 的字体 确保正确声明字体是加载字体的重要方面。这是通过使用 font-face 属性来声明你选择的字体来实现的。在你的 Vue 项目中,这个声明可以在你的根 CSS 文件中完成。在进入这个问题之前,我们先来看看 Vue 应用的结构。 /root public/ fonts/ Roboto/ Roboto-Regular.woff2 Roboto-Regular.woff index.html src/ assets/ main.css components/ rout…

    技术文章 2021年4月12日
    0 15 0
  • 关于Vue虚拟dom问题

    一、什么是虚拟dom? 虚拟dom本质上就是一个普通的JS对象,用于描述视图的界面结构 在vue中,每个组件都有一个render函数, 没有render找template,没有template找el,有el就会把el.outHTML作为template,然后把这串字符串编译成render函数。 有template就不往下找了。有render同理。 每个render 函数都会返回一个虚拟dom树,这也就意味着每个组件都对应一棵虚拟DOM树。 也就是说render目的就是创建虚拟dom,这个组件到底要显示啥。 console.log(‘render’); ↓ 题外:console.di…

    技术文章 2021年4月11日
    0 11 0
  • vue backtop组件的实现完整代码

    效果: 代码: <template> <div class=”back-top”> <div > <img src=”imgsrc” class=”line” :class=”isHide? ‘isHide’: ‘isShow'” :style=”{display: (firstShow? ‘block’: ‘none’)}” @click=”backTop”> </div> </div> </template> <script> export default { name: “backTop”, …

    技术文章 2021年4月11日
    0 11 0
  • canvas实现有递增动画的环形进度条的实现方法

    老规矩,直接看图! 效果如下: 高清大图! 码农多年,老眼昏花,动图看不清?!那就看静态截图!!! 不同分值效果如下: 看完了卖家秀,我们来看产品的制作过程吧! canvas绘制圆环1、vue中,<template lang="pug">里的代码如下: canvas#baseCanvas是底部的灰色圆环 canvas#myCanvas是上边的彩色圆环 需要用css样式帮助我们把彩色圆环盖到灰色圆环上边。 2、css样式: 3、js-canvas的样式绘制代码 这段代码也很简单,看canvas的api即可 3-1、vue组件中,script标签顶部定义需要用的变量…

    HTML5 2021年4月5日
    0 6 0
  • canvas实现有递增动画的环形进度条的实现方法

    老规矩,直接看图! 效果如下: 高清大图! 码农多年,老眼昏花,动图看不清?!那就看静态截图!!! 不同分值效果如下: 看完了卖家秀,我们来看产品的制作过程吧! canvas绘制圆环1、vue中,<template lang="pug">里的代码如下: canvas#baseCanvas是底部的灰色圆环 canvas#myCanvas是上边的彩色圆环 需要用css样式帮助我们把彩色圆环盖到灰色圆环上边。 2、css样式: 3、js-canvas的样式绘制代码 这段代码也很简单,看canvas的api即可 3-1、vue组件中,script标签顶部定义需要用的变量…

    HTML5 2021年4月5日
    0 4 0
  • 基于Canvas+Vue的弹幕组件的实现

    最近由于项目需要定制化一个弹幕功能,所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿,和大家交流一下 弹幕效果 功能介绍 支持循环弹幕 弹幕不重叠 支持选择轨道数 支持弹幕发送 使用 npm i vue-barrage 参数配置 name type default desc barrageList Array [] 弹幕数据 speed Number 4 弹幕滚动速度 loop Boolean true 是否循环滚动 channels Number 2 弹幕轨道数 功能实现 html样式 <template> <div class="b…

    HTML5 2021年4月5日
    0 5 0