Vue小白开始学习

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 这个目录

是用了webpackage实现模块化，import是导入，export是导出。

//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，而有不用大括号括

(1) 使用export抛出的变量需要用{}进行import： 
//a.js 
export function getList(){}; 
//b.js 
import { getList } from ‘./a.js’;

//a.js 
var obj = { name: ‘zhazhahui’ }; 
export default obj; 
//b.js 
import aaa from ‘./a.js’; 
console.log(aaa.name);// ‘zhazhahui’;

在拖放的过程中会触发以下事件：

在拖动目标上触发事件 (源元素):
ondragstart - 用户开始拖动元素时触发
ondrag - 元素正在拖动时触发
ondragend - 用户完成元素拖动后触发

释放目标时触发的事件:
ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

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

    //开始拖拽时的事件（显示拖拽内容）
    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
      }

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");

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