Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 基本知识点概述
2018-01-04 16:14
1276 查看
Vue.js是当下很火的一个JavaScript
MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组
了解一门语言,或者学习一门新技术,编写Hello World示例是我们的必经之路。
这段代码在画面上输出"Hello World!"。
使用Vue的过程就是定义MVVM各个组成部分的过程的过程。
定义View
定义Model
创建一个Vue实例或"ViewModel",它用于连接View和Model
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:
v-if指令
dialogStatus是在export default {}定义的变量,判断当前是新建还是编辑,此处if else用来判断调用哪个函数。 @click 是v-on的缩写
v-show指令
v-else指令
配合v-if使用
v-for指令
v-bind指令
下面这段代码构建了一个简单的分页条,v-bind指令作用于元素的class特性上。
这个指令包含一个表达式,表达式的含义是:高亮当前页。此处省略例子
v-on指令
Vue实例
main.js文件定义了vue实例
参考文章:
http://www.runoob.com/vue2/vue-tutorial.html
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各个组成部分的过程的过程。
定义View
定义Model
创建一个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
相关文章推荐
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之一vue和spring boot整合
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之二 vue 环境演示
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 整合Element UI
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之三 vue简单页面实战
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- SpringMVC+Mybatis+Mysql+Shiro
- mybatis+springmvc+miniui实战开发基本知识点
- 发布一个demo maven+freemarker+shiro+springmvc+spring+mybatis+redis+mysql
- spring boot + vue + element-ui
- spring boot + vue + element-ui全栈开发入门——windows开发环境
- spring boot + vue + element-ui全栈开发入门——集成element-ui
- 基于Vue+Spring MVC+MyBatis+Shiro+Dubbo开发的分布式后台管理系统
- spring boot + vue + element-ui全栈开发入门——主页面开发
- spring boot + vue + element-ui全栈开发入门——项目部署
- 酒店管理平台(element+vuejs+springboot+mybatis项目)
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
- 基于Vue+Spring MVC+MyBatis+Shiro+Dubbo开发的分布式后台管理系统
- Vue+ElementUI+SpringMVC实现分页