前端开发之VueDraggable使用和实例一、前言：二、Vue.Draggable简介三、效果图四、相关链接五、vue2中使用Vue.Draggable1、vue2安装插件2、vue文件六、vue3中使用

一、vue项目初始化-引入typescript使用typescript构建vue应用和使用js一样，都是通过vue-cli去初始化并创建一个vue项目，只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。二、typescriptVue项目比较使用typescript构建的Vue项目发生了一些变化:①main.js变成了main.ts，但是main.ts中

vite工程化开发：打包工具启动速度很快核心原理还是webpack把webpack封装了，把webpack对象封装了和vue2整体结构几乎一致webpack两种模式：开发&生产代码打包编译，本地起一个web

1、安装该插件npminstallvue-video-player2、项目main.js中引入importVideoPlayerfrom'vue-video-player'require('video.js/dist/video-js.css')require('vue-video-player/src/custom-theme.css')Vue.use(VideoPlayer)3、页面代码后退快

Vue2写法姓名:{{name}}年龄:{{age}}修改名字年龄+1exportdefault{name:'Person',data(){return

HibernateValidator附加的constraintConstraint详细信息@Email被注释的元素必须是电子邮箱地址@Length被注释的字符串的大小必须在指定的范围内@NotEmpty被注释的字符串的必须非空@Range被注释的元素必须在合适的范围内

个人简介个人主页：前端杂货铺‍♂️学习方向：主攻前端方向，正逐渐往全干发展个人状态：研发工程师，现效力于中国工业软件事业人生格言：积跬步至千里，积小流成江海推荐学习：前端面试宝典Vue2Vue3Vue2

目录1安装Node.js2使用命令提示符窗口创建Vue2.1打开命令提示符窗口2.2初始Vue项目[email protected]运行Vue项目3.1命令提示符窗口

computed计算属性函数计算属性基本思想和Vue2的完全一致，组合式API下的计算属性只是修改了写法核心步骤：导入computed函数执行函数在回调参数中return基于响应式数据做计算的值，用变量接收

可以做表单验证可以做页面的动态交互JS是什么？-W3C设立的标准：-结构语言：HTML...表现语言：CSS行为/交互语言：JS...它是一种基于事件和对象驱动的，具有安全性的脚本语言。

本篇只是我对尚硅谷张老师课程代码自己做的一个注释，只是一个学习笔记，所以要结合视频看才行啊课程视频（看12和13节）尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili1

1.安装组件npmiv-scale-screen2.vue2需要导入和注册,vue3直接导入即可importVuefrom'vue'importv-scale-screenfrom'v-scale-screen'Vue.use

效果图：全屏情况：vue2组件代码如下：1.适应长度宽度，不留白，（本demo是第一种，不留白）importdebouncefrom'lodash.debounce'exportdefault{components

.安装注：vue2使用[email protected]版本，vue3使用[email protected]版本[email protected].在

插件安装npmilib-flexiblenpmipx2rem-loader//自动将px转换为remnpmipostcss-pxtorem//自动将px转换为rem插件使用//main.jsimport'lib-flexible'插件配置//vue.config.jsmodule.exports={css:{loaderOptions:{postcss:{plugins:[require('pos

文章目录一、项目目录1、主目录2、打包入口二、构造函数Vue的初始化1、创建Vue构造函数2、初始化内容分析2.1initMixin2.2stateMixin2.3eventsMixin2.4lifecycleMixin2.5renderMixin一、项目目录源码版本：2.7.161、主目录src|--compiler#包含与模板编译相关的代码。它将模板字符串转换成渲染函数render。|--co

npm下载ElementUI组件库，下载安装方式参见官网：Element-Theworld’smostpopularVueUIframeworkElement，一套为开发者、设计师和产品经理准备的基于Vue2.0

在Vue2

一、Relation-graph是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素，并提供实用的API

relation-graph-ARelationshipGraphComponenthttps://www.relation-graph.com/3.选择relation-graph的理由4.项目中引用relation-graph4.1下载命令4.2在Vue2

一、组合式API基础1、简介组合式API(CompositionAPI)是Vue3和Vue2的v2.7之后版本中的全新特性，是一系列API的的集合（响应式API、生命周期钩子、依赖注入等等），其风格是基于函数的组合

文章目录动态组件1.什么是动态组件2.如何实现动态组件渲染3.使用keep-alive保持状态4.keep-alive对应的生命周期函数5.keep-alive的include属性插槽1.什么是插槽2.体验插槽的基础用法2.1没有预留插槽的内容会被丢弃2.2后备内容3.具名插槽3.1为具名插槽提供内容3.2具名插槽的简写形式4.作用域插槽4.1使用作用域插槽4.2解构插槽Prop自定义指令1.什么

文章目录动态组件1，什么是动态组件2，如何实现动态组件的渲染3，使用``保持状态4，``对应的生命周期函数5，的`include`和`exclude`属性插槽1，默认插槽2，具名插槽3，作用域插槽自定义指令私有自定义指令update函数函数简写全局自定义指令自定义插件动态组件1，什么是动态组件动态组件指的是动态切换组件的显示与隐藏。2，如何实现动态组件的渲染vue提供了一个内置的组件，专门用来实现

一、Vue3的优势Vue2OptionsAPI的缺陷：一个功能往往需要在不同的vue配置项中定义属性和方法，比较分散，需求简单还好，清晰明了；但是需求复杂之后，就会多出watch，computed，inject

文章目录学习目标1.动态组件1.1.什么是动态组件1.2.如何实现动态组件渲染1.3.使用keep-alive保持状态1.4.keep-alive对应的生命周期函数1.5.keep-alive的include属性了解组件注册名称和组件声明时name的区别2.插槽2.1.什么是插槽2.2.体验插槽的基础用法2.2.1没有预留插槽的内容会被丢弃2.2.2后备内容2.3.具名插槽2.3.1为具名插槽提供

持续更新vue2.0/3.0✊加油，共勉！

类似于vue2.x中的mixin。自定义hook的优势:复用代码,让setup中的逻辑更清楚易懂。10.toRef作用：创建一个ref对象，其value值指向另一个对象中的某个属性。

9.watch作用：监视数据的变化（和Vue2中的watch作用一致）特点：Vue3中的watch只能监视以下四种数据：ref定义的数据。reactive定义的数据。

latest按照提示创建项目cdvue3study进入所创建的项目目录npminstall安装项目需要的依赖包npmrundev运行项目二、项目内文件说明Vue3项目的入口文件改为index.html(vue2

文章目录问题分析问题在使用Element-uiel-form和el-dialog进行自定义表单校验时，出现点击编辑按钮之后再带年纪新增按钮，出现如下情况，新增弹出表单进行了一次表单验证，而这时不应该要表单验证的分析在寻找多种解决方案后

一、概述1.1、什么是VueVue是一个自底向上逐层应用、注重视图模块、快捷构建前端应用的渐进式框架！1.2、为什么使用Vue随着项目规模的增大、业务流程的复杂度提升，现在主流的项目开发方式主要是前后端分离模式灵活的前端应用：可以随时在不影响后端服务的情况下进行维护便捷的扩展维护：可以在独立的前端项目中不影响原有功能的情况下实现高效的功能扩展和维护鉴于上面的开发要求，使用Vue框架的优势：快速、高

拖拽组件dialogDrag.vueexportdefault{name:'dialogDrag',data(){return{originalWidth:null,originalHeight:null}},created(){this.$nextTick(()=>{this.dialogDrag()})},mounted(){},methods:{dialogDrag(){//获取弹窗DOMl

官方文档:快速上手|Vue3dloader(king2088.github.io)（注意：看清版本vue3跟2使用版本不同）1.下载[email protected].引入1.全局引入importvue3dLoaderfrom"vue-3d-loader";Vue.use(vue3dLoader)2.按需引入import{vue3dLoader}from"vue-3d-loader";

vue-3d-loader:VueJSandthreeJS3dviewer是对vue-3d-model的改进，降低Threejs使用难度#默认安装"vue-3d-loader":"^1.3.4",只支持vue2npmivue

vue3.0CompositionAPI上手体验vue3.0对比vue2.0优势vue3.0相比vue2.0性能提升了近50%，框架内部做了大量性能优化，包括：虚拟dom，编译模板，Proxy的新数据监听

目录两者的区别：原理角度对比：使⽤角度对⽐：用法实例：实例：Vue2中我们通常将响应式数据放在data中，再Vue3中提供了组合式API的写法，即数据和方法写在一起，便于维护。

VUE3介绍vue2和vue3之间的区别因为需要遍历data对象上所有属性，所以如果data对象属性结构嵌套很深，就会存在性能问题。

一.背景jenkins构建vue2的项目，每次都很慢，即便非常顺利都要1分多钟。之前的文章想到的私服的方式，windows下利用verdaccio私服让npm构建速度上来-CSDN博客。

理解vuexvuex是什么专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。Github地址:https://github.com/vuejs/vuex什么时候使用Vuex多个组件依赖于同一状态来自不同组件的行为需要变更同一状态Vuex工作原理图安装vuex终端输入npmivuex

前言：目前大多数新的vue项目都采用了vue3去写，在最近的项目中，需要展示数字滚动的效果，我就想到了之前用多的vue-count-to数字滚动插件，发现这个插件只使用于vue2项目，在vue3项目中并不试用

由于是在做对比类的，还有vue2的，所以先建vue2的用命令行建vue2的，报错发现有两个问题。

1、当前页面只用一次某个组件vue2是::v-deep.vant-button{}vu3则是::v-deep(.vant-button){}页面示例回到顶部::v-deep(.van-button){background-color

实现：ElementUI+假数据(使用时替换为接口数据即可)一.效果图二.代码exportdefault{name:'CellMerge',data(){return{tableData:[],//合并单元格arealameArr:[],//arealamearealameIndex:0,//arealame索引typeArr:[],//typetypeIndex:0,//type索引plance

忘了记一下看的视频了，有兴趣的可以去看一看，目前感觉讲的还不错，但是需要有一定基础：【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通】（学习记录第二部分，都写到一个博客里太长了，不利于阅读复习

先上最终效果图#实现过程：一、下载引入echarts下载npminstallecharts--save在main.js中引入import*asechartsfrom"echarts";Vue.prototype.$echarts=echarts;二、使用exportdefault{data(){return{powerEchartData:[{"thisPower":220,"voltage":2

插槽的基本使用：组件的子节点位置写的内容会被插入到子组件的标签的子节点中，当组件的子节点没有内容时，会默认使用标签的子节点内容。//父组件  {{website.title}}//这里传了就用传的值'imooc'data(){return{website:{url:'http://imooc.com/',title:'imooc'}}}//子组件默认内容，即父组件没设置内容时，这里显示//传了这里

项目背景最近一直在忙一个EPR系统的开发，新项目之前团队的技术栈基本停留于Vue2+Js+Webpack+Vuex上，但是Vue生态其实已经可以说进入了次时代，虽然我个人其实不是很倡议盲目的去追赶新的框架

效果图安装videojs首先使用npm安装video.jsnpmivideo.js在main.js中进行引入import"video.js/dist/video-js.css";importvideojsfrom"video.js";Vue.prototype.videojs=videojs;使用videojshtml：vue钩子：//父组件传递过来的视频地址，也可以将整个videojs的第二个参

这节主要介绍：vue2与vue3的区别，创建响应式的数据，setup语法糖的使用，watch监听，及vue3创建项目。

据说vue2用16稳定一些vue3用18好一点（但之前我vue3用的16.18.1也可以）为维护之前的老项目先搞定node版本切换下载nvmnode版本管理工具https://github.com/coreybutler