vue_3

计算属性

    //计算属性
    computed:{
        // 如果按钮需要被禁用，则返回true，否则返回false
        isBtnDisabled(){
            if(this.selectedCateKeys.length!==3){
                return true
            }
            return false
        },
        // 当前选中的三级分类的Id
        cateId(){
            if(this.selectedCateKeys.length===3){
                return this.selectedCateKeys[2]
            }
            return null
        }
    }

Element UI

1、Dialog 对话框与Form 表单

        <!-- 添加参数的对话框 -->
        <el-dialog
            :title="'添加'+titleText"
            :visible.sync="addDialogVisible"
            width="50%"
            @close="addDialogClosed"
        >
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="100px">
                <el-form-item :label="titleText" prop="attr_name">
                    <el-input v-model="addForm.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

• 其中el-dialog对话框的标题和是否显示都是可以动态控制的
• el-form表单通过model、rules、ref来绑定表单数据，表单验证规则，表单引用属性。el-form-item通过label、v-model绑定表单项和输入框的值，通过prop绑定验证规则组的属性

            // 控制添加对话框的显示与隐藏
            addDialogVisible:false,
            // 添加参数的表单数据对象
            addForm:{
                attr_name:''
            },
            // 添加表单的验证规则对象
            addFormRules:{
                attr_name:[
                    { required: true, message: '请输入参数名称', trigger: 'blur' }
                ]
            }

• el-dialog对话框关闭后,要对里面的el-form表单重置

        // 监听添加对话框的关闭事件
        addDialogClosed(){
            this.$refs.addFormRef.resetFields()
        }

父子路由

• 形式

const routes = [
  { path: '/', redirect: '/login' },
  { path: '/login', component: Login },
  {
    path: '/home',
    component: Home ,
    redirect: '/welcome',
    children:[
      { path: '/welcome', component: Welcome },
      { path: '/users', component: Users },
      { path: '/rights', component: Rights },
      { path: '/roles', component: Roles},
      { path: '/categories', component: Cate},
      { path: '/params', component: Params}
    ]
  }
]

• 在父路由页面放路由占位符，子路由页面就可以在父路由页面显示

            <!-- 右侧内容主体 -->
            <el-main :style="{ 'height': mainH+'px' }">
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>

Vue router 非懒加载和懒加载

1.非懒加载

1.1.import

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/view/index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ]
})

1.2.require

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: require(`@/view/index`).default
    }
  ]
})

注意 require 后面有个 default

2.懒加载

2.1.import

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import(`@/view/index`)
    }
  ]
})

注意这是一个箭头函数

2.2.require

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: resolve => (require([`@/view/index.vue`], resolve))
    }
  ]
})

注意这是一个箭头函数

路由懒加载，也叫按需加载

使用路由懒加载后，可以减小app.js文件的大小，从而缩短第一次打开vue项目的加载时间。

• 为什么
  1.直接把组件通过import引用到页面，然后打包，其中app.js 259 kb
  2.将组件通过component: ()=>import(‘@/view/tab2/tab32’)的方式动态加载后打包，其中app.js 35 kb
  3.这样一来，路由越多，app.js文件越大，app.js越大，第一次打开vue项目的时间越久，使用动态加载的方式后，每个组件的DOM文本会单独打包成一个文件，当用户路由访问的时候，页面会动态加载对应的文件，这样就是现实了首次快速打开vue项目的优化方式之一。