Vue
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
中亿丰数字科技集团有限公司
DTCloud是一套基于Python+Go开源商业应用程序.主要面向建筑工程行业,物联网行业,数字化行业,打造的企业信息一体化的解决方案。
展开
-
Vite 组件化开发
Vite 是一个基于 ES 模块的构建工具,旨在提供快速、轻量级的开发体验。与传统的打包工具不同,Vite 利用浏览器原生支持的模块加载能力,实现了更快的冷启动和热模块替换。它支持 Vue.js、React 和其他前端框架,并且具有开发服务器和优化的构建配置,可以大大提升前端项目的开发效率。原创 2023-06-26 13:47:59 · 146 阅读 · 0 评论 -
Vue中的Ajax请求和Slot插槽的技术探究
Ajax是一种异步的Web开发技术,用于在不刷新整个页面的情况下向服务器发送请求和接收响应。Slot插槽是Vue中一个强大的特性,它允许我们在组件中定义可插入的内容。通过使用Slot插槽,我们可以在父组件中向子组件传递任意的HTML或组件,实现更灵活和可重用的组件设计。使用插槽:在父组件中,使用子组件标签的起始标签和结束标签之间放置要插入的内容。导入Axios:在需要进行Ajax请求的Vue组件中,导入Axios库。元素将被插入到子组件的插槽中,从而在页面中显示出来。定义插槽:在子组件的模板中,使用。原创 2023-06-25 15:26:13 · 90 阅读 · 0 评论 -
vue中使用mqtt实现实时通信
MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议,是 TCP/IP 的再封装,由 IBM 在 1999 年发布。MQTT 最大优点在于,地开销,少流量实现网络通信。原创 2023-06-16 14:32:03 · 1007 阅读 · 0 评论 -
vue之computed
这个过程是通过一个依赖收集器来实现的,每个computed属性都有一个对应的Watcher对象,它会在computed属性被访问时收集所有依赖于它的属性,并在这些属性发生变化时触发更新。同时,由于computed属性是基于依赖的,所以它的计算结果会被缓存起来,只有在依赖的属性发生变化时才会重新计算,从而提高了性能。同时,由于computed属性是基于依赖的,所以它的计算结果会被缓存起来,只有在依赖的属性发生变化时才会重新计算,从而提高了性能。6.对数据进行动态响应,例如根据用户的输入动态计算某个属性的值。原创 2023-06-16 10:19:51 · 176 阅读 · 0 评论 -
vue之computed
Vue的computed属性是一种计算属性,它的值是根据其他属性计算而来的。Vue会自动追踪computed属性所依赖的属性,并在这些属性发生变化时重新计算computed属性的值。computed属性的实现原理是使用了Vue的响应式系统。当一个computed属性被访问时,Vue会检查它所依赖的属性是否发生了变化,如果发生了变化,就会重新计算computed属性的值。原创 2023-06-16 09:33:36 · 215 阅读 · 0 评论 -
Vue路由的基本概念
创建监听路由函数,路径发生变化后,动态去获取数据给路由添加key值。可以在根路由上为其分配一个唯一key。采用$route.fullpath作为其唯一key。这样vue就回认为内部路由每个都是不同的路由,在跳转时便会强制刷新组件。原创 2023-06-13 14:58:01 · 110 阅读 · 0 评论 -
vue3之setup
Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vue3 的 script 现在支持三种写法。1)最基本的 Vue2 写法setup() 属性无论是代码行数,还是代码的精简度,如果对 Vue 很熟悉,那么,推荐使用如果是前端新人,那么,推荐先学习第一种写法。因为第一种写法的学习负担更小,先学第一种方式,掌握最基本的 Vue 用法。第一种写法,跟过去 Vue2 的写法是一样的,所以不过多介绍。原创 2023-06-13 10:28:45 · 287 阅读 · 0 评论 -
Vue详介
指令是Vue.js的一种特殊语法,它可以将DOM元素与Vue.js实例中的数据绑定起来。状态管理是Vue.js的一种机制,它可以帮助开发者管理应用程序的状态,并使得应用程序更加可预测和可维护。指令是Vue.js的一种特殊语法,它可以将DOM元素与Vue.js实例中的数据绑定起来。v-bind指令可以将DOM元素的属性与Vue.js实例中的数据绑定起来,使得DOM元素的属性可以自动更新。状态管理是Vue.js的一种机制,它可以帮助开发者管理应用程序的状态,并使得应用程序更加可预测和可维护。原创 2023-06-12 17:28:55 · 77 阅读 · 0 评论 -
vue Router的原理及传参方法
Vue Router 是 Vue.js 官方的路由管理器,它和 Vue.js 的核心深度集成,可以非常方便地实现单页面应用程序(SPA)的路由功能。Vue Router 的原理主要是通过监听 URL 的变化,根据不同的 URL 显示不同的组件,从而实现页面的切换和跳转。总的来说,Vue Router 的原理比较简单,主要是通过路由配置、路由匹配和路由跳转来实现页面的切换和跳转。同时,Vue Router 还提供了一些高级功能,比如路由懒加载、路由嵌套等,可以帮助我们更好地管理和组织应用程序的路由。原创 2023-06-12 13:15:52 · 147 阅读 · 0 评论 -
vue3中使用less
请确保按照上述步骤正确安装和配置Less Loader,并正确引入Less文件和使用Less样式。对象中,你可以添加自定义的Less配置选项。例如,你可以设置全局变量、修改Less的行为等。这样,你就可以在Vue 3中使用Less来编写样式,并将其应用于组件中。是你的Less文件路径,根据你的项目结构进行调整。原创 2023-06-08 14:51:37 · 7070 阅读 · 3 评论 -
vue3+vite+less 实现简单换肤
在assets/style下创建variables.less。在main.js中引入variables.less文件。在assets/style下创建theme.less。主要通过切换class改变全局变量,实现换肤。先上主要文件目录结构。转载 2023-05-24 17:33:22 · 661 阅读 · 0 评论 -
vue 项目大屏端适配方法
在项目根目录创建 postcss.config.js 文件。上面的代码与安装的flexible.js不同。在main.js中引入。原创 2023-05-23 09:39:24 · 1570 阅读 · 0 评论 -
vue项目结合vant,实现上拉加载更多,下拉刷新
1.引入vant 组件 上拉list2.后端数据做了分页处理,获取接口数据,渲染到页面上,(此处只会显示一页的数据)3.设置属性去实现效果,loading,finished为vant组件中提供的4.每次滚动到底部后把页面数+1,发送一次请求获取新分页数据.5.获取完数据,将新获取的数据跟上一页获取的数据做一个合并,6.判断加载完毕,数据的长度小于1,则finished设置为true,表示所有数据加载完毕**初始设置loading 为true,数据加载成功,设置为false。原创 2023-05-22 10:16:21 · 2288 阅读 · 2 评论 -
Vue 3.0 自定义指令
= -1;});if (!f) {})usersPermissions 表示当前用户所具备的权限,正常该数据应该是从服务端加载而来,但是我这里简单起见,就直接定义好了。原创 2023-04-23 15:13:55 · 205 阅读 · 0 评论 -
vue项目结合,vant 实现中轮播图中,点击图片放大图片
【代码】vue项目结合,vant 实现中轮播图中,点击图片放大图片。原创 2023-04-23 13:45:00 · 1253 阅读 · 0 评论 -
论Vue和React的不同之处
Vue 和 React 都是用于构建 UI 界面的流行框架。它们的哲学也有很多相似的地方,我们可以认为这些特性是流行前端框架的一个趋势。原创 2023-04-15 09:08:28 · 94 阅读 · 0 评论 -
vue列表渲染之for循环
前端开发中,如果涉及列表渲染,都会提示或要求每个列表项使用唯一的 key,那很多开发者就会直接使用数组的 index 作为 key 的值,而并不知道 key 的原理。那么以下会讲解 key 的作用以及为什么最好不要使用 index 作为 key 的属性值。原创 2023-04-14 15:56:49 · 92 阅读 · 0 评论 -
Vuex
在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。原创 2023-04-13 16:20:54 · 67 阅读 · 0 评论 -
大屏设计器开发 - 项目搭建
大屏设计器项目开发纪实之项目搭建篇。原创 2023-04-03 09:25:23 · 178 阅读 · 0 评论 -
微信公众号跳转小程序 wx-open-launch-weapp,在vue3+vite中使用 (多个问题集锦)
写这篇文章为了解决现在没有⼀个合集 ,所以我参考其他文档, 及自己的测试最后得出完整的方案。原创 2023-03-29 10:02:01 · 699 阅读 · 0 评论 -
VUE SSR
概念:ssr(server side render)服务端渲染优点:1.有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面。2.对于网络慢或运行慢的设备,可提供良好的用户体验。3.可以减少对服务器的请求。缺点:1.开发受限制,比如mounted生命周期钩子不能用了,因为它只有在客户端页面转换成SPA页面的过程中才会被激活,而ssr只是将服务端生成的html字符串传递给客户端,所以不会执行该生命周期钩子。2.构建和部署的要求比较多,比如服务端要配置node.js环境。原创 2023-03-28 13:28:33 · 106 阅读 · 0 评论 -
Vue3 脚手架
1.如果想要在vite创建的脚手架工程中使用TypeScript,则只需如下即可,3.vite的配置文件,在根目录下新建一个vite.config.js文件。2.如果想要在vite创建的脚手架工程中使用SCSS,则需要如下,4.安装Vuex,参考Vue2的引入方式。5.安装路由,参考Vue2的引入方式。原创 2023-03-27 09:57:34 · 74 阅读 · 0 评论 -
微信公众号跳转小程序 wx-open-launch-weapp,在vue3+vite中使用 (多个问题集锦)
写这篇文章为了解决现在没有一个合集,所以我参考其他文档,及自己的测试最后得出完整的方案。原创 2023-03-03 09:42:40 · 1251 阅读 · 0 评论 -
基于vue2写一个echarts 插件
【代码】基于vue2写一个echarts 插件。原创 2023-02-15 10:02:16 · 184 阅读 · 0 评论 -
巧妙学习Vue的冷技巧
则在在中再举个例子:巧用$props$porps用于记录从父组件传入子组件的所有被props捕获以及不是class与style的参数。如则在在中,props的值为title:′title′。props的值为{title:'title'}。props的值为title:′title′。props可以用于自组件和孙组件定义的props都相同的情况,如:妙用函数式组件函数式组件相比于一般的vue组件而言,最大的区别是非响应式的。它不会监听任何数据,也没有实例(因此没有状态,意味着不存在诸如cre转载 2022-06-06 16:51:41 · 1486 阅读 · 0 评论 -
Vue3系列教程——脚手架
Vue3 脚手架使用vue-cli创建脚手架vue create myapp # 创建vue3工程,vue-cli版本必须在4.5.13以上运行项目,npm run serve原创 2022-05-27 18:18:06 · 1113 阅读 · 0 评论 -
Vue3系列教程——reactive
Vue3 reactive作用: 定义一个对象类型 或 数组类型的响应式数据(基本类型不要用它,要用ref函数)<template> <div>{{ job.type }}</div> <div>{{ arr }}</div></template><script>import { reactive } from 'vue' // 一定要引入reactiveexport原创 2022-05-27 18:10:22 · 5035 阅读 · 0 评论 -
Vue3系列教程——ref
Vue3 ref1. setupsetup是所有组合式api的入口。setup函数的两种返回值:返回对象返回函数代码示例,<template></template><script>export default { steup() { return{} }}</script><style scoped></style>2. ref作用: 定义一个响应式的数据<templ原创 2022-05-27 17:16:50 · 1134 阅读 · 0 评论 -
Vue2系列教程——自定义video样式
Vue2 自定义video样式具体实现,请看如下代码详解,<template> <div> <div style="width: 100%; height: 50px"></div> <div class="player"> <video id="myVideo" ref="video" src="../assets/video/sintel.mp4"></video>原创 2022-05-26 18:09:46 · 3235 阅读 · 0 评论 -
Vue2系列教程——跑马灯效果
Vue2 跑马灯效果在index.html文件中引入jquery-1.8.3.min.js和jquery.liMarquee.js文件,<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content原创 2022-05-26 18:06:11 · 1856 阅读 · 1 评论 -
Vue2系列教程——生命周期
Vue2 生命周期图示如下,beforeCreate:在这个生命周期函数中无法通过vm访问到data中的数据、methods中配置的方法,所以这里的this不是vm。created:在这个生命周期函数中可以通过vm访问到data中的数据、methods中配置的方法(在内存中),所以这里的this是vm。beforeMount:在这个生命周期函数中页面呈现的是未经Vue编译的DOM结构,无法操作DOM。mounted:在这个生命周期函数中页面呈现的是经过Vue编译的DOM结构,可以操作DOM。原创 2022-05-26 16:43:58 · 1051 阅读 · 0 评论 -
vue中wangEditor的使用
vue中wangEditor的使用安装wangEditor,npm install wangeditor --save代码如下,<template><div id="richText" style="width:100%;"></div></template><script>import { ref, onMounted } from 'vue'import E from 'wangeditor'setup() { c原创 2022-05-26 16:22:08 · 1134 阅读 · 0 评论 -
Vue2系列教程——SSR服务端渲染
Vue2 SSR服务端渲染概念:ssr(server side render)服务端渲染优点:有利于搜索引擎的SEO操作,由于搜索引擎爬取的是完全渲染出来的页面。对于网络慢或运行慢的设备,可提供良好的用户体验。可以减少对服务器的请求。缺点:开发受限制,比如mounted生命周期钩子不能用了,因为它只有在客户端页面转换成SPA页面的过程中才会被激活,而ssr只是将服务端生成的html字符串传递给客户端,所以不会执行该生命周期钩子。构建和部署的要求比较多,比如服务端要配置node.js环境。原创 2022-05-26 15:46:25 · 1378 阅读 · 0 评论 -
Vue2系列教程——单个页面倒计时的实现
Vue2 单个页面倒计时的实现要实现多个计数器倒计时,可以抽象出来写成函数,使用定时器每间隔1秒钟去倒计时,等时间等于0时,将定时器清零,这个会出现一个问题,就是如何清除多个定时器,这里可以采用将初始化的定时器都放到一个数组里,清除定时器就是将这个数组里的定时器都遍历出来并清理就行了,代码如下,let tempTimerArr = []export function timeCoutDown(timer, China_utc_time, fn) { let futureTime = toTim原创 2022-05-26 14:58:11 · 1965 阅读 · 0 评论 -
Vue2系列教程——消息订阅与发布
Vue2 消息订阅与发布需要安装pubsub-js库来实现消息订阅与发布,npm install pubsub-js #安装pubsub-js类库在School.vue文件中,<template></template><script>import pubsub from 'pubsub-js'export default { name: 'School', data() { return { name: '张三',原创 2022-05-25 18:29:48 · 997 阅读 · 0 评论 -
Vue2系列教程——数据代理原理
Vue2 数据代理原理原理:通过Object.defineProperty()把data中的所有属性添加到vm上,为没一个添加到vm上的属性都指定一个getter/setter,在getter/setter内部区操作data中的属性,一旦更改某个属性就会调用set()方法实现响应式。...原创 2022-05-25 17:52:20 · 1001 阅读 · 0 评论 -
Vue2系列教程——根据电脑分辨率不同,获取图片自适应的高度
Vue2 根据电脑分辨率不同,获取图片自适应的高度使用ref获取图片的offsetHeight属性,即可调整图片大小,<template><img src="../../assets/secondHead/CarAndProDetail_bg_head.png" alt="" style="width:100%;" ref="headimg"><img src="../../assets/back/back.png" ref="back" @click="back"原创 2022-05-25 17:14:28 · 1798 阅读 · 0 评论 -
Vue2系列教程——将js ES6兼容IE浏览器
Vue2 将js ES6兼容IE浏览器使用@babel-polyfill,可以将 Vue 中 ES6 的语法转成兼容 IE 内核的语法,配置如下,安装@babel-polyfill,注意这里要用 npm 源地址,淘宝源不行npm install --save @babel/polyfill在 main.js 中加入,import "@babel/polyfill";再在 babel.config.js 文件中添加,module.exports = { entry: ["@ba原创 2022-05-25 17:10:09 · 1692 阅读 · 0 评论 -
Vue2系列教程——vue-pdf插件
Vue2 vue-pdf插件安装 vue-pdf 插件,npm install --save vue-pdf<template><div class="pdf"> <pdf ref="pdf" :src="pdfUrl"> </pdf></div></template><script>import pdf from "vue-pdf"export default { components: {原创 2022-05-25 16:12:35 · 2942 阅读 · 0 评论 -
Vue2系列教程——跑马灯效果
Vue2 跑马灯效果在 Vue 中使用 jquery.liMarquee.js 插件,在 public 目录 index.html 中引入 jquery.liMarquee.js,在 vue 组件中的 mounted 属性里,使用 liMarquee()方法开启轮播图效果,示例代码如下,<template> <div class="jq22-container"> <div class="str3-2 str_wrap"> <span>1<原创 2022-05-25 15:36:25 · 1862 阅读 · 0 评论