VUE&Element

阿新 • • 發佈：2022-02-21

VUE&Element
1，VUE
2，Element

VUE&Element

今日目標：

能夠使用VUE中常用指令和插值表示式

能夠使用VUE生命週期函式 mounted

能夠進行簡單的 Element 頁面修改

能夠完成查詢所有功能

能夠完成新增功能

1，VUE

1.1 概述

接下來我們學習一款前端的框架，就是 VUE。

Vue 是一套前端框架，免除原生JavaScript中的DOM操作，簡化書寫。

我們之前也學習過後端的框架 Mybatis ，Mybatis 是用來簡化 jdbc 程式碼編寫的；而 VUE

是前端的框架，是用來簡化 JavaScript 程式碼編寫的。前一天我們做了一個綜合性的案例，裡面進行了大量的DOM操作，如下

學習了 VUE 後，這部分程式碼我們就不需要再寫了。那麼 VUE 是如何簡化 DOM 書寫呢？

基於MVVM(Model-View-ViewModel)思想，實現資料的雙向繫結，將程式設計的關注點放在資料上。之前我們是將關注點放在了 DOM 操作上；而要了解 MVVM 思想，必須先聊聊 MVC 思想，如下圖就是 MVC 思想圖解

C 就是咱們 js 程式碼，M 就是資料，而 V 是頁面上展示的內容，如下圖是我們之前寫的程式碼

MVC 思想是沒法進行雙向繫結的。雙向繫結是指當資料模型資料發生變化時，頁面展示的會隨之發生變化，而如果表單資料發生變化，繫結的模型資料也隨之發生變化。接下來我們聊聊 MVVM

思想，如下圖是三個元件圖解

圖中的 Model 就是我們的資料，View 是檢視，也就是頁面標籤，使用者可以通過瀏覽器看到的內容；Model 和 View 是通過 ViewModel 物件進行雙向繫結的，而 ViewModel 物件是 Vue 提供的。接下來讓大家看一下雙向繫結的效果，下圖是提前準備的程式碼，輸入框綁定了 username 模型資料，而在頁面上也使用 {{}} 綁定了 username 模型資料

通過瀏覽器開啟該頁面可以看到如下頁面

當我們在輸入框中輸入內容，而輸入框後面隨之實時的展示我們輸入的內容，這就是雙向繫結的效果。

1.2 快速入門

Vue 使用起來是比較簡單的，總共分為如下三步：

新建 HTML 頁面，引入 Vue.js檔案
```
<script src="js/vue.js"></script>
```
在JS程式碼區域，建立Vue核心物件，進行資料繫結
```
new Vue({
    el: "#app",
    data() {
        return {
            username: ""
        }
    }
});
```
建立 Vue 物件時，需要傳遞一個 js 物件，而該物件中需要如下屬性：
- el ：用來指定哪兒些標籤受 Vue 管理。該屬性取值 #app 中的 app 需要是受管理的標籤的id屬性值
- data ：用來定義資料模型
- methods ：用來定義函式。這個我們在後面就會用到
編寫檢視
```
<div id="app">
    <input name="username" v-model="username" >
    {{username}}
</div>
```
{{}} 是 Vue 中定義的 插值表示式 ，在裡面寫資料模型，到時候會將該模型的資料值展示在這個位置。

整體程式碼如下：

<!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="js/vue.js"></script>
<script>
    //1. 建立Vue核心物件
    new Vue({
        el:"#app",
        data(){  // data() 是 ECMAScript 6 版本的新的寫法
            return {
                username:""
            }
        }

        /*data: function () {
            return {
                username:""
            }
        }*/
    });

</script>
</body>
</html>

1.3 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	列表渲染，遍歷容器的元素或者物件的屬性

接下來我們挨個學習這些指令

1.3.1 v-bind & v-model 指令

v-bind

該指令可以給標籤原有屬性繫結模型資料。這樣模型資料發生變化，標籤屬性值也隨之發生變化

例如：
```
<a v-bind:href="url">百度一下</a>
```
上面的 v-bind:" 可以簡化寫成 : ，如下：
```

<a :href="url">百度一下</a>
```
v-model

該指令可以給表單項標籤繫結模型資料。這樣就能實現雙向繫結效果。例如：
```
<input name="username" v-model="username">
```

程式碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a v-bind:href="url">點選一下</a>
    <a :href="url">點選一下</a>
    <input v-model="url">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 建立Vue核心物件
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://www.baidu.com"
            }
        }
    });
</script>
</body>
</html>

通過瀏覽器開啟上面頁面，並且使用檢查檢視超連結的路徑，該路徑會根據輸入框輸入的路徑變化而變化，這是因為超連結和輸入框繫結的是同一個模型資料

1.3.2 v-on 指令

我們在頁面定義一個按鈕，並給該按鈕使用 v-on 指令繫結單擊事件，html程式碼如下

<input type="button" value="一個按鈕" v-on:click="show()">

而使用 v-on 時還可以使用簡化的寫法，將 v-on: 替換成 @，html程式碼如下

<input type="button" value="一個按鈕" @click="show()">

上面程式碼繫結的 show() 需要在 Vue 物件中的 methods 屬性中定義出來

new Vue({
    el: "#app",
    methods: {
        show(){
            alert("我被點了");
        }
    }
});

注意：v-on: 後面的事件名稱是之前原生事件屬性名去掉on。

例如：

單擊事件：事件屬性名是 onclick，而在vue中使用是 v-on:click

失去焦點事件：事件屬性名是 onblur，而在vue中使用時 v-on:blur

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="button" value="一個按鈕" v-on:click="show()"><br>
    <input type="button" value="一個按鈕" @click="show()">
</div>
<script src="js/vue.js"></script>
<script>
    //1. 建立Vue核心物件
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
            }
        },
        methods:{
            show(){
                alert("我被點了...");
            }
        }
    });
</script>
</body>
</html>

1.3.3 條件判斷指令

接下來通過程式碼演示一下。在 Vue中定義一個 count 的資料模型，如下

//1. 建立Vue核心物件
new Vue({
    el:"#app",
    data(){
        return {
            count:3
        }
    }
});

現在要實現，當 count 模型的資料是3時，在頁面上展示 div1 內容；當 count 模型的資料是4時，在頁面上展示 div2 內容；count 模型資料是其他值時，在頁面上展示 div3。這裡為了動態改變模型資料 count 的值，再定義一個輸入框繫結 count 模型資料。html 程式碼如下：

<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-if="count == 3">div1</div>
    <div v-else-if="count == 4">div2</div>
    <div v-else>div3</div>
    <hr>
    <input v-model="count">
</div>

<script src="js/vue.js"></script>
<script>
    //1. 建立Vue核心物件
    new Vue({
        el:"#app",
        data(){
            return {
                count:3
            }
        }
    });
</script>
</body>
</html>

通過瀏覽器開啟頁面並在輸入框輸入不同的值，效果如下

然後我們在看看 v-show 指令的效果，如果模型資料 count 的值是3時，展示 div v-show 內容，否則不展示，html頁面程式碼如下

<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">

瀏覽器開啟效果如下：

通過上面的演示，發現 v-show 和 v-if 效果一樣，那它們到底有什麼區別呢？我們根據瀏覽器的檢查功能檢視原始碼

通過上圖可以看出 v-show 不展示的原理是給對應的標籤新增 display css屬性，並將該屬性值設定為 none ，這樣就達到了隱藏的效果。而 v-if 指令是條件不滿足時根本就不會渲染。

1.3.4 v-for 指令

這個指令看到名字就知道是用來遍歷的，該指令使用的格式如下：

<標籤 v-for="變數名 in 集合模型資料">
    {{變數名}}
</標籤>

注意：需要迴圈那個標籤，v-for 指令就寫在那個標籤上。

如果在頁面需要使用到集合模型資料的索引，就需要使用如下格式：

<標籤 v-for="(變數名,索引變數) in 集合模型資料">
    <!--索引變數是從0開始，所以要表示序號的話，需要手動的加1-->
   {{索引變數 + 1}} {{變數名}}
</標籤>

程式碼演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div v-for="addr in addrs">
        {{addr}} <br>
    </div>

    <hr>
    <div v-for="(addr,i) in addrs">
        {{i+1}}--{{addr}} <br>
    </div>
</div>

<script src="js/vue.js"></script>
<script>

    //1. 建立Vue核心物件
    new Vue({
        el:"#app",
        data(){
            return {
                addrs:["北京","上海","西安"]
            }
        }
    });
</script>
</body>
</html>

通過瀏覽器開啟效果如下

1.4 生命週期

生命週期的八個階段：每觸發一個生命週期事件，會自動執行一個生命週期方法，這些生命週期方法也被稱為鉤子方法。

下圖是 Vue 官網提供的從建立 Vue 到效果 Vue 物件的整個過程及各個階段對應的鉤子函式

看到上面的圖，大家無需過多的關注這張圖。這些鉤子方法我們只關注 mounted 就行了。

mounted：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以後我們會在該方法中傳送非同步請求，載入資料。

1.5 案例

1.5.1 需求

使用 Vue 簡化我們在前一天ajax學完後做的品牌列表資料查詢和新增功能

此案例只是使用 Vue 對前端程式碼進行優化，後端程式碼無需修改。

1.5.2 查詢所有功能

在 brand.html 頁面引入 vue 的js檔案
```
<script src="js/vue.js"></script>
```

建立 Vue 物件

在 Vue 物件中定義模型資料
在鉤子函式中傳送非同步請求，並將響應的資料賦值給資料模型

new Vue({
    el: "#app",
    data(){
        return{
            brands:[]
        }
    },
    mounted(){
        // 頁面載入完成後，傳送非同步請求，查詢資料
        var _this = this;
        axios({
            method:"get",
            url:"http://localhost:8080/brand-demo/selectAllServlet"
        }).then(function (resp) {
            _this.brands = resp.data;
        })
    }
})

修改檢視

定義 <div id="app"></div> ，指定該 div 標籤受 Vue 管理
將 body 標籤中所有的內容拷貝作為上面 div 標籤中
刪除表格的多餘資料行，只留下一個

在表格中的資料行上使用 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.statusStr}}</td>
    <td><a href="#">修改</a> <a href="#">刪除</a></td>
</tr>

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <a href="addBrand.html"><input type="button" value="新增"></a><br>
    <hr>
    <table id="brandTable" border="1" cellspacing="0" width="100%">
        <tr>
            <th>序號</th>
            <th>品牌名稱</th>
            <th>企業名稱</th>
            <th>排序</th>
            <th>品牌介紹</th>
            <th>狀態</th>
            <th>操作</th>
        </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.statusStr}}</td>
            <td><a href="#">修改</a> <a href="#">刪除</a></td>
        </tr>
    </table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>

<script>
    new Vue({
        el: "#app",
        data(){
            return{
                brands:[]
            }
        },
        mounted(){
            // 頁面載入完成後，傳送非同步請求，查詢資料
            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                _this.brands = resp.data;
            })
        }
    })
</script>
</body>
</html>

1.5.3 新增功能

頁面操作效果如下：

整體流程如下

注意：前端程式碼的關鍵點在於使用 v-model 指令給標籤項繫結模型資料，利用雙向繫結特性，在傳送非同步請求時提交資料。

在 addBrand.html 頁面引入 vue 的js檔案
```
<script src="js/vue.js"></script>
```

建立 Vue 物件

在 Vue 物件中定義模型資料 brand
定義一個 submitForm() 函式，用於給 提交 按鈕提供繫結的函式
在 submitForm() 函式中傳送 ajax 請求，並將模型資料 brand 作為引數進行傳遞

new Vue({
    el: "#app",
    data(){
        return {
            brand:{}
        }
    },
    methods:{
        submitForm(){
            // 傳送ajax請求，新增
            var _this = this;
            axios({
                method:"post",
                url:"http://localhost:8080/brand-demo/addServlet",
                data:_this.brand
            }).then(function (resp) {
                // 判斷響應資料是否為 success
                if(resp.data == "success"){
                    location.href = "http://localhost:8080/brand-demo/brand.html";
                }
            })

        }
    }
})

修改檢視

定義 <div id="app"></div> ，指定該 div 標籤受 Vue 管理
將 body 標籤中所有的內容拷貝作為上面 div 標籤中

給每一個表單項標籤繫結模型資料。最後這些資料要被封裝到 brand 物件中

<div id="app">
    <h3>新增品牌</h3>
    <form action="" method="post">
        品牌名稱：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企業名稱：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述資訊：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        狀態：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">啟用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>新增品牌</title>
</head>
<body>
<div id="app">
    <h3>新增品牌</h3>
    <form action="" method="post">
        品牌名稱：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
        企業名稱：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
        排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
        描述資訊：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
        狀態：
        <input type="radio" name="status" v-model="brand.status" value="0">禁用
        <input type="radio" name="status" v-model="brand.status" value="1">啟用<br>

        <input type="button" id="btn" @click="submitForm" value="提交">
    </form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data(){
            return {
                brand:{}
            }
        },
        methods:{
            submitForm(){
                // 傳送ajax請求，新增
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-demo/addServlet",
                    data:_this.brand
                }).then(function (resp) {
                    // 判斷響應資料是否為 success
                    if(resp.data == "success"){
                        location.href = "http://localhost:8080/brand-demo/brand.html";
                    }
                })
            }
        }
    })
</script>
</body>
</html>

通過上面的優化，前端程式碼確實簡化了不少。但是頁面依舊是不怎麼好看，那麼接下來我們學習 Element，它可以美化頁面。

2，Element

Element：是餓了麼公司前端開發團隊提供的一套基於 Vue 的網站元件庫，用於快速構建網頁。

Element 提供了很多元件（組成網頁的部件）供我們使用。例如超連結、按鈕、圖片、表格等等~

如下圖左邊的是我們編寫頁面看到的按鈕，上圖右邊的是 Element 提供的頁面效果，效果一目瞭然。

我們學習 Element 其實就是學習怎麼從官網拷貝元件到我們自己的頁面並進行修改，官網網址是

https://element.eleme.cn/#/zh-CN

進入官網能看到如下頁面

接下來直接點選 元件 ，頁面如下

2.1 快速入門

將資源 04-資料\02-element 下的 element-ui 資料夾直接拷貝到專案的 webapp 下。目錄結構如下

建立頁面，並在頁面引入Element 的css、js檔案和 Vue.js

<script src="vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

.建立Vue核心物件

Element 是基於 Vue 的，所以使用Element時必須要建立 Vue 物件
```
<script>
    new Vue({
        el:"#app"
    })
</script>
```
官網複製Element元件程式碼

在左選單欄找到 Button 按鈕 ，然後找到自己喜歡的按鈕樣式，點選 顯示程式碼 ，在下面就會展示出對應的程式碼，將這些程式碼拷貝到我們自己的頁面即可。

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">


    <el-row>
     	<el-button>預設按鈕</el-button>
        <el-button type="primary">主要按鈕</el-button>
        <el-button type="success">成功按鈕</el-button>
        <el-button type="info">資訊按鈕</el-button>
        <el-button type="warning">警告按鈕</el-button>
        <el-button type="danger">刪除</el-button>
    </el-row>
    <el-row>
        <el-button plain>樸素按鈕</el-button>
        <el-button type="primary" plain>主要按鈕</el-button>
        <el-button type="success" plain>成功按鈕</el-button>
        <el-button type="info" plain>資訊按鈕</el-button>
        <el-button type="warning" plain>警告按鈕</el-button>
        <el-button type="danger" plain>危險按鈕</el-button>
    </el-row>

    <el-row>
        <el-button round>圓角按鈕</el-button>
        <el-button type="primary" round>主要按鈕</el-button>
        <el-button type="success" round>成功按鈕</el-button>
        <el-button type="info" round>資訊按鈕</el-button>
        <el-button type="warning" round>警告按鈕</el-button>
        <el-button type="danger" round>危險按鈕</el-button>
    </el-row>

    <el-row>
        <el-button icon="el-icon-search" circle></el-button>
        <el-button type="primary" icon="el-icon-edit" circle></el-button>
        <el-button type="success" icon="el-icon-check" circle></el-button>
        <el-button type="info" icon="el-icon-message" circle></el-button>
        <el-button type="warning" icon="el-icon-star-off" circle></el-button>
        <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>

</body>
</html>

2.2 Element 佈局

Element 提供了兩種佈局方式，分別是：

Layout 佈局
Container 佈局容器

2.2.1 Layout 區域性

通過基礎的 24 分欄，迅速簡便地建立佈局。也就是預設將一行分為 24 欄，根據頁面要求給每一列設定所佔的欄數。

在左選單欄找到 Layout 佈局 ，然後找到自己喜歡的按鈕樣式，點選 顯示程式碼 ，在下面就會展示出對應的程式碼，顯示出的程式碼中有樣式，有html標籤。將樣式拷貝我們自己頁面的 head 標籤內，將html標籤拷貝到 <div id="app"></div> 標籤內。

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-row {
            margin-bottom: 20px;
        }
        .el-col {
            border-radius: 4px;
        }
        .bg-purple-dark {
            background: #99a9bf;
        }
        .bg-purple {
            background: #d3dce6;
        }
        .bg-purple-light {
            background: #e5e9f2;
        }
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
        }
        .row-bg {
            padding: 10px 0;
            background-color: #f9fafc;
        }
    </style>
</head>
<body>
<div id="app">
    <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
    <el-row>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
    </el-row>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app"
    })
</script>
</body>
</html>

現在需要新增一行，要求該行顯示8個格子，通過計算每個格子佔 3 欄，具體的html 程式碼如下

<!--
新增一行，8個格子  24/8 = 3
-->
<el-row>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

2.2.2 Container 佈局容器

用於佈局的容器元件，方便快速搭建頁面的基本結構。如下圖就是佈局容器效果。

如下圖是官網提供的 Container 佈局容器例項：

該效果程式碼中包含了樣式、頁面標籤、模型資料。將裡面的樣式 <style> 拷貝到我們自己頁面的 head 標籤中；將html標籤拷貝到 <div id="app"></div> 標籤中，再將資料模型拷貝到 vue 物件的 data() 中。

整體頁面程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1', '3']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-message"></i>導航一</template>
                    <el-menu-item-group>
                        <template slot="title">分組一</template>
                        <el-menu-item index="1-1">選項1</el-menu-item>
                        <el-menu-item index="1-2">選項2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分組2">
                        <el-menu-item index="1-3">選項3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template slot="title">選項4</template>
                        <el-menu-item index="1-4-1">選項4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>導航二</template>
                    <el-submenu index="2-1">
                        <template slot="title">選項1</template>
                        <el-menu-item index="2-1-1">選項1-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title"><i class="el-icon-setting"></i>導航三</template>
                    <el-menu-item-group>
                        <template slot="title">分組一</template>
                        <el-menu-item index="3-1">選項1</el-menu-item>
                        <el-menu-item index="3-2">選項2</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分組2">
                        <el-menu-item index="3-3">選項3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="3-4">
                        <template slot="title">選項4</template>
                        <el-menu-item index="3-4-1">選項4-1</el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>檢視</el-dropdown-item>
                        <el-dropdown-item>新增</el-dropdown-item>
                        <el-dropdown-item>刪除</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>
                <el-table :data="tableData">
                    <el-table-column prop="date" label="日期" width="140">
                    </el-table-column>
                    <el-table-column prop="name" label="姓名" width="120">
                    </el-table-column>
                    <el-table-column prop="address" label="地址">
                    </el-table-column>
                </el-table>
            </el-main>
        </el-container>
    </el-container>
</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el:"#app",
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀區金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item)
            }
        }
    })
</script>
</body>
</html>

2.3 案例

其他的元件我們通過完成一個頁面來學習。

我們要完成如下頁面效果

要完成該頁面，我們需要先對這個頁面進行分析，看頁面由哪兒幾部分組成，然後到官網進行拷貝並修改。頁面總共有如下組成部分

還有一個是當我們點選 新增 按鈕，會在頁面正中間彈出一個對話方塊，如下

2.3.1 準備基本頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
	
</div>

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script>
    new Vue({
        el: "#app"
    })
</script>
</body>
</html>

2.3.2 完成表格展示

使用 Element 整體的思路就是拷貝 + 修改。

2.3.2.1 拷貝

在左選單欄找到 Table 表格並點選，右邊主體就會定位到表格這一塊，找到我們需要的表格效果（如上圖），點選 顯示程式碼 就可以看到這個表格的程式碼了。

將html標籤拷貝到 <div id="app"></div> 中，如下：

將css樣式拷貝到我們頁面的 head 標籤中，如下

將方法和模型資料拷貝到 Vue 物件指定的位置

拷貝完成後通過瀏覽器開啟可以看到表格的效果

表格效果出來了，但是顯示的表頭和資料並不是我們想要的，所以接下來就需要對頁面程式碼進行修改了。

2.3.2.2 修改

修改表頭和資料

下面是對錶格程式碼進行分析的圖解。根據下圖說明修改自己的列數和列名

修改完頁面後，還需要對繫結的模型資料進行修改，下圖是對模型資料進行分析的圖解
給表格新增操作列

從之前的表格拷貝一列出來並對其進行修改。按鈕是從官網的 Button 按鈕 元件中拷貝並修改的
給表格新增複選框列和標號列

給表格新增複選框和標號列，效果如下

此效果也是從 Element 官網進行拷貝，先找到對應的表格效果，然後將其對應程式碼拷貝到我們的程式碼中，如下是複選框列官網效果圖和程式碼

這裡需要注意在 <el-table> 標籤上有一個事件 @selection-change="handleSelectionChange" ，這裡繫結的函式也需要從官網拷貝到我們自己的頁面程式碼中，函式程式碼如下：

從該函式中又發現還需要一個模型資料 multipleSelection ，所以還需要定義出該模型資料

標號列也用同樣的方式進行拷貝並修改。

2.3.3 完成搜尋表單展示

在 Element 官網找到橫排的表單效果，然後拷貝程式碼並進行修改

點選上面的 顯示程式碼 後，就會展示出對應的程式碼，下面是對這部分程式碼進行分析的圖解

然後根據我們要的效果修改程式碼。

2.3.4 完成批量刪除和新增按鈕展示

從 Element 官網找具有著色效果的按鈕，並將程式碼拷貝到我們自己的頁面上

2.3.5 完成對話方塊展示

在 Element 官網找對話方塊，如下：

下面對官網提供的程式碼進行分析

上圖分析出來的模型資料需要在 Vue 物件中進行定義。

2.3.6 完成分頁條展示

在 Element 官網找到 Pagination 分頁 ，在頁面主體部分找到我們需要的效果，如下

點選 顯示程式碼 ，找到 完整功能 對應的程式碼，接下來對該程式碼進行分析

上面程式碼屬性說明：

page-size ：每頁顯示的條目數
page-sizes ：每頁顯示個數選擇器的選項設定。

:page-sizes="[100,200,300,400]" 對應的頁面效果如下：
currentPage ：當前頁碼。我們點選那個頁碼，此屬性值就是幾。
total ：總記錄數。用來設定總的資料條目數，該屬性設定後， Element 會自動計算出需分多少頁並給我們展示對應的頁碼。

事件說明：

size-change ：pageSize 改變時會觸發。也就是當我們改變了每頁顯示的條目數後，該事件會觸發。
current-change ：currentPage 改變時會觸發。也就是當我們點選了其他的頁碼後，該事件會觸發。

2.3.7 完整頁面程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }
        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">
    <!--搜尋表單-->
    <el-form :inline="true" :model="brand" class="demo-form-inline">
        <el-form-item label="當前狀態">
            <el-select v-model="brand.status" placeholder="當前狀態">
                <el-option label="啟用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="企業名稱">
            <el-input v-model="brand.companyName" placeholder="企業名稱"></el-input>
        </el-form-item>

        <el-form-item label="品牌名稱">
            <el-input v-model="brand.brandName" placeholder="品牌名稱"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">查詢</el-button>
        </el-form-item>
    </el-form>

    <!--按鈕-->
    <el-row>
        <el-button type="danger" plain>批量刪除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    
    <!--新增資料對話方塊表單-->
    <el-dialog
            title="編輯品牌"
            :visible.sync="dialogVisible"
            width="30%">
        <el-form ref="form" :model="brand" label-width="80px">
            <el-form-item label="品牌名稱">
                <el-input v-model="brand.brandName"></el-input>
            </el-form-item>

            <el-form-item label="企業名稱">
                <el-input v-model="brand.companyName"></el-input>
            </el-form-item>

            <el-form-item label="排序">
                <el-input v-model="brand.ordered"></el-input>
            </el-form-item>

            <el-form-item label="備註">
                <el-input type="textarea" v-model="brand.description"></el-input>
            </el-form-item>

            <el-form-item label="狀態">
                <el-switch v-model="brand.status"
                           active-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addBrand">提交</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="brandName"
                    label="品牌名稱"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企業名稱"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="當前狀態">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">
                <el-row>
                    <el-button type="primary">修改</el-button>
                    <el-button type="danger">刪除</el-button>
                </el-row>
            </el-table-column>

        </el-table>
    </template>

    <!--分頁工具條-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400">
    </el-pagination>

</div>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el: "#app",
        methods: {
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 複選框選中後執行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查詢方法
            onSubmit() {
                console.log(this.brand);
            },
            // 新增資料
            addBrand(){
                console.log(this.brand);
            },
            //分頁
            handleSizeChange(val) {
                console.log(`每頁 ${val} 條`);
            },
            handleCurrentChange(val) {
                console.log(`當前頁: ${val}`);
            }
        },
        data() {
            return {
                // 當前頁碼
                currentPage: 4,
                // 新增資料對話方塊是否展示的標記
                dialogVisible: false,

                // 品牌模型資料
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 複選框選中資料集合
                multipleSelection: [],
                // 表格資料
                tableData: [{
                    brandName: '華為',
                    companyName: '華為科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '華為',
                    companyName: '華為科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '華為',
                    companyName: '華為科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '華為',
                    companyName: '華為科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>
</body>
</html>

VUE&Element

VUE&Element

1，VUE

1.1 概述

1.2 快速入門

1.3 Vue 指令

1.3.1 v-bind & v-model 指令

1.3.2 v-on 指令

1.3.3 條件判斷指令

1.3.4 v-for 指令

1.4 生命週期

1.5 案例

1.5.1 需求

1.5.2 查詢所有功能

1.5.3 新增功能

2，Element

2.1 快速入門

2.2 Element 佈局

2.2.1 Layout 區域性

2.2.2 Container 佈局容器

2.3 案例

2.3.1 準備基本頁面

2.3.2 完成表格展示

2.3.2.1 拷貝

2.3.2.2 修改

2.3.3 完成搜尋表單展示

2.3.4 完成批量刪除和新增按鈕展示

2.3.5 完成對話方塊展示

2.3.6 完成分頁條展示

2.3.7 完整頁面程式碼

相關推薦