easy_see

easy_see项目

API

JSON.stringify()

JSON.stringify((value, replacer[, space]])

• value： 要转换的JavaScript值
• replacer
  • :如果为函数，则传入每个成员的键和值，使用的是返回值而不是原始值，如果函数返回undefined，则排除成员，根对象是一个空字符串
  • 如果为数组，则返回具有键值的成员，成员的转换顺序与键在数组中的顺序是一样的。
• space: 文本添加和缩进，如果space是一个数字，则返回值的文本在每个级别中缩进指定的数目的空格。

<label> 和<input>

将一个<label>和<input>关联

• 将input直接放到label标签里面，这样的话，就不需要for和id属性，关联已经隐含了

<label>
	do you like apple
	<input type="checkbox" name="pass"/>
</label>

• 将一个<label>和<input>元素匹配在一起，给<input>一个id属性，给<label>一个for属性，值和<input>的id值一样
  优点

1. 在视觉和程序上将这两个标签进行关联
2. 点击关联的标签来聚焦活着激活这个输入元素，就像是直接点击输入元素一样，扩大了元素的可见范围。

<label for="input" class="insert">
    插入图片
    <input
        id="input"
        type="file"
        hidden
        @change="handleFileChange"
    />
</label>

@change不能触发

在外层有绑定事件的时候，在内层中有change的时候，不能触发

父子组件通信

所有的prop使得父子组件形成一个单向下行绑定，父组件的prop的更新会向下流到子组件中。
prop验证

props: {
	fatherMess: {
		type: string, // 类型检查
		required: true, // 必须填的类型
		default: 'hello',// 带有默认值的，如果是对象或者是数组默认则必须从一个工程函数中获取
		validator(val) { // 自定义验证函数
			
		}
	}
}

eventBus

EventBus又称为事件总线，在vue中可以使用eventbus作为沟通桥梁的概念，所有组件公用的事件中i选哪个，可以向该中心注册发送事件或接收事件，所有的组件都可以上下平直的通知其他组件。

1. 初始化

import Vue from "vue"
export const EventBus = new Vue()
// 第二种方法
Vue.prototype.$EventBus = new Vue()

2. 发送事件

EventBus.$emit("decreased", {
	num: this.num,
	deg: this.deg
})

3. 接受事件

EventBus.$on("decreased", ({num, deg)) => {
	this.fontCount -= num
})

4. 移除事件监听者

EventBus.$off("decreased", {})

vue.set和this.$set

这两个的实现方法挂载的是相同的，意思是底层执行的函数是相同的
this.$set是vue实例的一种方法，可以通过this.$set(object,key,value)来实现‘vue.set‘是全局方法，可以直接通过vue.set(object,key,value)的方式来调用。两者相比，this.$set主要用于set实例中，特别是在组件中的方法，添加响应式属性，vue.set更加通用，可以在任何地方使用，特别是非vue实例的上下文中添加响应式属性

vue的实例属性-$ref和$el

$ref： 一个对象，持有注册过ref attribute的所有DOM 元素和组件实例
$el: vue实例使用的根dom元素

vue中的watch

1. 在vue中使用watch来监听数据的变化，一旦发生变化就可以执行其他的操作
2. watch就是当值第一次发生绑定的时候，不会执行监听函数，只有值改变才成，如果需要在第一次绑定的时候也执行函数，则需要使用到immediate属性

格式

1. 函数

watch: {
	数据属性名: function(newvalue, oldvalue) {
		"对象.属性名"： function(newvalue, oldvalue) {
			// 一些业务逻辑或者异步操作
		}
	}
}

2. 对象

watch: {
	数据属性名: {
		deep: true; //深度监视(针对复杂类型)
		immediate: true,
		handler(newvalue) {
			console.log(newvalue)
		}
	}
}

HTML5的拖拽

主要有两种类型，一种是被拖拽组件，一种是目标元素
拖拽的主要过程

1. 被拖拽组件设置为可拖拽，draggable = true
2. 被拖拽组件上加上dragstart事件，这个事件再被拖拽的时候触发
3. 在目标元素上添加drop事件，在目标元素被完全接受拖放的时候触发

事件

1. preventDefault()组织默认行为
2. contextmenu 在用户尝试打开上下文菜单的时候触发，该事件是在鼠标点击右键或者按下键盘上的菜单键的时候
3. mousedown 鼠标按下
4. stopPropagation 防止冒泡传递

drop和drapover

drop事件： drop事件在元素或者文本选择被放置到有效的位置触发。为了确保drop事件按照预期触发，应该在处理dragover事件的代码部分包含preventDafault调用
dragover事件: dragover事件在可以拖动的元素或者被选择的文本被拖到一个有效的方式目标的时候触发。在放置目标上触发

mouseup和mousedown

mouseup: 在定点设备按钮在元素内释放的时候，在该元素上触发
mousedown:在定点设备按钮在元素内按下的时候，会在该元素上触发

mouseEvent.button

mouseEvent.button是只读属性，返回一个值，标识用户按下并触发了事件的鼠标按键。

• 0: 主按键，通常指鼠标左键或者默认值
• 1: 辅助按键，指的是鼠标滚轮中键
• 2: 次按键，指的是鼠标右键
• 3: 第四个按钮，指的是浏览器后退的按钮
• 4: 第五个按钮，通常指的是浏览器的前进按钮

getBoundingClientRect()

可以获得组件的长宽高，位于x轴y轴的位置，距离上下左右的位置。

dropEffect数据传输

DataTransfer.dropEffect属性控制在拖放操作种用户的反馈。会印象在拖拽过程中光标的手势。

• copy: 在新位置生成源项的副本
• move: 在项目移动到新位置
• link: 在新位置建立源项目的连接
• none: 项目禁止拖放

@keydown.native.stop

是一个事件修饰符使用，.native在vue2.x中用来监听组件根元素的原生事件。
@keydown:vue中用于监听键盘按下事件的指令。
.native： 监听一个组件根元素上的原生事件。
.stop: 这个修饰符用来调用事件对象的stopPropagation()方法，阻止事件冒泡。