Vue 常用的语法总结

---

Vue 的认识

Vue [读音 /vjuː/，类似于 view ] 是一套用于构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 目录结构

├── build # 构建相关
├── mock # 项目mock 模拟数据
├── plop-templates # 基本模板
├── node_modules # 当前项目所有依赖，不可移植
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局 filter
│ ├── icons # 项目所有 svg icons
│ ├── lang # 国际化 language
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json

• 启动本地运行：npm run dev

Vue 常用的语法

①搜索条件

	<!-- 搜索条件 -->
    <el-row>
      <el-col :span="20">
        <el-form ref="queryForm" :inline="true" :model="queryForm">
          <el-row :gutter="1">
            <el-col :span="5">
              <el-form-item prop="searchParam" class="search-param-input">
                <el-input v-model="queryForm.searchParam" :placeholder="$t('empl.text.searchParam')" clearable />
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item prop="gender">
                <el-select v-model="queryForm.gender" :placeholder="$t('global.text.gender')" clearable>
                  <el-option :label="$t('global.text.women')" value="0" />
                  <el-option :label="$t('global.text.male')" value="1" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item prop="lockStatus">
                <el-select v-model="queryForm.lockStatus" :placeholder="$t('global.text.lockStatus')" clearable>
                  <el-option :label="$t('global.text.normal')" value="1" />
                  <el-option :label="$t('global.text.lock')" value="0" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="3">
              <el-form-item prop="workingStatus">
                <el-select v-model="queryForm.workingStatus" :placeholder="$t('empl.text.workingStatus')" clearable>
                  <el-option :label="$t('global.text.onTheJob')" value="1" />
                  <el-option :label="$t('global.text.leaveOffice')" value="0" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item>
                <el-button-group>
                  <el-button v-waves type="primary" icon="el-icon-search" @click.native="queryList">
                    {
    
    {
    
     $t('global.button.search') }}
                  </el-button>
                  <el-button v-waves type="primary" icon="el-icon-refresh-left" @click.native="resetQueryForm">
                    {
    
    {
    
     $t('global.button.reset') }}
                  </el-button>
                </el-button-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
      <!-- 导出员工通讯录 -->
      <el-col :span="2">
        <el-form :inline="true">
          <el-form-item class="fr">
            <el-button v-waves type="primary" icon="el-icon-top-right" @click.native="handleExportEmpl">{
    
    {
    
     $t('empl.button.handleExport') }} </el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2">
        <el-form :inline="true">
          <el-form-item class="fr">
            <el-button v-waves type="primary" icon="el-icon-plus" @click.native="handleInsert">{
    
    {
    
     $t('global.button.insert') }}
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

前端页面显示效果：

②table表格

	<!-- table表格 -->
    <el-table
      v-loading="loadingStatus"
      :data="tableDataList"
      header-align="center"
      highlight-current-row
      style="width:100%;"
    >
      <!-- <el-table-column type="selection" align="center" width="50" /> -->

      <el-table-column align="center" prop="code" :label="$t('empl.text.code')" />

      <el-table-column align="center" :label="$t('empl.text.loginName')">
        <template slot-scope="scope">
          <el-link
            v-clipboard:copy="scope.row.loginName"
            v-clipboard:success="clipLoginNameSuccess"
            :underline="false"
            type="primary"
          >
            {
    
    {
    
     scope.row.loginName }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="name" :label="$t('empl.text.name')" />

      <el-table-column align="center" width="140" :label="$t('global.text.phone')">
        <template slot-scope="scope">
          <el-link
            v-clipboard:copy="scope.row.phone"
            v-clipboard:success="clipPhoneSuccess"
            :underline="false"
            type="primary"
          >
            {
    
    {
    
     scope.row.phone }}
          </el-link>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('global.text.gender')"
      >
        <template slot-scope="scope">
          <i :style="scope.row.gender == 1 ? 'color:blue;':'color:red;'" :class="scope.row.gender == 1 ? 'el-icon-male' : 'el-icon-female'" />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('global.text.workingStatus')"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.workingStatus == 0 ? 'danger' : 'primary'" v-text="scope.row.workingStatus == 0 ? $t('global.text.leaveOffice') : $t('global.text.onTheJob')" />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('global.text.lockStatus')"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.lockStatus == 0 ? 'danger' : 'primary'" v-text="scope.row.lockStatus == 0 ? $t('global.text.lock') : $t('global.text.normal')" />
        </template>
      </el-table-column>

      <el-table-column align="center" width="100" prop="entryDate" :label="$t('empl.text.entryDate')" />

      <el-table-column align="center" fixed="right" :label="$t('global.text.operation')" width="300">
        <template slot-scope="scope">
          <template>
            <el-button type="text" @click.native.prevent="handleUpdate(scope.row.id)">
              {
    
    {
    
     $t('global.button.update') }}
            </el-button>
            <el-button
              v-if="scope.row.workingStatus == 1"
              v-points
              type="text"
              @click.native.prevent="handleUpdateWorkingStatus(0,scope.row.id)"
            >
              {
    
    {
    
     $t('global.button.unWorking') }}
            </el-button>
            <!-- <el-button
              v-else
              v-points
              type="text"
              @click.native.prevent="handleUpdateWorkingStatus(1,scope.row.id)"
            >
              <svg-icon icon-class="working" />
              {
    
    {
    
     $t('global.button.working') }}
            </el-button> -->
            <el-button
              v-points
              type="text"
              @click.native.prevent="handleUpdateLockStatus(scope.row.lockStatus == 1 ? 0 : 1,scope.row.id)"
            >
              {
    
    {
    
     scope.row.lockStatus == 1 ? $t('global.button.lock') : $t('global.button.unLock') }}
            </el-button>
            <el-button type="text" @click.native.prevent="handleDelete(scope.row.id)">{
    
    {
    
     $t('global.button.delete') }}</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

前端页面显示效果：

③分页组件

	<!-- 分页组件 -->
    <pagination
      v-show="page.total>0"
      :total="page.total"
      :page.sync="page.pageNum"
      :limit.sync="page.pageSize"
      @pagination="queryList"
    />

前端页面显示效果：

④新增/编辑模态框

<!-- 新增/编辑模态框 -->
    <el-dialog
      width="60%"
      :title="editModal.title"
      :visible.sync="editModal.dialogVisible"
      :before-close="handleCloseModal"
      :close-on-click-modal="editModal.closeOnClickModal"
    >
      <el-form ref="editModalForm" :model="editModal.form" :rules="formRules">

        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('empl.text.loginName')" prop="loginName" :label-width="editModal.formLabelWidth">
              <el-input v-model="editModal.form.loginName" :placeholder="$t('user.placeholder.loginName')" :disabled="editModal.editState == 2" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('global.text.gender')" prop="gender" :label-width="editModal.formLabelWidth">
              <!-- <el-input v-model="editModal.form.gender" /> -->
              <el-radio-group v-model="editModal.form.gender">
                <el-radio :label="1">{
    
    {
    
     $t('global.text.male') }}</el-radio>
                <el-radio :label="0">{
    
    {
    
     $t('global.text.women') }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('empl.text.name')" prop="name" :label-width="editModal.formLabelWidth">
              <el-input v-model="editModal.form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('global.text.phone')" prop="phone" :label-width="editModal.formLabelWidth">
              <el-input v-model="editModal.form.phone" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('empl.text.code')" prop="code" :label-width="editModal.formLabelWidth">
              <el-input v-model="editModal.form.code" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('empl.text.entryDate')" prop="entryDate" :label-width="editModal.formLabelWidth">
              <template>
                <el-date-picker v-model="editModal.form.entryDate" type="date" value-format="yyyy-MM-dd" />
              </template>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="10">
            <el-form-item :label="$t('global.text.email')" prop="email" :label-width="editModal.formLabelWidth">
              <el-input v-model="editModal.form.email" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item :label="$t('global.text.wDesc')" prop="wDesc" :label-width="editModal.formLabelWidth">
              <el-input v-model="editModal.form.wDesc" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button plain @click="handleCloseModal">{
    
    {
    
     $t('global.button.cancel') }}</el-button>
        <el-button v-waves v-points type="primary" @click.native="handleCheckEditData">{
    
    {
    
     $t('global.button.confirm') }}</el-button>
      </div>
    </el-dialog>
    <!-- 新增/编辑模态框 -->

前端页面显示效果：

⑤计算属性方法

computed: {
    
    
    formRules() {
    
    
      return {
    
    
        code: [
          {
    
     required: true, message: this.$t('empl.validateTips.required.code'), trigger: 'blur' },
          {
    
     max: 10, message: this.$t('empl.validateTips.max.code'), trigger: 'blur' }
        ],
        loginName: [
          {
    
     required: true, message: this.$t('empl.validateTips.required.loginName'), trigger: 'blur' },
          {
    
     max: 10, message: this.$t('empl.validateTips.max.loginName'), trigger: 'blur' }
        ],
        name: [
          {
    
     required: true, message: this.$t('empl.validateTips.required.name'), trigger: 'blur' },
          {
    
     max: 50, message: this.$t('empl.validateTips.max.name'), trigger: 'blur' }
        ],
        phone: [
          {
    
     required: true, message: this.$t('global.validateTips.required.phone'), trigger: 'blur' }
        ],
        entryDate: [
          {
    
     required: true, message: this.$t('empl.validateTips.required.entryDate'), trigger: 'blur' }
        ],
        email: [
          {
    
     message: this.$t('global.validateTips.max.email'), trigger: 'blur' },
          {
    
     max: 30, message: this.$t('global.validateTips.max.name'), trigger: 'blur' }

        ]
      }
    }
  }

前端页面显示效果：

⑥可一键复制事件

	// 复制手机号到剪切板事件
    clipPhoneSuccess() {
    
    
      this.$message({
    
    
        message: this.$t('global.message.clipPhone'),
        type: 'success',
        duration: 1500
      })
    }

---

Note:
欢迎点赞，留言，转载请在文章页面明显位置给出原文链接
知者，感谢您在茫茫人海中阅读了我的文章
没有个性 哪来的签名！
详情请关注点我
持续更新中

扫一扫 有惊喜！

© 2021 12 - Guyu.com | 【版权所有 侵权必究】