TOMMYHU

官网介绍，vue操作dom的正确姿势

exp
[codes=c#]
this.getList()//获取数据并初始化表格
this.$nextTick(fuction(){
   //表格渲染完毕
  
})
[/codes]

[codes=c#]
npm view  element-ui version --json
[/codes]
如果之前已经注册了淘宝源，那么出来的是个版本号
官方源出来一系列的版本信息，包括最新的版本

这里删除了package-lock.json
然后修改了package.json将element-ui版本号到2.4.3
执行
npm i
如果无法安装使用国内的cnpm
执行
cnpm i
安装成功，npm start查看前端界面，升级后界面报错，建议根据错误排查，如果部分页面可以查看，那么就拿一个问题页面做减法，一个个删除来查找错误

比如有组数据是很多页面都要用的，我想把它写在一个js文件里作为公共方法。

public.js
[codes=c#]
import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
import { get_industrylist } from './api.js'

export const getIndustryList = async function () {    
    let data = await new Promise((resolve)=>{
        axios.post(get_industrylist).then((res) => {
            console.log(res)
            if(res.data.code === 200){
                // console.log('getIndustryList', res.data.data.industrylist)
                  resolve(res.data.data.industrylist)
            }        
        })
    })
    return data    
}
[/codes]
然后在某个页面里使用它。

Tanant.vue
[codes=c#]
...
created(){
    getIndustryList().then((v)=>{      
      this.options = v      
    })
  },
...
[/codes]

在编写vue文件中引入模块
[codes=c#]
import model from "@/common/model";
// 这里路径前面的“@”符号表示什么意思？

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'
    }
}
[/codes]
@ 等价于 /src 这个目录，避免写麻烦又易错的相对路径

代码如下：
[codes=c#]
function(arr,index,tindex){
  //如果当前元素在拖动目标位置的下方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置的地方新增一个和当前元素值一样的元素，
  //我们再把数组之前的那个拖动的元素删除掉，所以要len+1
  if(index>tindex){
    arr.splice(tindex,0,arr[index]);
    arr.splice(index+1,1)
  }
  else{
  //如果当前元素在拖动目标位置的上方，先将当前元素从数组拿出，数组长度-1，我们直接给数组拖动目标位置+1的地方新增一个和当前元素值一样的元素，
  //这时，数组len不变，我们再把数组之前的那个拖动的元素删除掉，下标还是index
    arr.splice(tindex+1,0,arr[index]);
    arr.splice(index,1)
  }
}
[/codes]
index是当前元素下标，tindex是拖动到的位置下标。
from：http://www.cnblogs.com/zwhblog/p/7941744.html#4004715

1、普通watch
[codes=c#]
data() {
    return {
        frontPoints: 0    
    }
},
watch: {
    frontPoints(newValue, oldValue) {
        console.log(newValue)
    }
}
[/codes]

2、数组的watch
[codes=c#]

data() {
    return {
        winChips: new Array(11).fill(0)  
    }
},
watch: {
　　winChips: {
　　　　handler(newValue, oldValue) {
　　　　　　for (let i = 0; i < newValue.length; i++) {
　　　　　　　　if (oldValue[i] != newValue[i]) {
　　　　　　　　　　console.log(newValue)
　　　　　　　　}
　　　　　　}
　　　　},
　　　　deep: true
　　}
}
[/codes]

3、对象的watch
[codes=c#]

data() {
　　return {
　　　　bet: {
　　　　　　pokerState: 53,
　　　　　　pokerHistory: 'local'
　　　　}  
    }
},
watch: {
　　bet: {
　　　　handler(newValue, oldValue) {
　　　　　　console.log(newValue)
　　　　},
　　　　deep: true
　　}
}
[/codes]

1、数据方法分类：

（1）原数组改变
push
pop
unshift
shift
reverse
sort
splice

（2）原数组未变，生成新数组
slice
concat
filter
对于使原数组变化的方法，可以直接更新视图。

对于原数组未变的方法，可以使用新数组替换原来的数组，以使视图发生变化。

[codes=c#]
// 创建 vm
let vm = new Vue({
data: {
a: [{}, {}, {}]
}
})

// 键路径
vm.$watch('a', function () {
// 做点什么
})
[/codes]


由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当利用索引直接设置数组的某一项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength，不会更新数组。

当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新：
[codes=c#]
data:{
arr1 = ['a','b','c'];
arr2 = [‘foo','bar','baz'];  
}

vm.arr1[1] = 'alpha';
vm.$set(vm.arr2, 1, 'alpha');
[/codes]

[codes=c#]
[/codes]

[codes=c#]
[/codes]

功能：点击导出按钮，提交请求，下载excel文件；

第一步：跟后端童鞋确认交付的接口的response header设置了

response header
[codes=c#]
content-disposition:”attachment;filename=total.xls”
content-type:”application/x-download;charset=utf-8”
[/codes]
以及返回了文件流。

第二步：修改axios请求的responseType为blob，以post请求为例：

复制代码
[codes=c#]
axios({
    method: 'post',
    url: 'api/user/',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    },
    responseType: 'blob'
}).then(response => {
    this.download(response)
}).catch((error) => {

})
[/codes]
第三步：请求成功，拿到response后，调用download函数（创建a标签，设置download属性，插入到文档中并click）
[codes=c#]
methods: {
    // 下载文件
    download (data) {
        if (!data) {
            return
        }
        let url = window.URL.createObjectURL(new Blob([data]))
        let link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', 'excel.xlsx')

        document.body.appendChild(link)
        link.click()
    }
}
[/codes]
其他参考https://blog.csdn.net/weixin_36934930/article/details/80707615

devtools使用很爽，但发布后如何配置生产环境的webpack 才可以关闭Vue Devtools。，如何禁止他人通过vue的devtools 查看
[codes=c#]
import Vue from 'vue'
const isDebug_mode = process.env.NODE_ENV !== 'production';
Vue.config.debug = isDebug_mode;
Vue.config.devtools = isDebug_mode;
Vue.config.productionTip = isDebug_mode;
[/codes]

table章节https://element.faas.ele.me/#/zh-CN/component/table
选中一行，行内点击选中或者checkbox选中都无法获取行号或索引，真是无比坑爹的设计
拿到数据再去数组里做map或foreach，
可以说一句 fuck么

当selection-change事件触发后，写入以下代码
[codes=c#]



[/codes]