文末
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery required.Supports Meteor, AngularJS, React, Polymer, Vue, Ember, Knockout and any CSS library, e.g. Bootstrap.
首先需要安装Sortable.js
npm install sortablejs --save
然后引用
import Sortable from ‘sortablejs’
需要注意的是element table务必指定row-key，且row-key必须是唯一的，如ID，不然会出现排序不对的情况。
二、示例代码
<template>
<div style="width:800px">
<el-table :data="tableData"
border
row-key="id"
align="left">
<el-table-column v-for="(item, index) in col"
:key="`col\_${index}`"
:prop="dropCol[index].prop"
:label="item.label">
</el-table-column>
</el-table>
<pre style="text-align: left">
{{dropCol}}
</pre>
<hr>
<pre style="text-align: left">
{{tableData}}
</pre>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
col: [
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
dropCol: [
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
tableData: [
{
id: '1',
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 100 弄'
},
{
id: '2',
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 200 弄'
},
{
id: '3',
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 300 弄'
},
{
id: '4',
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 400 弄'
}
]
}
},
mounted() {
this.rowDrop()
this.columnDrop()
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table\_\_body-wrapper tbody')
const \_this = this
Sortable.create(tbody, {
group : {
name : "words",
pull : true,
put : true
},
animation : 150, //动画参数
onAdd : function(evt) {//拖拽时候添加有新的节点的时候发生该事件
},
onUpdate : function(evt) {//拖拽更新节点位置发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from]);
},
onRemove : function(evt) {//删除拖拽节点的时候促发该事件
console.log('onRemove.foo:', [evt.item, evt.from]);
},
onStart : function(evt) {//开始拖拽出发该函数
console.log('onStart.foo:', [evt.item, evt.from]);
},
onSort : function(evt) {//发生排序发生该事件
console.log('onUpdate.foo:', [evt.item, evt.from]);
### React
* 介绍一下react
* React单项数据流
* react生命周期函数和react组件的生命周期
* react和Vue的原理，区别，亮点，作用
* reactJs的组件交流
* 有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
* 项目里用到了react，为什么要选择react，react有哪些好处
* 怎么获取真正的dom
* 选择react的原因
* react的生命周期函数
* setState之后的流程
* react高阶组件知道吗？
* React的jsx，函数式编程
* react的组件是通过什么去判断是否刷新的
* 如何配置React-Router
* 路由的动态加载模块
* Redux中间件是什么东西，接受几个参数
* redux请求中间件如何处理并发
**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
