1. vue 使用快速入門三步走 (1) 新建 HTML 頁面，引入 Vue.js文件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 入門示例</title> <script src="https://cdn.j ...
1. vue 使用快速入門三步走
(1) 新建 HTML 頁面，引入 Vue.js文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 入門示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head>
(2) 在JS代碼區域，創建Vue核心對象，進行數據綁定
new Vue({
el: "#app",
data() {
return {
name: ""
}
}
});
創建 Vue 對象時，傳遞一個 js 對象，該對象中需要如下屬性：
el： 用來指定哪些標簽受 Vue 管理。 該屬性取值#app中的app需要是受管理的標簽的id屬性值data：用來定義數據模型methods：用來定義函數。這個我們在後面就會用到
(3) 編寫視圖，綁定數據和方法
<div id="app">
<p>{{ message }}</p>
<button v-on:click="greet">Greet</button>
</div>
2. vue 常見指令及作用
常用的指令有
| 指令 | 作用 |
|---|---|
| v-bind | 為HTML標簽綁定屬性值，如設置 href , css樣式等 |
| v-model | 在表單元素上創建雙向數據綁定 |
| v-on | 為HTML標簽綁定事件 |
| v-if | 條件性的渲染某元素，判定為true時渲染,否則不渲染 |
| v-else | 條件性的渲染某元素，判定為true時渲染,否則不渲染 |
| v-else-if | 條件性的渲染某元素，判定為true時渲染,否則不渲染 |
| v-show | 根據條件展示某元素，區別在於切換的是display屬性的值 |
| v-for | 列表渲染，遍歷容器的元素或者對象的屬性 |
3. vue 生命周期
生命周期的八個階段：每觸發一個生命周期事件，會自動執行一個生命周期方法，這些生命周期方法也被稱為鉤子方法。
| 狀態 | 階段周期 |
|---|---|
| beforeCreate | 創建前 |
| created | 創建後 |
| beforeMount | 載入前 |
| mounted | 掛載完成 |
| beforeUpdate | 更新前 |
| updated | 更新後 |
| beforeDestroy | 銷毀前 |
| destroyed | 銷毀後 |
下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數
這些鉤子方法重點關註 mounted,也最常使用。
mounted：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以後我們會在該方法中發送非同步請求，載入數據。
小案例
列表查詢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 頁面標題 -->
<h1>歡迎你</h1>
<!-- 新增按鈕 -->
<input type="button" value="新增" id="add"><br>
<hr>
<!-- Vue.js應用 -->
<div id="app">
<!-- 數據表格 -->
<table border="1" cellspacing="0" width="1200">
<!-- 表頭 -->
<tr>
<th>序號</th>
<th>品牌名稱</th>
<th>企業名稱</th>
<th>排序</th>
<th>品牌介紹</th>
<th>狀態</th>
<th>操作</th>
</tr>
<!-- 利用v-for指令迴圈渲染品牌數據 -->
<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 == 1 ? "啟用" : "禁用"}}</td>
<!-- 操作 -->
<td>
<a href="#">修改</a>
<a href="#">刪除</a>
</td>
</tr>
</table>
</div>
<!-- 引入Vue.js庫 -->
<script src="js/vue.js"></script>
<!-- 引入Axios庫 -->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
new Vue({
// Vue實例掛載到id為"app"的元素上
el: "#app",
data() {
return {
// 品牌數據列表
brands: []
}
},
// 在Vue實例掛載後執行的代碼
mounted() {
var _this = this;
// 發起GET請求獲取數據
axios({
method: "get",
url: "http://localhost:8080/brand_demo/selectAllServlet"
}).then(function (resp) {
// 將獲取的數據賦值給brands數組
_this.brands = resp.data;
})
}
})
</script>
</body>
</html>
