5 vue.js学习

相关资料

• http://cn.vuejs.org/guide/index.html
• http://www.imooc.com/view/694
• 文档 http://cn.vuejs.org/guide/index.html
• https://www.awesomes.cn/subject/vue
• https://github.com/vuejs/awesome-vue
• https://segmentfault.com/a/1190000005832164
• 后端渲染 https://github.com/vuejs/vue-hackernews-2.0
• 推荐五个Vue2的免费教程 https://gold.xitu.io/post/584cc93b8e450a006ac2196d
• vue插件 http://www.17shulihua.com/archives/category/frontend-demo/vue-demo
• vue2.2 api文档： https://vuejs-tips.github.io/cheatsheet/

1.解决npm run build 无法打包的问题，一直卡，注释掉

2.点击el-cascader 的圈圈可以收起

https://blog.csdn.net/qq_36410795/article/details/100894520 评论第四条

<el-cascader
省略。。。。。。
          ref="elcascader"
          @visible-change="elCascaderOnlick"
          @expand-change="elCascaderOnlick"
        ></el-cascader>

然后通过method

elCascaderOnlick() {
      let that = this;
      setTimeout(function() {
        document.querySelectorAll(".el-cascader-node__label").forEach(el => {
          el.onclick = function() {
            this.previousElementSibling.click();
            that.$refs.elcascader.dropDownVisible = false;
          };
        });
        document
          .querySelectorAll(".el-cascader-panel .el-radio")
          .forEach(el => {
            el.onclick = function() {
              that.$refs.elcascader.dropDownVisible = false;
            };
          });
      }, 100);
    },

3.通过id号寻找他所有的父级

https://www.cnblogs.com/qingmiaokeji/p/11023690.html

 this.form.parentIdArr = this.familyTree(this.treeData,row.parentId);

familyTree(menuTree,id){
        let temp = [];
        let forFn = function (arr, id) {
          for (let i = 0; i < arr.length; i++) {
            let item = arr[i];
            if (item.value === id) {
              temp.unshift(item.value)
              forFn(menuTree, item.parentId)
              break
            } else {
              if (item.children) {
                forFn(item.children, id)
              }
            }
          }
        }
        forFn(menuTree, id)
        return temp
      },

4.Vue项目中实现用户登录及token验证

https://blog.csdn.net/sleepwalker_1992/article/details/82974703
备注：请求头加token 是在main.js文件中添加

5.树形结构，通过id值查找该元素

https://blog.csdn.net/weixin_34143774/article/details/91419478

 var data = [
    {
      id: 1, name: "办公管理", pid: 0,
      children: [
        {
          id: 2, name: "请假申请", pid: 1,
          children: [
            {id: 4, name: "请假记录", pid: 2}
          ],
        },
        {id: 3, name: "出差申请", pid: 1}
      ]
    },
    {
      id: 5, name: "系统设置", pid: 0,
      children: [
        {
          id: 6, name: "权限管理", pid: 5,
          children: [
            {id: 7, name: "用户角色", pid: 6},
            {id: 8, name: "菜单设置", pid: 6}
          ]
        }
      ]
    },
  ];
  function getChidlren(id) {
    var hasFound = false, // 表示是否有找到id值
      result = null;
    var fn = function (data) {
      if (Array.isArray(data) && !hasFound) { // 判断是否是数组并且没有的情况下，
        data.forEach(item => {
           if (item.id === id) { // 数据循环每个子项，并且判断子项下边是否有id值
            result = item; // 返回的结果等于每一项
            hasFound = true; // 并且找到id值
          } else if (item.children) {
            fn(item.children); // 递归调用下边的子项
          }
        })
      }
    }
    fn(data); // 调用一下
    return result;
  }
  console.log(getChidlren(3));复制代码

6.vue项目上安装SCSS

https://blog.csdn.net/qq_27449993/article/details/95048760

7.vue 中使用axios.all 请求多个api

https://www.imooc.com/wenda/detail/494702

export const treeTable = (params1, params2, params3) => {
  return axios.all([
    axios.post(`${base}/organization/selectAllOrganization.action`, params1),
    axios.post(`${base}/station/selectAllStation.action`, params2),
    axios.post(`${base}/deviceInfo/selectAllDeviceInfo.action`, params3)
  ]).then(res => res);
}

8.tooltip 分割符和换行

<el-table-column label="操作权限" width="480" align="center">
          <template slot-scope="scope">
            <el-tooltip placement="top" v-for="(item,index) in scope.row.sOperations" :key="index">
              <span slot="content" v-for="(item,index) in scope.row.sOperations"
                    :key="index">{{item.pperationName}}  |  </span>
              <el-tag style="margin: 0 6px 6px 0">{{item.pperationName}}</el-tag>
            </el-tooltip>
          </template>
        </el-table-column>
<style> 
.el-tooltip__popper {
    max-width: 350px;
  }
 </style>

9.第一次表单验证的结果，在第二次表单验证时仍然存在

https://blog.csdn.net/weixin_37930716/article/details/90234705

 handleEdit(platform) {//添加、编辑弹出
           //初始值并移除校验结果
           if (this.$refs.form){
           this.$refs.form.resetFields();
           }
          ......
 }

10.如何隐藏浏览器控制台输出async-validator验证警告

https://segmentfault.com/q/1010000017007638

11.el-cascader回显定位问题 :key=”isResouceShow”

<el-cascader
                        class="half"
                        clearable
                        change-on-select
                        v-model="form.administration"
                        :options="form.administrationList"
                        placeholder="行政信息" :key="isResouceShow">
                    </el-cascader>

isResouceShow:0, //行政信息的key

   handleEdit(platform){//添加、编辑弹出
                    if(platform){//编辑
                        this.operation = 'edit';
                        ++this.isResouceShow;

12.vue打包时给静态资源增加版本号

https://www.cnblogs.com/miaSlady/p/10150064.html
但是vue-cli3 脚手架建的项目是没有build的，所以新建版本号需要修改一下文件
（1）在根目录新建.env 这个文件配置全局环境变量，自定义版本号

VUE_APP_Version = 'v1.0'

（2）vue.config.js文件中添加

configureWebpack: { // webpack 配置
        output: {
            // 输出重构  打包编译后的 文件名称  【模块名称.版本号】
            filename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
            chunkFilename: `static/js/[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
        },
    },

13.element-UI 根据table中数据改变颜色 或显示对应内容

https://blog.csdn.net/qq_41999617/article/details/84847991

14.自定义指令+后端 实现动态全局按钮权限控制（v-has）

https://blog.csdn.net/j123450/article/details/102515153
备注：第三部省略，第四步可以直接在登录的时候获取按钮数据

15.利用npm 安装删除模块

https://blog.csdn.net/yihanzhi/article/details/75665959
例如：npm unistall vue-i18n

16.如何安装使用vue-in8n

（1）安装

npm install vue-i18n --save

（2）main.js

import VueI18n from 'vue-i18n'
Vue.use(VueI18n);
/*---------基本使用-----------*/
const i18n = new VueI18n({
  locale: 'zh',
  messages
});

17.前端如何解决 index.html 浏览器缓存

参考：https://blog.csdn.net/AwayFuture/article/details/105929842?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-3
打包:hash和时间戳照常加
以下解决的是：index.html文件中请求的js和css都是最新的，但是因为浏览器缓存，他读取的不是最新的文件，
把根目录中的index.html 手动加上以下代码

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
<meta http-equiv="expires" content="Mon, 23 Jan 1978 20:52:30 GMT">

备注：如果后端是使用nginx反向代理，可以让后端修改nginx.conf文件的对应server中设置，让index.html不使用强制缓存；

18.Vue中监听$store 中的数据的方法

参考：https://blog.csdn.net/MdnyzZ/article/details/87865860?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.edu_weight

computed:{
    haha () {
        return this.$store.state.msg
    }
},
watch:{
    haha：function () {
        //插入需要在仓库数据变化时做的逻辑处理
    }
}

19.Vue中如何公共配置服务器接口地址

（1）static文件夹中新建serverConfig.js文件

/*公共配置服务器接口地址*/
window.g = {
  base_2: "http://192.168.1.21:18080",
  base_4: "ws://192.168.1.21:18080"
};

（2）index.html中加上

（3）api.js中

let base_2 = window.g.base_2;
let base_4 = window.g.base_4;

20.Vue中input框禁止输入空格

使用:trim

<el-input type="textarea"  v-model.trim="formulaLeft" rows="4" ></el-input>

22.隔行换色，斑马纹

使用：:stripe=”true”

<el-table :data="tableData" :stripe="true" style="width: 100%">
</el-table>
<style>
  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #5daf34;
  }
</style>

22.指定特殊行的背景色

使用：:row-class-name=”tableRowClassName”

<el-table :data="tableData"  style="width: 100%" :row-class-name="tableRowClassName">
</el-table>
方法：
tableRowClassName({row}){
    if(row.name === '王小虎'){
    return 'warning-row'
    }
    return '';
}
<style>
  .el-table .warning-row {
    background: #ff0000;
  }
</style>

23.element-ui tabs切换 实现按需加载

参考：https://www.cnblogs.com/wgy0528/p/13274967.html?utm_source=tuicool
https://www.cnblogs.com/bobo1/p/11023014.html

<template>
  <el-card class="box-card white-main" id="user">
    <div slot="header" class="clearfix">
      <span>发送记录</span>
    </div>
    <div class="item">
      <el-tabs v-model="activeName" type="card" @tab-click="loadTab">
        <el-tab-pane label="今日" name="today">
          <Search style="margin-bottom:10px;" excelName="邮箱-发送"  v-if="load.today" />
        </el-tab-pane>
        <el-tab-pane label="昨日" name="yesterday">
          <Yesterday style="margin-bottom:10px;" excelName="邮箱-发送"  v-if="load.yesterday"/>
        </el-tab-pane>
        <el-tab-pane label="状态" name="state">
          <State style="margin-bottom:10px;" v-if="load.state" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-card>
</template>
<script>
   import Search from './components/search'
  import Yesterday from './components/yesterday'
  import State from './components/state'
  export default {
    name: "index.vue",
    components: {
      Search,
      Yesterday,
      State
    },
    data() {
      return {
        activeName: 'today',
        load: {
          today: true,
          yesterday: false,
          beforeYesterday: false,
          earlier: false,
          state: false
        }
      }
    },
    methods: {
      // 按需加载后端数据[tab]
      loadTab(tab, event) {
        if (this.load[tab.name] === false){
          this.load[tab.name] = true;
          console.log(this.load)
        }
      }
    }
  }
</script>

23.vue中在表格中添加输入框增删改

<template>
  <div class="block">
    <el-form :model="formData" ref="formData">
      <el-table :data="formData.tableData" border stripe style="width: 100%;">
        <el-table-column prop="name" label="姓名">
          <template slot-scope="scope">
            <el-form-item v-if="scope.row.edit" :prop="'tableData.' + scope.$index + '.name'" :rules='rules.name'>
              <el-input v-model="scope.row.name" placeholder="姓名"></el-input>
            </el-form-item>
            <span v-else>{{scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sex" label="性别">
          <template slot-scope="scope">
            <el-form-item v-if="scope.row.edit" :prop="'tableData.' + scope.$index + '.sex'" :rules='rules.sex'>
              <el-select v-model="scope.row.sex" placeholder="请选择">
                <el-option label="男" value="1">男</el-option>
                <el-option label="女" value="2">女</el-option>
              </el-select>
            </el-form-item>
            <span v-else>
              <p v-if="scope.row.sex==1">男</p>
              <p v-if="scope.row.sex==2">女</p>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.edit">
              <el-button type="text" size="medium" @click="confirmAdd(scope.row,'formData')">
                <span class="el-tag el-tag--mini" style="cursor: pointer;" aria-hidden="true">保存</span>
              </el-button>
              <el-button type="text" size="medium">
                <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" aria-hidden="true">取消</span>
              </el-button>
            </div>
            <div v-else>
              <el-button type="text" size="medium" @click="editData(scope.row)">
                <span class="el-tag el-tag--mini" style="cursor: pointer;" aria-hidden="true">修改</span>
              </el-button>
              <el-button type="text" size="medium" @click="deleteData(scope.row,scope.$index)">
                <span class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" aria-hidden="true">删除</span>
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <el-button type="text" @click="addData">添加数据</el-button>
    <el-divider></el-divider>
    <el-button @click="submitData('formData')">提交 </el-button>
  </div>
</template>
<script>
  export default {
    name: "index",
    data() {
      return {
        formData: {
          tableData: [],
        },
        rules: {
          name: {
            required: true,
            message: '请输入名字',
          },
          sex: {
            required: true,
            message: '请选择性别',
          },
        },
      }
    },
    methods: {
      //添加
      addData() {
        this.formData.tableData.unshift({
          edit: true,
        });
      },
      //确认添加
      confirmAdd(row, formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            row.edit = false;
          }
        })
      },
      //修改
      editData(row) {
        row.edit = true;
      },
      //删除
      deleteData(row, index) {
        this.formData.tableData.splice(index, 1);
      },
      submitData(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let data = this.formData.tableData;
            alert(JSON.stringify(data))
          }
        })
      },
    }
  }
</script>
<style>
  .el-table .warning-row {
    background: #ff0000;
  }
  .myTable {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  .myTable td,
  .myTable th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 60px;
  }
</style>

24.模拟textarea可以粘贴图片

<template>
  <div>
    <div class="img-textarea" @paste="descImgPaste($event)" contenteditable="true" ></div>
  </div>
</template>
<script>
  export default {
    name: "index",
    data() {
      return {
        dialogVisible: false,
        desc: {
          description: '描述文字',
          figure:['http://pic2.sc.chinaz.com/files/pic/pic9/202004/bpic20079.jpg' ]
        }
      }
    },
    methods: {
      confirmAdd(data){ //data是描述信息，类似于{description: '描述文字' ，figure:[ 图片数组 ] }
        this.dialogVisible= true
        this.$nextTick(() => {
          let elem = document.getElementsByClassName('img-textarea')[0]
          let imgs = ''
          if(data.figure.length > 0){
            for(let item of data.figure){
              let img= `\n<img src="${item}">`  //css样式中加入white-space:pre-line之后，\n换行才会生效
              imgs += img
            }
          }
          elem.innerHTML =  data.description + imgs
        })
      },
      descImgPaste(event){
        if (event.clipboardData || event.originalEvent) {
          let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
          if(clipboardData.items){
            let  blob;
            for (let i = 0; i < clipboardData.items.length; i++) {
              console.log(clipboardData.items[i].type)
              if (clipboardData.items[i].type.indexOf("image") !== -1) {
                blob = clipboardData.items[i].getAsFile();
              }
            }
            let render = new FileReader();
            render.onload = function (evt) {
              //输出base64编码
              let base64 = evt.target.result;
              let imgElem = document.createElement('img');
              imgElem.src = base64;
              // document.getElementsByClassName('img-textarea')[0].appendChild(imgElem)
            };
            if(blob){
              render.readAsDataURL(blob);
            }
          }
        }
      },
    }
  }
</script>
<style scoped>
  .img-textarea{
    width: 600px;
    height: 300px;
    border:#333 1px solid;
    text-align: left;
    padding: 10px;
    margin: 0 auto;
  }
</style>

25.vue支持ln(x)的算法

参考：https://www.npmjs.com/package/math-ln

npm install math-ln
 let ln = require( 'math-ln' );
console.log(ln(4))

26.vue计算ln(x)=2.302585092994046中的x值的算法

js 次方 开方
次方 ，用Math.pow(值，次方数)
如：
Math.pow(3,2);   3的平方
Math.Pow(2,3);   2的立方
开方Math.sqrt(值)
如:
Math.sqrt(9);   9 开方，返回结果3
如：e的值约等于2.718
let ln = require( 'math-ln' );
console.log(ln(10)); //2.302585092994046
console.log(Math.pow(2.718,2.302585092994046)); //9.997612866396764

27.字母和数字和加减号混合的字符串拆分

let sstr = "13HCH2O123Na123+22CO347NA12"
let ss = sstr.match(/(\d+|[^\d]+)/g).join(',');
console.log(ss);
console.log(ss.split(","))
结果：13,HCH,2,O,123,Na,123,+,22,CO,347,NA,12
["13", "HCH", "2", "O", "123", "Na", "123", "+", "22", "CO", "347", "NA", "12"]

28.切换国内镜像

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org
npm install sass-loader node-sass -D

29.element中el-select手动清除选中再次选择不显示的问题

https://blog.csdn.net/weixin_39407291/article/details/108128224

使用的是强制刷新的方法： this.$forceUpdate()
在切换不显示的el-select的元素上绑定@change=“changeValue”
changeValue(){
    this.$forceUpdate()
}

30.vue 兄弟组件互相调用方法

https://blog.csdn.net/hujiaojiao525/article/details/89226893

31、node 升级后 无法运行

https://www.cnblogs.com/happymental/p/11544373.html

npm rebuild node-sass
npm update