标签：npm vue mes reademe 组态 对象 https 组件 监听
组态开发项目reademe文档
- 路由配置的两种方式
- document.titile="首页" document.title可以改变当前页的网址上的文字描述
- 1 vue create项目时：
- 2 npm run dev启动项目时：
- 3 项目启动成功后报错：
- 4
- 5
- 1 为什么前端要做模块化开发
- 2 模块化开发的概念
- 3 常见的模块化规范有：CommonJS, AMD, CMD, ES6的Modules
- 1 脚手架工具的作用：
- 1 input/button具有特别的监听事件
- 2 浏览器的event对象
- 3 v-model实现数据双向绑定的原理
- 4 data() { return {} }
- 5 父子组件之间传值
- 6 父子组件之间的访问
- 7 v-bind
- 8 计算属性
- 9 插槽 slot
- 10 this. r o u t e r t h i s . router this. routerthis.route
- 11 所有的组件都继承自vue类的原型
- 12 全局导航守卫
- 13 router-view是VueRouter的组件。
- 13 keep-alive是vue内置的组件，
- 使用vuex
- 使用码云gitee https://blog.csdn.net/qq_36545813/article/details/105673756
- 引用echarts图表
- vue兄弟组件之间拖拽失败 尝试安装插件vuedraggable
- vue-draggable-resizable: vue3/vue2 可拖拽+调整大小+参考线+对齐吸附 基本所有组态功能这个插件里都有了
- vue 分割页面布局 用户可自定义拖拽改变：vue-splitpane
- 使用extends继承其他组件 extends可以继承多个吗？
- 自己封装组件。可以通过{{ keydata }}和props:{keydata:{}}，在引用封装组件时直接通过这种书写方式来使用：
- 使用bootstrapvue https://bootstrap-vue.org/docs
- vue封装js文件
- Math
- 对侧边栏实现拖拽的内容进行组件封装
- 如何让子组件宽度撑满父容器
- vue: Initialize failed: invalid dom 之 dom加载出现的问题
- 键盘事件： https://www.cnblogs.com/eAndyLau/p/12916891.html
- 怎么实现，拖拽进来多少个canvas对象，centertest就生成相应多个canvas呢？而不是像目前一样使用一个canvas标签，通过拖拽的目标对象给canvas的id动态赋值：
- 对象转数组 ES6 Object.func()用法：
- 数组转对象：
- 判断字符串中是否包含某个子串
- 截取字符串中某个特定字符之前的子字符串/之后的子字符串
- 获取字符串末尾的一个字符
- 判断两个字符串是否相等 ？
- 深拷贝浅拷贝： https://www.jianshu.com/p/1c142ec2ca45
- 设置除数后保留两位小数：
- 获取鼠标在main面板的坐标： clienxX,offsetLeft... http://c.biancheng.net/view/5960.html
- CSS 子元素铺满整个父元素/让子元素的宽高随着父元素的宽高缩放：
- 通过js给DOM元素添加一个类名：
- ant_design_vue的下载和使用：
- computed监听Vuex中state对象中的对象属性时，监听不生效的问题 mutations
- 清空canvas画布!!
- 怎么清除画布中的某个图像
- 删除元素节点：
- 项目中实现，选中一个对象，改变侧边栏数据，让选中对象的样式发生变化的思路：
- watch，监听对象内的属性值的变化： https://www.cnblogs.com/my466879168/p/12430648.html
- 获取鼠标距离事件源左上角的坐标
- 通过id获取元素宽高：
- js遍历键值对数组：
- 删除数组中的元素
- 获取到id，document.getElementById为null。
- classList:
- 判断字符串中是否包含数字
- 删除字符串中的数字：
- arr.map() 遍历数组,不改变原始数组数据
- 点击目标div以外区域将目标div隐藏:
- 判断dom1是否包含在dom2元素内
- 背景纹理填充：？
- 判断obj {} 对象中是否包含某个属性
- 拖拽组态开发功能原理分析：
- js判断obj对象是否为空 {}
- vue 自定义路径别名 @
- 动画绑定。
- 事件绑定。原理和动画绑定类似。
- vue中通过transition使用通过。并在vue中使用Animate.css动画库：
- 在vue中使用velocity.js动画库
- vue动画封装：
- 监听mac下的键盘按键：
- 用户自定义控制组件的选中状态 vuedraggableresizable插件的:active属性
- vue mixins和extends的区别：
- 事件修饰符：
- 事件监听
- js判断两个数哪个更大哪个更小 https://www.cnblogs.com/my12-28/p/11815579.html
- js截取字符串'-'前/后的子字符串
- 实现鼠标全选：
- for循环和闭包。闭包函数会在for循环结束后才执行。假如闭包写在循环内，怎样才能实现循环依次执行依次闭包？
- js给同一DOM同时绑定单击和双击事件的解决方案。
- 使用模板字面量 `vvv` ，来拼接字符串和对象，还可以引入表达式，也支持换行
- event.preventDefault() 通知浏览器不要执行于事件相关联的默认动作
- 如何实现echarts宽高自适应 随着盒子的resize而改变大小
- vue this.$refs
- 如何在json文件中引用另一个json文件
- js 取绝对值
- vue 监听watch：
- echarts图表自适应
- echarts//避免控制台警告：There is a chart instance already initialized on the dom.
- vue+webpack项目动态设置页面title的方法
- vue如何将组件内容保存为html页面
- js 如何弹出下载窗口
- 如何实现保存html
- vue导出为pdf：
- 已实现：
- 剩余实现：鼠标单击并拖拉，实现范围内选取对象。
- vue 3
- typescript
- MongoDB
- npm install ant-design-vue --save
vue2 项目
========= vue cmd命令所包含知识点：
清除缓存：npm cache clean --force
当npm install无效，需要进行npm cache clean --force命令操作，
如果这样操作不成功的话，去C盘清空一个文件夹：
C/用户/administrator/appdata/Roaming/npm-cache 直接将路径下该文件夹右键删除
再重新npm install
#删除node_modules
npm cache clean --force 强制清楚缓存
npm install rimraf -g
rimraf node_modules
重装：npm install
#canvas库—ocanvas
npm install ocanvas --save
import oCanvas from ‘ocanvas’
var oCanvas = require(‘ocanvas’)
路由配置的两种方式
1 location.hash=“url” 可以通过hash来改变href，但页面不发生刷新
2 history.pushState({},’’,‘url’) 也可以通过html的history改变路由且不刷新页面
replaceState() go() back() forward()
安装vue-router: npm install vue-router --save 添加–save是因为项目运行时也需要依赖路由
document.titile=“首页” document.title可以改变当前页的网址上的文字描述
学会使用StackOverflow和GitHub提问
https://segmentfault.com/a/1190000023737670
在vue3项目中使用scss:
npm install sass-loader --save-dev
npm install node-sass --save-dev
全局安装vue3脚手架：
npm i -g @vue/cli
vue3 通过vite初始化项目： 学习vue3.0，先从搭建环境开始 https://segmentfault.com/a/1190000023737670
yarn/npm create vite-app vue3project
一步直接创建项目。
vue add vue-next 让vue支持3.0
在vscode给vue文件创建一个模板页
报错问题记录及解决过程
1 vue create项目时：
ERROR Error loading saved preferences: ~/.vuerc may be corrupted or have syntax errors. Please fix/delete it and re-run vue-cli in manual mode.
2 npm run dev启动项目时：
Uncaught SyntaxError: The requested module ‘/@modules/vue.js’ does not provide…
3 项目启动成功后报错：
Failed to resolve component: router-link
4
Failed to reload /src/App.vue. This could be due to syntax errors or importing non-existent modules. (see errors above)
5
Uncaught (in promise) TypeError: Cannot read property ‘default’ of undefined
=模块化开发====
1 为什么前端要做模块化开发
避免多人开发时变量重名等问题
2 模块化开发的概念
早期的模块化开发的实现，是通过匿名函数，使得多人开发时变量重名不会影响整体项目。同时将需要全局使用的变量或者函数通过return方式暴露出去–导出。这样就可以在其他位置直接使用–导入。
3 常见的模块化规范有：CommonJS, AMD, CMD, ES6的Modules
模块化开发的关键就是导出和导入的操作。
===webpack的作用/安装和使用/配置
webpack是用来模块化开发的工具。除了支持模块化开发，还可以进行打包，压缩，合并等功能。
1.1webpack安装和使用
vue脚手架 vue cli=====
1 脚手架工具的作用：
帮助完成项目的代码目录结构，项目结构和部署，热加载，代码单元测试等功能。
vue cli俗称vue项目脚手架，可以快速搭建vue开发环境以及对应的webpack配置。所以使用vue cli需要先安装node(因为webpack的使用需要先安装node，然后才能使用npm—npm为node自带的)
-
安装node：
直接在官网下载安装：http://nodejs.cn/download/ -
检测安装的node版本：
node环境要求版本 >= 8.9 -
什么是NPM？node package manager
npm是一个nodejs包管理和分发工具，已经成为非官方的发布node模块的标准
国内直接使用npm的官方镜像非常慢，所以推荐使用淘宝npm镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
一般org网址都是非营利性的。com结尾的网址是营利性的
安装vue cli3版本，既可以使用3版本，也可以使用2版本。所以直接安装3版本cli就好了。
npm install -g @vue/cli 安装vue cli3
cli3版本下创建vue项目：
vue create projectname
如果按照3版本后想要使用2.x旧版本。可以通过命令直接拉取旧版本
npm install -g @vue/cli-init
cli2版本下创建vue项目：
vue init webpack projectname
runtime compiler / runtion only的区别========
============vue所包含知识点：
1 input/button具有特别的监听事件
input有个特有的动态监听事件，用来监听表单数据value的变化。v-on:input/@input
当input表单内数据value发生变化时会触发:input监听事件
button也有特有的监听事件
2 浏览器的event对象
cli(event) {
//@click=“cli” 当调用方法不传参不加括号时，会自动调用浏览器产生的event对象
console.log(event);
},
cli0(val,event) {
//@click="cli0(123,
e
v
e
n
t
)
"
当
需
要
调
用
浏
览
器
的
e
v
e
n
t
对
象
又
需
要
传
参
时
。
e
v
e
n
t
+
event)" 当需要调用浏览器的event对象又需要传参时。event+
event)"当需要调用浏览器的event对象又需要传参时。event+符号
console.log(val);
console.log(event);
},
3 v-model实现数据双向绑定的原理
v-model实现数据双向绑定的原理： v-model实际上使得vue做了两步操作：
1.v-bind model—>view
2,input的特有监听事件@input view—>model
4 data() { return {} }
为什么vue在设计的时候data是一个函数，而不是直接一个对象？
因为对象return的是同一片内存空间。这样会导致组件在复用时，所有复用组件使用同一片内存地址。导致数据紊乱。
data必须是一个函数。每调用一个组件实例，就会调用一个data函数。而函数return的是一片新的内存地址。这样使得所有复用的组件之间互不影响。
组件化开发：========
5 父子组件之间传值
++ 4.1 父组件向子组件中传值：
props:[‘变量1’,‘变量2’,‘变量3’];//最基础的写法，数组类型，不推荐
props:{//对象类型，推荐。可以对传过来的值进行类型审核和简单验证，同时也方便阅读和简单维护
propA:Number,//基础的类型检查
propB:[String,Number],//多个可能的类型
propC:{//必填的字符串
type: String,
required:true
},
propD:{//带默认值的数字类型
type:Number,
default:100
},
propE:{//带默认值的对象
type:Object,
default:function() {//Object or Array的默认值是一个函数
return { msg:‘hi’ }
}
},
propF:{//自定义验证函数
validator:function(value) {
//这个值必须匹配下列字符串中的一个
return [’’,’’,’’].indexOf(value) !== -1;//返回值true or false
//arr.indexOf(item) 判断数组arr中是否包含元素item。如果不包含则返回-1
}
}
}
++ 4.2 子组件向父组件传值：
在子组件中使用this.$emit(‘func’,value)
在父组件调用子组件时:
<son @func=“sonhappen”/>
methods:{
sonhappen(value) {
//注意，父组件中此处接收的值都是string类型。
console.log(value)
}
}
6 父子组件之间的访问
++父组件直接访问子组件：
this.
c
h
i
l
d
r
e
n
：
数
组
类
型
一
般
不
使
用
children： 数组类型 一般不使用
children：数组类型一般不使用children来拿子组件数据。而是使用
r
e
f
s
可
以
访
问
父
组
件
的
所
有
子
组
件
对
象
，
包
括
子
组
件
的
子
组
件
；
可
以
访
问
子
组
件
的
所
有
数
据
。
t
h
i
s
.
refs 可以访问父组件的所有子组件对象，包括子组件的子组件；可以访问子组件的所有数据。 this.
refs可以访问父组件的所有子组件对象，包括子组件的子组件；可以访问子组件的所有数据。this.refs: 对象类型 好像行不通啊？？
this.$refs.name可以访问到son子组件的所有数据。name会作为子组件对象的key值。
++子组件访问父组件：
this.
p
a
r
e
n
t
：
可
以
在
子
组
件
中
访
问
到
父
组
件
对
象
。
一
般
开
发
中
不
使
用
。
会
影
响
组
件
的
独
立
性
。
t
h
i
s
.
parent：可以在子组件中访问到父组件对象。一般开发中不使用。会影响组件的独立性。 this.
parent：可以在子组件中访问到父组件对象。一般开发中不使用。会影响组件的独立性。this.root：可以在子组件中访问根组件即vue实例对象
7 v-bind
v-bind不支持驼峰写法
v-bind:cInfo=“info” 这样写会出现值传递失败的情况 需要改成v-bind:c-info=“info”
8 计算属性
计算属性存在缓存。在多次调用时，由于存在缓存，只会执行一次。
与methods的区别：methods调用几次执行几次
9 插槽 slot
插槽的作用：为了让组件具有可扩展性。
9.1基本插槽的使用：
在自定义的组件中使用。可以在插槽内填入默认内容。
在引用组件时，可以在组件内直接填入内容。就可以替换子组件内插槽的默认内容。
9.2具名插槽的使用：
一个子组件内可能存在多个插槽，当引用子组件时，可能只希望替换其中某一个插槽的内容。这时候就可以使用具名插槽。即给每个slot一个特有的name属性值。
在子组件中：
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
在父组件中引用子组件时：
<son><div slot="center">我要把son组件内的center插槽内容替换掉</div></son>
9.3作用域插槽：
—有个需求：子组件中包含一个数组数据。需要在不同的位置进行展示。有的地方水平展示，有点地方纵列展示，有的位置直接显示一个数组。希望父组件告知子组件具体如何展示。
—以上需求就可以使用作用域插槽。展示数据由子组件提供。但展示方式由父组件决定。
—所以需要先在父组件中拿到子组件的数据：
1,在子组件中将子组件的数据绑定到abc： [abc可以随意更改成你喜欢的名字]
在son组件中：
子组件默认展示
2，在父组件中引用子组件son时，使用拿到子组件数据： slot.abc就是从子组件获取到的数据
10 this. r o u t e r t h i s . router this. routerthis.route
this.
r
o
u
t
e
r
指
的
时
n
e
w
V
u
e
的
实
例
对
象
t
h
i
s
.
router 指的时newVue的实例对象 this.
router指的时newVue的实例对象this.router.push/this.
r
o
u
t
e
r
.
r
e
p
l
a
c
e
t
h
i
s
.
router.replace this.
router.replacethis.route 指的是当前活跃状态下的路由对象
{ path:’/user/:abc’,component:user } this.$route.params.abc
11 所有的组件都继承自vue类的原型
所以通过Vue.prototype.自定义的方法和变量，整个vue项目中的所有组件都可以使用变量或方法
12 全局导航守卫
https://blog.csdn.net/qq_36545813/article/details/109510815
13 router-view是VueRouter的组件。
13 keep-alive是vue内置的组件，
可以使被包含的组件保留状态，或避免重新渲染；
被包裹在keep-alive里面的组件，所有路径匹配到的视图组件都会被缓存。
keep-alive有两个非常重要的属性，开发者可以自由定义哪些组件需要被缓存，哪些组件需要被重复创建和销毁【一般存在每次进入路由都需要重新更新的情况】
–inclue属性：只有相匹配的组件才会被缓存–字符串或正则
–exclue属性：任何相匹配的组件都不会被缓存–字符串或正则
比如app.vue下有a b c 3个组件，且全部都被keep-alive包裹，但我需要每次切换到组件C时都重新创建。
可以这样操作： c是组件的name值。如果需要排除多个组件，使用逗号分隔就好，需要注意的是不能多添加空格，否则会出错
使用vuex
npm i vuex -S
npm i es6-promise -S
使用码云gitee https://blog.csdn.net/qq_36545813/article/details/105673756
在码云新建仓库并第一次将本地代码提交
在控制台：
git comfig --global user.name ‘677’
git config --global user.email ‘1592713356@qq.com’
创建本地git仓库：
mkdir storename
cd storename
git init
touch READEME.md //注意：如果报错touch:无法将’touch’项识别为cmdlet… 安装touch :npm install touch-cli -g 安装后再执行touch READEME.md
git add READEME.md
git commit -m ‘first commit’
git remote add origin https://gitee.com/…
git push -u origin master
引用echarts图表
npm install echarts --save
在引用echarts的组件内import echarts from ‘echarts’
绘制一个图表：
1,准备一个具备宽高的容器：
2,通过echarts.init初始化一个echarts实例： var myPie = echarts.init(document.getElementById(‘pie’))
3,通过setOption方法生成图表：
var option = {}
myPie.setOption(option)
#Vuex中执行完mutations，更新了state后，视图不更新 vuex中state数据是异步渲染的。初始渲染的是state中的默认数据。在渲染时去获取三层表达式中的属性值，此时对象还不存在，获取不到值。这样就会造成，在界面上可以正常打印出值，但是
https://blog.csdn.net/edc3001/article/details/86833558
#vue中实现移动拖拽 h5的drag & drop
参考：
- 事件参考：https://www.cnblogs.com/caolidan/p/9887893.html
- 事件理解和属性理解参考：https://blog.csdn.net/ruler1112/article/details/77604578?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.control
- 比较全面的理解：https://www.cnblogs.com/moqiutao/p/6365113.html
- 给移动元素添加：
@dragstart=“Dragstart($event,item)”
draggable=“true” - methods:{
Dragstart (event, item) {//@dragstart是vue自带的mouseevent事件
console.log(’===================dragstart’);
console.log(event);//
console.log(item);
var infoJson = JSON.stringify(item.info);
event.dataTransfer.setData(‘my-info’, infoJson);
}
}
/** - dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
- 事件顺序：
- dragstart -> drag -> dragenter -> dragover -> dragleave -> drop -> dragend
- 拖放事件
- (默认图像,链接,文本是可以拖动的)
- (别的元素要拖动首先设置draggable=“true”:对于draggable的支持ie10+,ie9-只能使用默认拖动)
-
- 被拖放元素拖放事件:
-
被拖放对象：dragstart：开始拖放的时候触发 -
被拖放对象：drag：在拖放过程中持续触发 -
经过对象：dragenter：拖放过程中鼠标经过的元素，被拖放的元素‘正开始’进入其他元素范围内 e.preventDefault() -
经过对象：dragover：拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直) e.preventDefault() -
经过对象：dragleave：拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围 -
目标地点：drop：拖放元素被放置到目标点的时候触发 -
被拖放对象：dragend：拖放操作结束时触发 -
- 拖放中的数据传递
-
a.在拖放数据的时候使用dataTransfer来存储和获取数据 -
b.存储数据:ev.dataTransfer.setData("类型","值") 类型通用有两种:"text/plain"和"text/url-list"(ie中使用"text"和"url") -
c.获取数据:ev.dataTransfer.getData("类型")类型同上 -
(获取数据是在目标对象的drop事件上获取在别的事件上都取不到) -
(注意设置document的dragover和dragend为return false否则获取不到数据) -
(目标有几层元素就会触发几次) -
- dropEffect和effectAllowed(这是dataTransfer的两个属性)
-
对于拖动元素而言在dragstart时设置effectAllowed不为none光标显示为指针而不是禁止标志 -
这两个属性的主要作用：用于设置拖拽过程中鼠标指针的类型。 - 4.dataTransfer属性:
-
a. clearData(format):清除特定格式的数据 -
b. setDragImg(elem,x,y):设置拖动的时候光标下面显示的图像,(x,y为光标在图像上的位置) -
(这个方法还是很好用的,但是不支持ie) - dragenter 和 dragover需要阻止浏览器的默认事件。
*/
vue兄弟组件之间拖拽失败 尝试安装插件vuedraggable
http://www.itxst.com/vue-draggable/tutorial.html
- 因为拖拽组件依赖sortablejs ，如果项目没有安装sortablejs ，可能需要安装一下
- npm install sortablejs --save
- npm install vuedraggable --save
- 局部注册：
import draggable from ‘vuedraggable’
components:{
draggable
}, - ====================安装依赖后，dragenter生效 dragend生效 但drop无效
- 博客参考：https://www.cnblogs.com/birdshome/archive/2006/07/22/Drag_Drop.html#457694
事件参考：https://developer.mozilla.org/zh-CN/docs/Web/Events 资源事件/键盘事件/鼠标事件/拖放事件/媒体事件/进度事件/触摸事件/浏览器事件等 - drop事件参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/drop_event
- https://developer.mozilla.org/zh-CN/docs/Web/API/DragEvent
- vuedragable插件功能实现拖拽都是操作Array or Object数据：
- @start
- @move
- @changed
- @end
- vuedragable插件：https://blog.csdn.net/qq_36545813/article/details/111468646
- https://blog.csdn.net/zjiang1994/article/details/79809687
- vue拖拽组件vuedragable-demo：http://www.ptbird.cn/vue-draggable-dragging.html
- https://sortablejs.github.io/Vue.Draggable/#/clone
- vue拖拽组件vuedragable-code：https://github.com/SortableJS/Vue.Draggable/blob/master/src
- vue拖拽插件。使用vuedraggle :思路
====开始拖拽时获取到相应组件名。在change时将组件名复制给component 的is属性 还是不可行
====通过json文件来定义组件信息，v-for循环组件信息，并通过事件获取当前组件信息。 - vuedraggable内部元素的click事件与@drop事件冲突问题：
参考：https://blog.csdn.net/qq_33270001/article/details/106264832
vue-draggable-resizable: vue3/vue2 可拖拽+调整大小+参考线+对齐吸附 基本所有组态功能这个插件里都有了
- vue2draggableresizable :https://github.com/gorkys/vue-draggable-resizable-gorkys
- 博客园文档参考连接：https://www.cnblogs.com/wangweizhang/p/11241788.html
- 组件事件git连接：https://github.com/gorkys/vue-draggable-resizable-gorkys/blob/master/README_ZH.md
- demo: https://tingtas.com/vue-draggable-resizable-gorkys/?path=/story/%E5%9F%BA%E6%9C%AC–%E5%9F%BA%E6%9C%AC%E7%BB%84%E4%BB%B6
- https://blog.csdn.net/ksyjy/article/details/105294894
- npm install vue-draggable-resizable --save
- 在main.js引入：全局
import VueDraggableResizable from ‘vue-draggable-resizable’
import ‘vue-draggable-resizable/dist/VueDraggableResizable.css’
Vue.component(‘vue-draggable-resizable’,VueDraggableResizable) - 局部引入：
import VueDraggableResizable from ‘vue-draggable-resizable’
import ‘vue-draggable-resizable/dist/VueDraggableResizable.css’ - 常用属性总结：
https://github.com/gorkys/vue-draggable-resizable-gorkys/blob/master/README_ZH.md#props - :lock-aspect-ratio=“true” 保持拖拽组件的宽高比
- :parent=“true” 限制不能拖出父元素
- parent=".p-event" 限制不能拖出类名为p-event的元素
- :active= “true/false” 通过active来自主控制盒子是否为选中状态
- :prevent-deactivation=“true/false” 通过该属性来定义点击对象外是否需要取消选中状态
- https://www.npmjs.com/package/vue-draggable-resizable-gorkys
- 吸附对齐，辅助线，冲突检查等功能需要在插件vue-draggable-resizable-gorkys中才有 ,这个插件是上面插件的升级
- npm install --save vue-draggable-resizable-gorkys
- 局部引入：
import vdr from ‘vue-draggable-resizable-gorkys’
import ‘vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css’ - :isConflictCheck=“true” 冲突检查
- 元素对齐辅助线：
:debug=“false” 啥意思？
:snap=“true” 定义组件是否开启元素对齐
:snapTolerance=“20” 吸附 当调用snap时，定义组件与元素之间的对齐距离，以像素(px)为单位
@refLineParams=“getRefLineParams”
:referenceLineColor="#0f0" 辅助线的颜色
-
- :grid=[20,20] 盒子内的目标具有偏移
grid表示水平和垂直轴上移动时，每次能走多少像素 - :axis=“axis” 表示沿X轴/y轴移动 值：x/y/both
- @activated=“onActivated” 单击时调用 ，以显示句柄
- @deactivated=“onDeactivated” 单击组件外的任何位置时调用。
- :enable-native-drag=“false” 禁用浏览器的本机拖放功能（通常用于图像和其他一些元素），恢复使用true
- :active.sync=“true” 确定组件是否应处于活动状态
- :draggable=“false” 定义该组件是否可拖拽
- :resizable=“false” 默认true
- class-name-active=“active” 用来定义活跃状态 css: .active{}
以上属性发现：即使不设置class-name-active=“active”，有css: .active{} 就行
vue 分割页面布局 用户可自定义拖拽改变：vue-splitpane
- https://antoniandre.github.io/splitpanes/
- npm i splitpanes # For Vue 2.x.
- npm i splitpanes@next # For Vue 3.
- // In your Vue component.
- import { Splitpanes, Pane } from ‘splitpanes’
- import ‘splitpanes/dist/splitpanes.css’
- export default {
- components: { Splitpanes, Pane },
- …
- }
#批量注册全局方法
- 定义全局方法 https://www.cnblogs.com/conglvse/p/10062449.html
- 在main.js引入：import globalmethods from ‘url’ Vue.use(globalmethods)
- 在所有组件中通过this.function调用
使用extends继承其他组件 extends可以继承多个吗？
- 应该可以，但是viewcanvas继承两个viewcircle和viewrect只能显示一个 只继承viewrect，再viewrect中继承viewcircle才可以实现两个canvas都显示
- 在canvas绑定拖拽事件：需要在viewcanvas绑定 在组件内部的canvas标签上也要绑定 否则不生效 这样生效的效果是：两个canvas都会同时移动。若要一个canvas对应一个盒子的画。那不能公用一块画布了。
- 调整了canvas文件结构。使用一个页面用来作画布，再使用一个页面专门用来作画笔–即实现canvas的具体方法。详见代码leftPanel的canvas文件夹。
自己封装组件。可以通过{{ keydata }}和props:{keydata:{}}，在引用封装组件时直接通过这种书写方式来使用：
使用bootstrapvue https://bootstrap-vue.org/docs
- npm install bootstrap-vue bootstrap
- 在mani.js文件中：
- import Vue from ‘vue’
- import { BootstrapVue, IconsPlugin } from ‘bootstrap-vue’
- // Install BootstrapVue
- Vue.use(BootstrapVue)
- // Optionally install the BootstrapVue icon components plugin
- Vue.use(IconsPlugin)
- import ‘bootstrap/dist/css/bootstrap.css’
- import ‘bootstrap-vue/dist/bootstrap-vue.css’
vue封装js文件
https://www.cnblogs.com/yanl55555/p/12543993.html
Math
- Math.floor(Math.random() * (max-min + 1) + min) 生成区间在[min,max]之间的随机数
对侧边栏实现拖拽的内容进行组件封装
如何让子组件宽度撑满父容器
vue: Initialize failed: invalid dom 之 dom加载出现的问题
- 问题解决的参加博客：https://blog.csdn.net/smalCat/article/details/89091966?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.control
- promise了解: https://blog.csdn.net/qq_36545813/article/details/110121219
- 导致问题的原因：异步加载。当echarts.init()去初始化的时候，此时DOM还没加载，echarts没有检测到DOM。所以此问题的解决方向让DOM加载后再去init()。可以通过promise异步，读写分离。
- 我认为还可以使用 this.
n
e
x
t
T
i
c
k
(
(
)
=
>
)
表
示
当
D
O
M
加
载
完
成
时
再
去
执
行
。
但
使
用
p
r
o
m
i
s
e
和
nextTick(() => { }) 表示当DOM加载完成时再去执行。但使用promise和
nextTick(()=>)表示当DOM加载完成时再去执行。但使用promise和nextTick后依然报错。=====所以一下没有新的解题思路了。？？？？？？ 在画canvas的时候也遇到document.getElementById为null的问题，原因也是DOM未加载就去引用。解决方式使用this.$nextTick()是成功的。
所以这里的echarts初始化应该是其他问题。待研究。
键盘事件： https://www.cnblogs.com/eAndyLau/p/12916891.html
- delete：
- created () {
-
document.onkeydown = (e) => { -
let key = window.event.keyCode; -
if(key == 46|| key == 8) {// delete||backspace -
alert('删除canvas') -
let id = this.selectedid; -
console.log(id); -
const targetcanvas = document.getElementById(id); -
targetcanvas.remove();//删除元素 -
} -
} - }
- CV事件：
- (e.keyCode == 67 && e.ctrlKey) ctrl+c
- if(e.keyCode==86 && e.ctrlKey){
- alert(“按下了Ctrl+V 键”)
- }
- CS / CZ /CN
e.keyCode == 83 && e.ctrlKey -> Ctrl + S
e.keyCode == 90 && e.ctrlKey -> Ctrl + Z
e.keyCOde == 79 && e.ctrlKey -> Ctrl + N
怎么实现，拖拽进来多少个canvas对象，centertest就生成相应多个canvas呢？而不是像目前一样使用一个canvas标签，通过拖拽的目标对象给canvas的id动态赋值：
- 想到一个解决方法：centertest默认data为空，每拖拽进来一个对象，就相应push一条数据进去。根据数据，去动态渲染页面。动态控制html标签。
- 动态push数据，可以使用vuedragable组件自带的事件。===push成功了，但左侧的图标却会消失[原因是：dragable的list属性值和icon渲染的数据为同一条数据，当拖拽后remove一条数据，渲染icon的组件的数据也会减少。处理方法：定义一个空数组，将icon数据全部赋值给它，然后操作这个数组数据，就不会互相影响了]。
- 使用拖拽插件动态push数据不太可行，push数据的内容是插件自带的封装好的数据，自定义的话反而式代码和逻辑都变得更加麻烦。只要在centertest.vue中，将每一个拖拽过来的当前mes数据进行组合就好了啊！真笨呢在这折腾了大半天
- 动态push数据后，可以遍历数据生成多个canvas，然后给每个canvas绑定拖拽事件。键盘删除事件，单击双击事件。[根据动态数据渲染生成多个canvas时，每个canvas对应一个唯一ID，那么每个icon图标只能拖拽画一次canvas，否则无效，按说应该会报错，结果页面会生成ID同名的多个canvas，但不会再生成图像。这个问题怎么解决呢？==========虽然每个图标对应一个id，可每拖拽一次，可以给传进来的数据的id值添加索引号。这样就能保证id具有唯一性。再通过getElementId(ID)获取el画布。]
- [生成的canvas盒子宽高即需要画的图的宽高。而图像的x,y坐标是相对当前画布canvas，新的canvas的坐标应该是画布相对于main盒子的定位？这个问题需要解决。解决完了，再绑定事件。]====但是坐标的相对定位元素是canvas的绘图方法规定的。根据这一点，应该让所有的图都画在一个canvas内。这样才能实现正确的定位。或者，在drop的时候，给canvas定位到相应位置。但自己手写js实现定位，需要用到position，会使得页面发生重绘回流，非常笨重。使用拖拽事件来控制canvas坐标呢？
- 也可以通过@mousedown获取到当前目标对象的数据信息，显示在右侧侧边栏。然后可以进行样式修改，修改后即时更新数据信息。实现右侧侧边栏可以控制每个目标的样式信息。
- 进行此操作前可能代码需要一些大的调整，先git保存一份代码。
对象转数组 ES6 Object.func()用法：
- https://www.cnblogs.com/ll15888/p/11993334.html。
- Object.values(obj)，Object.keys(obj)，Object.entries(obj)，for in循环。
- Object.assign() 合并对象：
举例： const data = Object.assign({},jsonIcons) //深拷贝jsonIcons数据
this.icondata.push(data)
数组转对象：
判断字符串中是否包含某个子串
- https://www.cnblogs.com/zhangliang88/p/10644398.html
- str.indexOf(“3”) != -1 ; // true 不等于-1表示包含
截取字符串中某个特定字符之前的子字符串/之后的子字符串
str_before = string.split(str)[0]
str_after = string.split(str)[1]
获取字符串末尾的一个字符
string.charAt(string.length-1)
判断两个字符串是否相等 ？
- https://www.jb51.net/article/154827.htm
- “==”判断的是两个字符串的值是否相等：
比如：“123” == 123 一个是字符串，一个是整型，结果为true
==只判断值是否相等，当数据类型不相等时，会进行自动类型转换。 - “===”恒等操作符，数据类型和值都会进行比较。
比如：“123”=123 第一步先比较类型，直接false
“123”=“123” true
深拷贝浅拷贝： https://www.jianshu.com/p/1c142ec2ca45
- 浅拷贝：拷贝的是指针地址，通过指针地址去查找对象，指向同一个内存地址。如果修改对象数据，另一个指向该指针地址的数据也会发生改变。
- 深拷贝：修改拷贝的数据不会影响原数据。深拷贝针对较为复杂的object类型数据。
- 实现深拷贝：
- 通过JSON对象实现深拷贝：[无法实现对对象中方法的深拷贝，会显示undefined]
- JSON.parse(JSON.stringify({}))
let str = JSON.stringify(obj) 将对象转字符串
let ojbclone = JSON.parse(str) 将字符串转对象 - Object.assign({},jsonIcons) 无效深拷贝
- JSON.parse(JSON.stringify({}))
- 通过JSON对象实现深拷贝：[无法实现对对象中方法的深拷贝，会显示undefined]
设置除数后保留两位小数：
x = y = (boxstyle.circleR / 2).toFixed(2);//除以2保留2位小数
获取鼠标在main面板的坐标： clienxX,offsetLeft… http://c.biancheng.net/view/5960.html
https://www.jb51.net/article/55128.htm
const el = document.getElementById(‘main’);//拿到mian盒子的左上角坐标。
this.x = e.clientX - el.offsetLeft;
this.y = e.clientY - el.offsetTop;//这就是生成的canvas盒于main盒子的坐标啦！
CSS 子元素铺满整个父元素/让子元素的宽高随着父元素的宽高缩放：
通过js给DOM元素添加一个类名：
- DOM.setAttribute(“class”,“类名”) 该方法会覆盖原有的类名
- DOM.classList.add(‘类名’) 不会覆盖原有类名 只是添加。
ant_design_vue的下载和使用：
- 思否文章：https://segmentfault.com/a/1190000037556136
- 官网地址https://www.antdv.com/docs/vue/introduce-cn/
computed监听Vuex中state对象中的对象属性时，监听不生效的问题 mutations
- https://blog.csdn.net/aliven1/article/details/100581529
清空canvas画布!!
- canvas.setAttribute(‘height’,0) 重置canvas的宽高，https://blog.csdn.net/Rainbow1995/article/details/94649695
怎么清除画布中的某个图像
- el.getContext(‘2d’).clearRect(x, y, 50, 50)//从坐标x,y开始，擦除一块长宽未50的矩形面积
删除元素节点：
- DOM.remove()
项目中实现，选中一个对象，改变侧边栏数据，让选中对象的样式发生变化的思路：
1，当侧边栏数据发生变化并提交表单时，传递表单数据。
2，在center页面监听数据的变化。并给监听属性添加deep:true。保证数据对象内的任意属性值发生变化都会触发事件监听。监听事件触发的条件有两点：对象被选中【可以在点击选中对象时获取对象id。监听时判断是否有id】；侧边栏数据更新后发生了提交【在提交事件中记录标记sub:true】。
3，
- 以上操作会出现的bug。当选中对象，提交修改过一次数据后，再次更新侧边栏，不需要提交就会直接触发监听。因为watch具有缓存功能，并且数据对象内任意属性值发生变化都会触发监听，所以有了缓存之后，不需要提交也会触发监听。
- 解决方法：在右侧边栏监听表单数据。当表单数据任意属性值发生变化时，传递表单数据并记录一个标记sub:false。当center页面触发监听后，判断sub是否为ture。为false则说明本次触发未经过提交事件，为无效触发。
watch，监听对象内的属性值的变化： https://www.cnblogs.com/my466879168/p/12430648.html
- watch:{
-
item:{ -
handler:function(newval) { -
console.log(newval); -
}, -
deep:true//修改item对象内的任何一个属性，都会触发item的监听。 -
} - }
获取鼠标距离事件源左上角的坐标
1，获取鼠标坐标。page/client
2，获取事件源的左上角坐标。//offsetLeft
3，相减就是鼠标距离事件源左上角的坐标。
通过id获取元素宽高：
document.getElementById(’’).clientWidth/clientHeight
js遍历键值对数组：
[0,{},1:{}] => [{},{}] ?
Object.assign({},data)
Object.values() 获取对象键值对中的value组成数组 Object.keys()
arr.push()
let i in arr
删除数组中的元素
获取到id，document.getElementById为null。
classList:
- DOM元素对象，该属性用于在元素中添加，移除和切换类。
- classList.add() classList.remove()
判断字符串中是否包含数字
hadNumber(str) {//判断字符串中是否包含数字
for(let i in str) {
let asc = str.charCodeAt(i);
if(asc >= 48 && asc <= 57) {//表示包含数字
return true;
}
}
return false;//不包含数字
},
删除字符串中的数字：
delNumber(str) {//删除字符串中数字返回新字符串
for(let i in str) {
let asc = str.charCodeAt(i);
if(asc >= 48 && asc <= 57) {//表示包含数字
let needdel = str.charAt(i);//获取索引处的字符
console.log(needdel);
str = str.replace(needdel,'');
}
}
console.log(str);
return str;
},
arr.map() 遍历数组,不改变原始数组数据
const newdata = arr.map((element,index) => { //map遍历数组对每个元素进行处理，返回新元素组成的数组。
// console.log(element);
element.canvasid += ''+index;
return element;
});
点击目标div以外区域将目标div隐藏:
https://www.cnblogs.com/mica/p/11276447.html
判断dom1是否包含在dom2元素内
document.getElementById(id).contains(e.target)
背景纹理填充：？
判断obj {} 对象中是否包含某个属性
https://blog.csdn.net/u012746918/article/details/106359881/
- obj.hasOwnProperty(‘x’) 返回布尔值
比如：
let obj = {x,y}
var bool = obj.hasOwnProperty(‘x’);//bool->true - obj.x != undefined obj存在属性x则返回true 。不存在则返回false
[该方法存在一个弊端，如果属性的值为undefined，不能返回想要的结果] - if(‘x’ in obj) 相当于if(true/false)
拖拽组态开发功能原理分析：
https://juejin.cn/post/6908502083075325959
项目搭建和功能完成都差不多了我才看到这个文档。非常有用，可作为文档参考加深印象或者优化项目。
js判断obj对象是否为空 {}
Object.keys(lbj).length==0 为空
vue 自定义路径别名 @
- 创建vue.config.js,和package.json同层级
- const path = require(‘path’)
const resolve = dir => path.join(__dirname, dir)
module.exports = {
baseUrl: ‘./’,
runtimeCompiler: true,
chainWebpack: config => {
config.resolve.alias
.set(’@’, resolve(‘src’))
}
} - 重启项目
动画绑定。
动画库 Animate.css https://animate.style/ ？
-1,插件: 本项目中使用animate.css插件
- npm install animate.css --save
- import animated from ‘animate.css’
Vue.use(animated) -
An animated element
-2,vue自带的动画效果： transition
- component is用来动态切换组件，通过mode属性可以设置切换时动画。将id为comName的组件放到对应位置
- transition 是vue用来提供动画效果的组件。
-3,css实现动画效果：
- @keyframes js控制动画效果。document.styleSheets insertRule()
- css自定义属性/css变量。通过js改变css自定义属性值 https://www.cnblogs.com/hzz-/p/ 11464767.html
1 const vh = document.documentElement.clientHeight;
2 document.documentElement.style.setProperty(’–view-height’, vh+‘px’);
transform translate @keyframes
//怎么实现动态画矩形？ js改变css自定义属性
//animation: gif 5s infinite;
// document.getElementById(this.hiddendata.id).style.setProperty(’–view-width’, instanceX);
// document.getElementById(this.hiddendata.id).style.setProperty(’–view-height’, instanceY);
// document.getElementById(this.hiddendata.id).style.animation = “gif 5s infinite”;
动画绑定实现原理：
1，用一个文件来打包动画需要用到的动画效果数据。
本项目中使用的是animate.css。可去官网查看动画演示效果，以及获取相关动画属性。
2，先将所有动画在遮罩层【本项目中使用的标签是抽屉】中渲染出来。先实现悬浮时触发动画。
只需要使用悬浮事件,改变类名。给任意元素添加移除animatename即可添加或移除动画效果
@mouseover=“hoverAnimate = animatename”
:class="[hoverAnimate === animatename?‘animate__’+animatename:’’]"
3，第三步，点击某个动画效果时，将该动画效果绑定到相应组件。即改变相应组件的class。
4，动画效果预览。点击相应动画的预览效果时，将相应动画与相关组件绑定。
事件绑定。原理和动画绑定类似。
1，用一个文件来存储事件需要的数据
2，使用遮罩层来进一步控制交互效果。让用户输入事件的参数信息。当用户点击确定按钮时
3，通过用户的点击事件触发。给相应组件绑定相关的事件监听。
4，事件预览：在对象选中的情况下，选择单个事件时，对相关对象进行事件监听和事件解绑。
vue中通过transition使用通过。并在vue中使用Animate.css动画库：
-
1：
@keyframs name {
0% {}
50% {}
100 % {}
}
.fade-enter-active {
transform-origin: left center;
animation: name 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: name 1s reverse;
}
-
2:使用Animate.css库和transition结合：
-
npm install animate.css --save
import animated from ‘animate.css’
Vue.use(animated) -
appear:表示第一次显示时有动画效果。
组件
appear-active-class：用于在组件第一次显示时展示动画效果
enter-active-class：入场动画 必须有animated
leave-active-class：出场动画 必须有animated
duration:自定义动画执行的总时长
还可以分别定义入场和出场动画的时长:duration="{enter:5000,leave:1000}"
<transition
name=""
:duration=“5000”
enter-active-class=“animated 自定义添加入场动画”
leave-active-class=“animated 自定义添加出场动画”
apear
appear-active-class=“animated 自定义添加入场动画”
@berfore-enter=“handleBeforeEnter”
@enter=“handleEnter”
@before-leave=""
@leave=""
@after-leave=""methods:{
handleBeforeEnter: el => {
el.style.color = ‘red’;
},
handleEnter: (el,done) => {//el指动画transition包裹的标签
setTimeout(()=>{
el.style.color = ‘green’;
done();//手动结束动画 不可省略 done()被调用后，会执行afterEnter()
},2000)
},
handleAfterEnter: el => {//结束时动画
el.style.color = ‘black’;
}
}
-
在vue中使用velocity.js动画库
文档：http://shouce.jb51.net/velocity/index.html
下载：npm install velocity-animate
vue动画封装：
监听mac下的键盘按键：
1，使用git工具： 弃用
- https://github.com/madrobby/keymaster
- main.js引入
import keymaster from ‘./utils/keymaster.js’
Vue.use(keymaster) - 组件中使用：keymaster(‘⌘+r’,()=>{})
2，⭐e.metaKey为布尔值,如果按下的是⌘就返回true。按其他键返回false。等同于e.ctrlKey的true表示键盘按下ctrl键。
用户自定义控制组件的选中状态 vuedraggableresizable插件的:active属性
vue mixins和extends的区别：
https://blog.csdn.net/guoweifeng0012/article/details/87922312
- mixins可以理解为多继承，extends可以理解为单继承。extends一般用来继承.vue文件，且只能继承一个组件。
- 结论: 优先调用mixins和extends继承的父类，extends触发的优先级更高
- push(extend, mixin1, minxin2, 本身的钩子函数)
事件修饰符：
.stop 阻止事件冒泡。
.self 让事件只在本身元素上触发
使用场景：阻止子元素的点击事件冒泡到父元素。当点击子元素时 ，子元素在父元素内，也相当于点击了父元素。而self确保事件只在子元素上触发
事件监听
- https://www.cnblogs.com/fpcbk/p/10112385.html
addEventListener
- elementObject.addEventListener(eventName,handle,useCapture)
js判断两个数哪个更大哪个更小 https://www.cnblogs.com/my12-28/p/11815579.html
Math.min(start.x,end,x)
Math.max(start.x,end,x)
js截取字符串’-'前/后的子字符串
str.split(’-’)[1] 表示截取str字符串-后的子串
比如button-11 str.split(’-’)[1]表示’11’ str.split(’-’)[0]表示’button’
实现鼠标全选：
- 框选范围内的对象。鼠标按下并移动时，动态画矩形。
- 鼠标弹起时，如果框选范围内有对象，显示矩形，并使区域内所有对象表现为选中状态；
- 鼠标弹起时，如果框选范围内无对象，矩形宽高值置0，div隐藏。
- 当点击框选矩形外区域时，矩形宽高置0，div隐藏。表现为选中状态的对象们都取消选中。
- 当单击框选范围内单个对象时，其他对象取消选中状态，框选矩形置0且隐藏。
- 当点击框选矩形范围内空白区域并移动时，矩形和矩形区域内所有对象跟随鼠标移动。
for循环和闭包。闭包函数会在for循环结束后才执行。假如闭包写在循环内，怎样才能实现循环依次执行依次闭包？
js给同一DOM同时绑定单击和双击事件的解决方案。
- 参考：https://www.hangge.com/blog/cache/detail_1794.html
- 理解：原生js单击和双击存在冲突，不能同时触发。双击相当于在简短时间内连续单击。因此同时时间间隔来判断调用单击还是双击。
使用模板字面量 vvv ，来拼接字符串和对象，还可以引入表达式，也支持换行
this.
m
e
s
s
a
g
e
.
e
r
r
o
r
(
“
该
对
象
已
绑
定
”
+
e
v
t
.
l
a
b
e
l
+
“
，
请
勿
重
复
绑
定
”
)
;
t
h
i
s
.
message.error(“该对象已绑定”+evt.label+“，请勿重复绑定”); this.
message.error(“该对象已绑定”+evt.label+“，请勿重复绑定”);this.message.error(该对象已绑定“${evt.label}”，请勿重复绑定);
event.preventDefault() 通知浏览器不要执行于事件相关联的默认动作
event.stopPropagation() 阻止事件冒泡
如何实现echarts宽高自适应 随着盒子的resize而改变大小
vue this.$refs
如何在json文件中引用另一个json文件
js 取绝对值
Math.abs(-1); //1
Math.abs(-2); //2
vue 监听watch：
- 监听对象的所有属性：
watch: {
obj: {
handler: function() {
//do something
},
deep: true
}
} - 监听对象的某个属性：
watch: {
‘obj.name’: {
handler: function() {
//do something
},
}
}
echarts图表自适应
该方法是在页面已经存在图表的情况下。
let opt=myChart.getOption();
myChart.clear();
myChart.resize({height:“500px”,width:“500px”});
myChart.setOption(opt);
echarts//避免控制台警告：There is a chart instance already initialized on the dom.
https://blog.csdn.net/qq_26477073/article/details/84568668
let myEchart;//全局变量
if (myEchart != null && myEchart != “” && myEchart != undefined) {
myEchart.dispose();//销毁
}
vue+webpack项目动态设置页面title的方法
https://blog.csdn.net/weixin_42333548/article/details/103626427
vue如何将组件内容保存为html页面
- 1：点击预览时，获取center的innerHTML。
在预览位置将获取的innerHTML设置为自己本身的innerHTML
点击保存时，弹出下载窗口，指定将文件保存为html格式。 - 2：通过 https://blog.csdn.net/sangjinchao/article/details/70888259：
保存为html跳转和传参。在center页点击跳转到center页。并重新赋值centerdata。让页面重新渲染
js 如何弹出下载窗口
如何实现保存html
vue导出为pdf：
https://blog.csdn.net/SpringRolls/article/details/108105014
https://blog.csdn.net/u012732909/article/details/108124313
- 将html页面转换成图片
npm install --save html2canvas
将图片生成pdf
npm install jspdf --save
已实现：
1，拖拽效果，鼠标按下，出现一个半透明对象，跟随鼠标拖动。draggable功能自带。
2，移动和resize效果。插件vuedraggableresizable。
3，键盘del键删除选中的单个对象。 DOM事件。和数据处理 arr.splice(index,1)
4，选中对象，ctrl+c,ctrl+v 。复制粘贴选中对象。并指定粘贴位置。 dom事件。arr.push()
5，移动对象。改变坐标。
6，改变选中对象样式。选中时获取对象样式，侧边栏数据也随着对象的切换而变化。侧边栏修改单个样式直接修改对象的样式显示效果。
7，撤回上一步操作。撤回cv。撤回删除。撤回新增。撤回移动。撤回resize。—？还没有撤回样式修改的功能【比如改变了颜色和border等，撤回】。
剩余实现：鼠标单击并拖拉，实现范围内选取对象。
1，选取范围内的对象，并获取到选取的所有对象信息，根据鼠标坐标，分别改变每个选取对象的坐标，实现整体移动的效果。并在选取区域形成一个border。⭐
2，单击选取范围内的单个对象，可对单个对象进行操作和样式修改。此时再拖拉整个选取区域，范围内对象不再整体移动，而是只移动border ⭐
3，选取范围内对象后，可以将对象整合成一个组件。？不明白具体实现的是什么。动态生成组件吗?
4，撤回样式修改。
5，生成html。
6，预览。
7，保存。
8，编辑。
9，绑定事件。
10，绑定动画。
11，触发mac的键盘监听控制事件。⭐
12，alert弹窗改为ant-vue弹窗。 ⭐
=====================================
vue 3
vite: vue中用于替代webpack打包工具的工具
- npm install -g create-vite-app
- 利用vite创建项目：create-vite-app projectname
- cd projectname
- npm install
- npm run dev
Composition API和Option API
- vue3组合API–Composition API–setup()的理解：
- setup(){}函数是组合API的入口函数。
- 在组合API中定义的变量/方法，必须通过return {} 才能被外界使用
- setup()执行时机：
- setup：在setup中无法使用data和methods。所以在setup中打印this为undefined。无法使用
- befereCreate:data和methods还没有初始化好；
- created:组件刚刚被创建，data和methods已经初始化好；
- [setup函数只能是同步处理。]
- vue3中，可以通过直接定义function，并return {}，在setup函数中引用：let {func} = func() 并return {func}。这样做的好处是逻辑块非常清晰，数据的定义和获取，以及逻辑都可以写在一个function块内。this都不用了。
- Option API:vue2中的使用方式，比如有data(),有methods:{},watch:{},computed:{},生命周期函数等
- vue3可以Composition API和Option API混合使用。
函数监听：写在setup函数内
- reactive()：
* [实现响应式数据：通过ES6的proxy实现。将传入的数据包装成一个【Proxy对象】。【vue2中通过defineProperty实现】
* 监听复杂类型的变化【比如对象/数组】：import {reactive} from 'vue'> 监到数据发生变化，会即时响应到页面
* let data = reactive({
stus:[]
})
* 如果给reactive传递了其他对象：
- 默认情况下修改对象，界面不会响应更新
- 如果想更新，可以通过重新赋值的方式
setup() {
let state = reactive({
time: new Date()
});
function myfun () => {
const newtime = new Date(state.time.getTime());//创建一个新data对 象，和state.time值一样。
newtime.setDate(state.time.getDate() + 1);//给newtime的天数重设置 为time的天数+1
state.time = newtime;//对state.time重新赋值。这样，页面中显示的state.time就能实时响应了。
}
return {state,myfun};
}
- ref(): import {ref} from ‘vue’ 通过ref()可以将数据变成响应式数据
- 监听简单类型的变化：也可以监听【比如对象/数组】
- ref本质还是reactive,ref函数底层会自动将ref转成reactive：且在页面上{{age}}会自动添加.value
ref(18) -> reactive({value:18}) - 所以如果要修改ref的值：
let age = ref(18);
function myfun() {
//age = 666;这样修改不会在页面响应更新
age.value = 666;//这样可以响应式修改age
}
return {age,myfun};
- ref与reactive的区别：ref数据在页面上会自动添加.value属性。
- vue中存在isRef()和isReactive()函数，可以判断数据是否是ref/reactive 返回true/false
递归监听：每一层都可以监听子节点层对象。
- 默认情况下，ref和reactive都是递归监听。
- 弊端：如果数据量庞大，非常消耗性能。
非递归监听：只能监听第一层
- shallowReactive,shallowRef
- 如果使用非递归监听，必须对第一层进行处理，再修改第二层第三层等才会生效。如果不处理第一层，直接修改第二层，是无效操作。
- 如果只想修改第四层的数据并希望页面响应式更新呢？
使用triggerRef(state) 不存在triggerReactive()函数，如果是shallowReactive无法主动触发监听。
toRaw,markRow,toRef,toRefs,reactive,ref,等函数，都是用来进行性能优化的作用
- toRaw():如果有一些方法不需要实时更新页面，就可以通过toRaw函数拿到原始数据。
- 获取reactive响应式数据的原始数据： toRaw(state)
- 获取ref响应式数据的原始数据：toRaw(state.value)
- markRow(obj): 表示对象obj永远都不需要被追踪，不需要响应式修改。
- toRef(): 将某个对象中的数据变成响应式的数据。[修改数据会影响原始数据]。且修改数据[不会触发页面更新]。[引 用]。浅拷贝。
- ref()和toRef()的区别 ：
利用ref将某个对象中的属性变成响应式的数据，[修改响应式数据不会影响原始数据]。[复制]。深拷贝。[数据发生变化，界面会自动更新。] - toRef()应用场景：
如果想让响应式数据和以前的数据关联起来，并且更新数据不想更新页面，就可以使用toRef();
- ref()和toRef()的区别 ：
- toRefs(par1,par2): 只能接收两个参数
customeRef():通过customeRef允许用户自定义ref:返回一个ref对象，可以显式地控制依赖追踪和触发响应
- track()告诉vue数据需要追踪变化 trigger()告诉vue触发界面更新
readonly():用于创建只读数据，无法修改。递归只读，每一层都是只读的。
- shallowReadonly(),第一层只读
- isReadonly()
- readonly与const 的区别:const属于赋值保护，不允许给变量重新赋值，readonly属于属性保护，不能给属性重新赋值。
vue3中响应式数据的本质：
- vue3通过proxy实现： get() set() { return true;//set方法最后一步一定要return true，告诉vue操作成功了。 }
- vue2通过defineProperty实现：
typescript
ts定义：
ts是js的超级，包含了es6和es5的规范，适用于大型项目。浏览器无法识别。使用ts后，需要转es5，会自动转的。
npm install typescript -g tsc hello.ts–>会自动将ts转js
ts面向对象编程，编程语法有点类似Java欸
MongoDB
newnew:
npm install ant-design-vue --save
标签：npm,vue,mes,reademe,组态,对象,https,组件,监听 来源： https://blog.csdn.net/qq_36545813/article/details/115001389
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。