Vue.js
Vue 常用官網
vue.js
v-charts（圖表，地圖）
webpack
vue-router
axios
vue-cli
Element-Plus
白卷
npm install -g vue-cli # 安裝 vue 2 腳手架
vue init webpack wj-vue # 初始化專案，一路回車
npm run dev # 啟動專案
Vue CLI: Vue 官方提供的腳手架工具
npm install @vue/cli -g
vue create hello-vue # 建立 Vue 專案
頁面上使用 Vue，CDN 匯入 js 可以用。
從這裡開始——建立一個 Vue 例項
- 建立 Vue 應用例項
// main.js
import { createApp } from 'vue' // 從 vue 包中解構出 createApp 函式
const app = Vue.createApp({ // 呼叫 createApp 函式獲得一個 Vue 應用例項。傳入 createApp 的物件是一個元件
data: function() {
return {
message: 'HelloWorld' // 我們用到的變數都放在這裡
}
}
});
- 掛載應用
app.mount('#app'); // 把 app 應用例項掛載到容器元素上，這裡提供的是一個 CSS 選擇器字串
模板語法
v-開頭的是指令，指令的值是變數名或者表示式，指令的作用是將變數的值渲染到檢視上
<!-- 文字插值 -->
<span>{{ msg }}</span> <!-- 顯示變數 msg 的值 -->
<!-- 原始 HTML -->>
<span v-html="rawHTML"></span> <!-- 將變數 rawHTML 的值作為 span 標籤的 innerHTML 屬性值 -->
<!-- 屬性繫結 -->
<a v-bind:href="msg">This is a link</a> <!-- 將 msg 的值作為 href 屬性的值 -->
<a :href="msg">This is a link</a> <!-- 屬性繫結的簡寫形式 -->
<div v-bind="objectOfAttrs"></div> <!-- 將物件的屬性繫結到元素上 -->
<!-- 條件渲染 -->
<span v-if="sex === 'man'">This is a man</span>
<span v-else-if="sex === 'woman'">This is a woman</span>
<span v-else>This is not a human</span>
<!-- 列表渲染（迴圈） -->
<li v-for="i in items">{{ i.attr }}</li>
<li v-for="(item, index) in items"></li> <!-- 可以在拿到變數的同時拿到索引 -->
<!-- 事件繫結 -->
<input type="button" v-on:click="function"></input>
<input type="checkbox" @click="function"></input>
<!-- 雙向繫結 -->
<!-- 雙向繫結意味著，變數的值變了會影響到檢視，而檢視變了也可以反過來影響變數 -->
<input type="text" v-model="variable"></input>
<!-- 動態引數 -->
<a v-bind:[attrName]="url"></a> <!-- attrName 是一個變數，假如它的值為 href，那麼作用就相當於 v-bind:href="url" -->
Vue 元件化開發
寫一個自定義元件：
MyComponent.vue
<!-- 檢視 -->
<template>
<!-- 你要在元件中新增的內容 -->
</template>
<!-- 模型 -->
<script>
// 匯入其他元件
import comp1 from './components/comp1.vue'
// 宣告元件
export default {
name: 'MyComponent', // 元件名
components: { // 要使用到的其他元件
comp1
},
props: { // 需要父元件傳進來的值。父元件在呼叫子元件時透過屬性傳遞該值：<MyComponent msg="abc">
msg: String
},
methods: {
func() {
// 你要在元件中使用的方法
}
}
}
</script>
<!-- 樣式 -->
<style>
</style>
第三方元件 UI
Vue 2: Element UI
Vue 3: Element Plus
Axios 網路請求
Axios 中文網
Axios 是一個 HTTP 庫
首先下載 axios，也可以使用 CDN。
npm install axios
在主類中匯入 axios
import axios from 'axios' // 哪一個元件用到了 axios 再匯入 axios
使用 axios 傳送請求
let tableData = ref([]); // 讓 Vue 追蹤 tableData 的變化並觸發元件的重新渲染
axios.get("http://localhost:8081/api") // 傳送 GET 請求
.then((response) => { // 處理成功情況
console.log(response);
tableData.value = response.data; // 將接收的內容賦值給變數
})
.catch(err => { // 處理失敗情況
console.log(err);
})
.then(function() {
// 總會執行
})
如果要在處理函式中使用
this指標的話，
跨域請求
由於同源策略，預設禁止跨域訪問。需要在後端 Controller 類上新增 @CrossOrigin 註解以允許跨域。
@RestController
@CrossOrigin // 使該類中的方法都允許跨域訪問
public class HelloController {
路由
Vue Router
路由可以根據 URL 地址，在不同元件之間切換。
安裝 Vue Router
npm install vue-router@4
Vue 3 對應 Vue Router 4，Vue 2 對應 Vue Router 3
在主類中匯入並使用
import router from 'vue-router'
// 建立 Vue 應用例項……
app.use(router);
在大型專案中一般會把路由規則放到單獨的檔案中
// router/index.js
import { createRouter, createWebHashHistory } from "vue-router"; // 必須使用解構的方法匯入兩個函式
import Home from '@/components/Home' // @ 表示 src 目錄
import News from '@/components/News'
// 路由表
const routes = [
{
path: '/',
redirect: '/home'
},
{
path: '/home', // 路徑
component: Home // 對應的元件
},
{
path: '/news',
name: 'News', // 可以指定路由名稱
component: News
}
];
// 建立路由例項
const router = VueRouter.createRouter({
history: VueRouter.createWebHashHistory(),
routes, // routes: routes 的簡寫
});
export default router; // 匯出路由例項
現在可以開始使用啦
<!-- component/MyComponent.vue -->
<template>
<div>
<router-link to="/home">首頁</router-link> <!-- Vue Router 特有的連結 -->
<router-link to="/news">新聞</router-link>
<hr>
<router-view></router-view> <!-- Vue Router 的顯示視窗 -->
</div>
</template>
可以在 <script> 中使用 this.$router.push('/home') 來跳轉路由。
響應式基礎
<script setup>
import { ref } from 'vue'
const count = ref(0); // ref 函式可以把一個變數變成響應式變數並返回
function increment() {
count.value++; // 在 JavaScript 中需要 .value，在模板中不需要；count 的變化會影響到模板
}
</script>