Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 基本知識點概述
阿新 • • 發佈：2019-01-06
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各個組成部分的過程的過程。
- 定義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 Vue.js提供了一些常用的內建指令，接下來我們將介紹以下幾個內建指令：
- v-if指令
<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-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
})
<!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