import中@符意思
import Hello from '@/components/Hello'
vue
模板的代码,里面都有,这是
webpack
的路径别名,相关定义在这里webpack模版配置 文件如下:
resolve: {
// 自动补全的扩展名
extensions: ['.js', '.vue', '.json'],
// 默认路径代理
// 例如 import Vue from 'vue',会自动到 'vue/dist/vue.common.js'中寻找
alias: {
'@': resolve('src'),
'@config': resolve('config'),
'vue$': 'vue/dist/vue.common.js'
}
}
@等价于 /src 这个目录
vue中的import和Export的含义
是用了webpackage实现模块化,import是导入,export是导出。
impor 如下是引用哪些类,这个概念很好理解,有过语言基础的也很容易理解,如下所示:
export可以导出多个组件,export default 只可导出一个组件,例如
//demo1.js
export const str = 'hello world'
export function f(a){
return a+1
}
对应的导入
//demo2.js
import { str, f } from 'demo1'
export default 只能导出一个默认模块,这个模块可以匿名,例如:
//demo1.js
export default {
a: 'hello',
b: 'world'
}
对应的导入为:
//demo2.js
import obj from 'demo1'
引入时,这个模块可以任意取名,如obj,而有不用大括号括
import什么情况下,要用{}的方式引入,什么情况下,只需要一个变量就行。
(1) 使用export抛出的变量需要用{}进行import:
//a.js
export function getList(){};
//b.js
import { getList } from ‘./a.js’;
而使用Export default 只需要一个名字就行
//a.js
var obj = { name: ‘zhazhahui’ };
export default obj;
//b.js
import aaa from ‘./a.js’;
console.log(aaa.name);// ‘zhazhahui’;
- 切记,一个js文件中,只能有一个export default;
但是,一个js文件中,可以有多个export。
拖拽事件
在拖放的过程中会触发以下事件:
在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发
释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
在本项目中的引用,拖拽排序
div-vue引用事件
<div class="col-md-12 " v-for="(item,index) in targetItems" :code="item.code" draggable="true"
@dragstart="handleDragStart($event,item)"
@dragover.prevent="handleDragOver($event,item)"
@dragenter="handleDragEnter($event,item)"
@dragend="handleDragEnd($event,item)">{{item.name}}
</div>
JS中引用的事件内容
//开始拖拽时的事件(显示拖拽内容)
handleDragStart(e, item) {
this.dragging = item;
},
//拖拽结束事件(不显示拖拽内容)
handleDragEnd(e, item) {
this.dragging = null;
},
//在dragenter中针对放置目标来设置!
handleDragOver(e, item) {
e.dataTransfer.dropEffet = 'move'
},
//拖拽到指定DIV时的效果,为需要移动的元素设置dragstart事件
handleDragEnter(e, item) {
e.dataTransfer.effectAllowed = 'move';
if (item === this.dragging) {
//如果放至中原位置什么都不做返回
return;
}
const newItems = [...this.targetItems]
console.log(newItems)
const src = newItems.indexOf(this.dragging)
const dst = newItems.indexOf(item)
//把两个元素互换位置
newItems.splice(dest, 0, ...newItems.splice(src, 1))
this.targetItems = newItems
}
splice函数用法
js 函数,是指数组中添加新元素或删除新元素,语法格式为:array.splice(index,delNum,newContent),index是指从数组下标第几个元素起操作,delNum是指从当前下标起删除元素的个数(如果是0则不删除,只增加),newContent是指向数组中增加的内容是什么。
- 注意:这种方法会改变原始数组。
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
fruits 输出结果:
Banana,Orange,Lemon,Kiwi,Apple,Mango
删除元素后增加内容
var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"
document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)
则输出结果为
George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
如果仅删除一个元素,则返回一个元素的数组。 如果未删除任何元素,则返回空数组
var sites=["Runoob","google","tabao"]
sites.splice(2,1);
document.write(sites)
sites.splice(2,0)
结果
[tabao]
[]