Vue小白开始学习

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]
[]

(…)ES6三点扩展运算符