01-vue-proj

1. 培训大纲

2. 新建vue项目

  1. 在目标目录打开终端
  2. vue init webpack my-project
  3. 回车默认操作
  4. npm install
  5. npm run dev
  6. npm i element-ui -S(没网也可以安装)
  • 新建vue入口文件:index.html
  • demo在public文件夹下index.html
640955F5-0F7F-4F80-BFDC-438758777C9B
D5D6C0C1-CBFD-45A8-85B5-00CCFE0EBACD
4EB9AABA-1858-4134-A946-9B4A344C826C
1F90AA96-B4C3-437B-AE31-C4F7BFE3B032
  • intention actions直接导入
2A0ECB5F-9088-43CC-9D3B-1DB669481924

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})
  • npm i element-ui -S没报错就是安装成功了
  • 每个新建的项目用element-ui都需要重新安装
91F1FD7E-FBA6-4EAB-95F5-838C75A2F074

3. vue + element + admin

1. 创建vue页面

C6219E2F-91A8-4C06-AC0B-437AAE1C9B59

2. 添加路由

  • 相当于右边菜单栏
4631DEDF-F2F3-4649-9E79-F18B053D28E8
84CEFE4A-8C5D-4E18-9939-9044459F4285
4658AA97-4822-4D2B-ABF6-6E79FC93F5BA

3. 创建api

A0A35F11-D420-4BED-8285-0FADD27C4767
  • 请求的时候,加入token
  • 返回的时候也可以将错误提示信息进行拦截,并进行重新显示
477094D7-2060-4497-8078-039262BE1555
69812B9E-0619-4F07-9B20-A1EB554AFB05
6993B839-9866-49AF-B7F5-471F5738F337
4C006AC9-B796-45FB-9AF0-B4873B780398

4. 定义的变量

data() {
  return {
    定义的变量
  }
}

1. Object.assign

var target  = {a: 1}; // 目标对象
var source1 = {b: 2}; // 源对象1
var source2 = {c: 3}; // 源对象2
var source3 = {c: 4}; // 源对象3,和source2中的对象有同名属性c
Object.assign(target, source1, source2, source3);
// 结果如下:
// {a:1, b:2, c:4}

2. 打包

E0E516D7-1A30-4D0D-BB37-0C0DB29DE1D3

5. Element UI

1. <el-select>获取label

<el-select ref="ooxxSelRef" v-model="row.ooxxId" @change="ooxxSelChange" filterable
           placeholder="请选择">
  <el-option
      v-for="item in ooxxSelOpt"
      :key="item.newooxxcode"
      :label="item.ooxxname"
      :value="item.newooxxcode">
  </el-option>
</el-select>

1. 遍历

/**
 * 业务场景变化时触发
 */
ooxxSelChange(value) {
  let obj = {}
  obj = this.ooxxSelOpt.find(function (item) {
    return item.newooxxcode === value
  })
  this.row.ooxxName = obj.ooxxname
}

2. selectedLabel

this.row.ooxxName = this.$refs.ooxxSelRef.selectedLabel

2. <el-tree>

1. 滚动条问题

<div v-show="isCollapse" :style="{margin:'20px 0 0 24px',height: treeHeight}">
  <el-scrollbar style="height:100%;margin-bottom: 20px;">
    <el-tree
        ref="menuTreeRef"
        :load="appTree"
        :props="appProps"
        :expand-on-click-node="false"
        highlight-current
        node-key="id"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
        lazy
    />
  </el-scrollbar>
</div>
<style scoped>
/*
 * el-tree-node变为行内块级元素
 */
.el-tree > .el-tree-node {
  min-width: 100%;
  display: inline-block;
}
/*
 * 避免滚动条盖住树节点
 */
/deep/ .el-tree-node__label {
  padding-right: 30px;
}

.el-scrollbar .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>

2. /deep/用法

3. <el-table>

<el-table
    ref="postTableRef2"
    :data="postRowList2"
    border
    stripe
    :height="300"
    row-key="id"
    :row-class-name="tableRowClassName"
    @row-click="singleSelectHandle2"
>
tableRowClassName({row, rowIndex}) {
  row.index = rowIndex;
},

singleSelectHandle2(row, column, event) {
  console.log(row)
  this.postRowList2.splice(row.index, 1)
},

6. Syntax

1. 空的判断

// '', null, undefined 全打印alert()
if (!this.condition) {
    alert("condition")
}

condition: '',
condition: null,
condition: undefined

7. vue_dev

1. {ob: observer}取值问题

  • 因为vue是双向绑定,所以会产生这样的对象
  • tree节点的子节点被加载进去了,再去取子节点的node值,就没有问题
resolve(res.data)
this.treeNode = node.childNodes[0]

2. setCurrentRow

<el-button size="small" @click="setCurrentRow()">重 置</el-button>
  • 下面是等价的
<el-button size="small" @click="setCurrentRow($event)">重 置</el-button>

<el-button size="small" @click="setCurrentRow">重 置</el-button>
  • setCurrentRow当然没有传参,也没有括号,默认传$event对象

3. 单选表格

<el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
<el-button @click="setCurrent">取消选择</el-button>
setCurrent(row) {
    this.$refs.singleTable.setCurrentRow(row);
}
  • 当方法传值的时候,会选中row对应的行
  • setCurrent不传值的时候,默认传$event,即为取消选择

4. async-await

  • async声明一个异步方法,await异步方法中的同步逻辑
async queryPage3(queryParam3) {
  this.membersLoading = true
  await UserApi.pageQueryMembers(queryParam3).then(res => {
    this.membersRowList = res.data.list
    this.queryParam3.pageInfo = res.data
    this.membersLoading = false
  }).catch(err => {
    console.log(err)
  })
},
 

 







  • .then来进行queryPage3异步方法执行后,要执行的程序
this.queryPage3(this.queryParam3).then(res => {
    this.$refs.multipleTable3Ref.setCurrentRow(event)
})

5. <el-tooltip>动态提示

<el-tooltip class="item" effect="dark" placement="top-start">
<div slot="content">
  {{ scope.row.loginName }}
</div>
<el-button
    size="mini"
    type="primary"
    icon="el-icon-umbrella"
    @click="tmoKeyCompanyImport(scope)"
/>
</el-tooltip>