VUE
筆記目錄：(https://www.cnblogs.com/wenjie2000/p/16378441.html)
視頻教程(P146~P148)
本篇是使用的vue2，雖然vue3.x已經出了，目前但對于后端人員來說了解一些vue2就足夠了，不需要過于深入學習
-
Vue是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫
-
基于MVVM(Model-View-ViewModel)思想，實作資料的雙向系結，將編程的關注點放在資料上
-
官網：https://v2.cn.vuejs.org/
Vue快速入門
首先要在IDEA中下載Vue.js插件（File>Setting>Plugins），如果不下，后續在html中使用vue不但代碼沒有提示和高亮，還會報錯（實際上能正常使用沒有問題），
-
新建HTML頁面，引入vue.js檔案（我這里用的是vue2.x，如果使用vue3.x則是引入的vue.global.js，語法上也有一些區別）
<!--vue2.x--> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <!--vue3.x--> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>當然，你也可以下載此檔案并自行提供服務：
<script src="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/js/vue.js"></script> -
在JS代碼區域，創建Vue核心物件，進行資料系結
new Vue({ el:"#app", data() { return { username: "", } } });如果使用的vue3，這里就是：
const {createApp} = Vue createApp({ data() { return { username: "", } } ......//內部除了el，其他沒什么區別 }).mount('#app')如果想用vue3，后面可以模仿著進行修改
-
撰寫視圖
<div id="app"> <input v-model="username"> <!--插值運算式--> {{username}} </div> -
完整html頁面
<!--輸入框內容改變，{{username}}會跟著變，Model變動，讓兩個View變化產生聯動--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="username"> <!--插值運算式--> {{username}} </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> new Vue({ el:"#app", data() { return { username: "" } } }); </script> </body> </html>
Vue常用指令
-
指令：HTML標簽上帶有v-前綴的特殊屬性，不同指令具有不同含義，例如: v-if，v-for...
-
常用指令
指令 作用 v-bind 為HTML標簽系結屬性值，如設定href , css樣式等 v-model 在表單元素上創建雙向資料系結 v-on 為HTML標簽系結事件 v-if 條件性的渲染某元素，判定為true時渲染,否則不渲染 v-else ↑ v-else-if ↑ v-show 根據條件展示某元素，區別在于切換的是display屬性的值 v-for 串列渲染，遍歷容器的元素或者物件的屬性 -
v-bind（為HTML標簽系結屬性值，如設定href , css樣式等）
<a v-bind:href="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/url">百度一下</a> <!--其中“url”可以系結為指定的值--><!--v-bind可以省略--> <a :href="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/url">點一下</a>完整頁面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <a :href="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/url">點一下</a> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> new Vue({ el:"#app", data() { return { username: "", url:"https://www.baidu.com/" } } }); </script> </body> </html> -
v-model（在表單元素上創建雙向資料系結）
之前的快速入門案例就是使用的v-model實作資料系結的
<input v-model="username"> -
v-on（為HTML標簽系結事件）
<input type="button" value="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/按鈕" v-on:click="show()"><!--簡寫--> <input type="button" value="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/按鈕" @click="show()">new Vue({ el:"#app", methods:{ show(){ alert("按鈕被點了"); } } }); -
v-if（條件性的渲染某元素，判定為true時渲染,否則不渲染）
<!--注意下面的count也需要在data()中定義--> <div v-if="count==3">div1</div> <div v-else-if="count==2">div2</div> <div v-else>div3</div> <input v-model="count"> -
v-show（ 根據條件展示某元素，區別在于切換的是display屬性的值）
<div v-show="count==3">div4</div> -
v-for（ 串列渲染，遍歷容器的元素或者物件的屬性）
<!--注意下面的addrs需要在data()中定義,例如addrs: ["北京", "上海", "天津"],--> <div v-for="addr in addrs">{{addr}}</div>-
加索引
<!--i表示索引，從零開始--> <div v-for="(addr,i) in addrs">{{i + 1}}--{{addr}}</div>
-
Vue生命周期
-
生命周期的八個階段:每觸發一個生命周期事件，會自動執行一個生命周期方法(鉤子)
狀態 階段周期 beforeCreate 創建前 created 創建后 beforeMount 載入前 mounted 掛載完成 beforeUpdate 更新前 updated 更新后 beforeDestroy 銷毀前 destroyed 銷毀后 實際開發基本上只會遇到mounted，其他的可以需要時再學
-
mounted：掛載完成，Vue初始化成功，HTML頁面渲染成功，
發送異步請求，加載資料
new Vue({ el:"#app", mounted(){ alert("vue掛載完畢，發送異步請求"); }, });
案例
查詢所有品牌
直接在上一節的案例的基礎上修改html頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1" id="brandTable">
<tr align="center">
<td>序號</td>
<td>品牌名稱</td>
<td>企業名稱</td>
<td>排序</td>
<td>品牌介紹</td>
<td>狀態</td>
<td>操作</td>
</tr>
<!--使用v-for遍歷tr-->
<tr v-for="(brand,i) in brands" align="center">
<td>{{i+1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.status}}</td>
<td><a href="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/#">修改</a> <a href="https://www.cnblogs.com/wenjie2000/archive/2023/01/09/#">洗掉</a></td>
</tr>
</table>
</div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data() {
return {
brands:[],
}
},
mounted() {
// 頁面加載完后，發送異步請求，查詢資料
var _this=this;//如果直接在axios中的.then(function(){})中使用this，this默認會指向window物件，不能指向Vue的物件,所以需要變數_this進行傳遞
axios({
method: "get",
url: "http://localhost:8080/login-web/SelectAllServlet2",
}).then(function (response) {
_this.brands=response.data;
})
},
});
</script>
</body>
</html>
新增品牌
新增品牌的頁面也可以學著手動修改，不難，這里我就不給結果了
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541615.html
標籤：其他