Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 基本知识点概述

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。

Vue 只关注视图层, 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组


Hello World示例

了解一门语言,或者学习一门新技术,编写Hello World示例是我们的必经之路。
这段代码在画面上输出"Hello World!"。

<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--这是我们的View--> <div id="app"> {{ message }} </div> </body> <script src="js/vue.js"></script> <script> // 这是我们的Model var exampleData = { message: 'Hello World!' } // 创建一个 Vue 实例或 "ViewModel" // 它连接 View 与 Model new Vue({ el: '#app', data: exampleData }) </script> </html>

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

  1. 定义View
  2. 定义Model
  3. 创建一个Vue实例或"ViewModel",它用于连接View和Model

常用指令

下面的代码中,利用v-model进行数据绑定,

<template>
  <section>
    <div  v-loading='loading'>
      <el-col :span='24' class='toolbar' style='padding-bottom: 0px;'>
        <el-form :inline='true'>
          <el-form-item>
            <el-input v-model='logKeyWord' placeholder='请输入关键字' clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='primary' v-on:click='getAllLogs'>查询</el-button>
          </el-form-item>

        </el-form>
      </el-col>

      <el-table :data='logLists' stripe style='width: 100%; margin: 0 auto; text-align:center;'>
        <el-table-column label='ID'>
          <template slot-scope='scope'>
            <label>{{scope.row.id}}
              <span></span>
            </label>
          </template>
        </el-table-column>
         <el-table-column label='时间'>
          <template slot-scope='scope'>
            <label>{{scope.row.createTime}}
              <span></span>
            </label>
          </template>
         </el-table-column>
          <el-table-column label='操作'>
           <template slot-scope='scope'>
             <label>{{scope.row.operateContent}}
               <span></span>
             </label>
           </template>
          </el-table-column>
          <el-table-column label='操作人'>
            <template slot-scope='scope'>
              <label>{{scope.row.userId}}
                <span></span>
              </label>
            </template>
          </el-table-column>
         <el-table-column label='操作结果'>
            <template slot-scope='scope'>
              <label>{{scope.row.displayName}}
                <span></span>
              </label>
            </template>
          </el-table-column>
      </el-table>

    </div>
  </section>
</template>
<style rel='stylesheet/scss' lang='scss'>
.el-table thead tr th {
  background-color: rgba(28,148,255,0.6) !important;
  color: #fff;
}
.el-table th{
  text-align: center;
}
.addBtn {
  background: #fff;
  color: #1C94FF;
}
</style>
<script lang='babel'>
import webapi from '../../api/webapi'
import {mapState} from 'vuex'

export default {
  name: 'log',
  data () {
    return {
      logKeyWord: '',
      logLists: [],
      loading: false,
      textMap: {
        update: '编辑',
        create: '新增',
        delete: '删除账号'
      },
      dialogFormVisible: false,
      dialogLoading: false,
      temp: {
        role: ''
      },
      dialogStatus: '',
      disabledFlag: true // 角色是否可更改
    }
  },
  computed: {
    ...mapState({
      menuList: state => state.menuList.menuList
    })
  },

  mounted () {
    this.getAllLogs()
  },
  methods: {
    handleEdit (index, row) {
      this.getRoles(row)
      this.temp = Object.assign({}, row) // copy obj
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    async handleDelete (index, row) {
      try {
        let temp = Object.assign({}, row)
        const params = {
          roleId: temp.id
        }
        const res = await webapi.manage.roles(params)
        if (res.code === '200') {
          this.getRoleInfo()
          this.$message({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$message({
            title: '失败',
            message: res.msg,
            type: 'error',
            duration: 2000
          })
        }
      } catch (e) {
        console.log(e)
      }
    },

    async getAllLogs () {
      try {
        this.loading = true
        const params = {
          logKeyWord: this.logKeyWord
        }
        const res = await webapi.manage.allLogs(params)
        if (res.code === '200') {
          this.logLists = res.data
        } else {
          this.logLists = []
        }
      } catch (e) {
        console.log(e)
      } finally {
        this.loading = false
      }
    },
    itemClick (node) {
      console.log('node', JSON.stringify(node.model))
    }
  }
}
</script>

Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。

Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:

  • v-if指令
dialogStatus是在export default {}定义的变量,判断当前是新建还是编辑,此处if else用来判断调用哪个函数。 @click 是v-on的缩写
<div slot='footer' class='dialog-footer'>
  <el-button @click='dialogFormVisible = false'>取 消</el-button>
  <el-button v-if="dialogStatus=='create'" type='primary' @click='createRole'>确 定</el-button>
  <el-button v-else type='primary' @click='editRole'>确 定</el-button>
</div>
  • v-show指令
v-show也是条件渲染指令,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性
  • v-else指令
配合v-if使用
  • v-for指令
<el-select v-model="child.paramArea" filterable multiple placeholder="请选择省份" style="width:50%;">
  <el-option v-for="item in provinces" :key="item" :label="item" :value="item">
  </el-option>
</el-select>
<script lang="babel">
import webapi from '../../../api/webapi'
import {mapState} from 'vuex'
import {provinces} from '../../../utils/config'
import {isAge} from '../../../utils/utils'
  • v-bind指令

v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class

v-bind:argument="expression"

下面这段代码构建了一个简单的分页条,v-bind指令作用于元素的class特性上。
这个指令包含一个表达式,表达式的含义是:高亮当前页。此处省略例子


  • v-on指令
el-form-item>
            <el-button type="primary" v-on:click="getAccountInfo">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class='addBtn' @click="handleCreate">新增</el-button>
          </el-form-item>
上述两种写法都对,第二个是简写。

Vue实例

main.js文件定义了vue实例

import Vue from 'vue'
import App from './App'
import {sync} from 'vuex-router-sync'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
import store from './store'
import baseComponents from './components'
sync(store, router)
Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.use(baseComponents)
Vue.mixin({
  methods: {
    $showToast (toast) {
      this.$store.dispatch('toastPush', toast)
    }
  }
})
let vm = new Vue({
  el: '#app',//view
  router,//model
  store,
  template: '<App/>',
  components: { App }
})

Vue.use({
  vm
})
Vue计算属性,method也可以实现,但是前者利用缓存

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>

参考文章:

http://www.runoob.com/vue2/vue-tutorial.html

相关文章
相关标签/搜索