VUE&Element簡單介紹。

2023-1-10 前端達人

一、VUE

1、基本介紹

2、Vue 指令

一、VUE

1、基本介紹

? 概述

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

我們之前也學習過后端的框架 `Mybatis` ，`Mybatis` 是用來簡化 `jdbc` 代碼編寫的；而 `VUE` 是前端的框架，是用來簡化 `JavaScript` 代碼編寫的。前面的綜合性案例，里面進行了大量的DOM操作，如下

使用 `VUE` 后，這部分代碼我們就不需要再寫了。那么 `VUE` 是如何簡化 DOM 書寫呢？基于MVVM(Model-View-ViewModel)思想，實現(xiàn)數(shù)據(jù)的雙向綁定，將編程的關注點放在數(shù)據(jù)上。之前我們是將關注點放在了 DOM 操作上；而要了解 `MVVM` 思想，必須先了解 `MVC` 思想，如下圖就是 `MVC` 思想圖解

其中的C 就是咱們 js 代碼，M 就是數(shù)據(jù)，而 V 是頁面上展示的內(nèi)容，如下圖：

`MVC` 思想是沒法進行雙向綁定的。雙向綁定是指當數(shù)據(jù)模型數(shù)據(jù)發(fā)生變化時，頁面展示的會隨之發(fā)生變化，而如果表單數(shù)據(jù)發(fā)生變化，綁定的模型數(shù)據(jù)也隨之發(fā)生變化。接下來了解`MVVM` 思想，如下圖是三個組件圖解：

圖中的 `Model` 就是我們的數(shù)據(jù)，`View` 是視圖，也就是頁面標簽，用戶可以通過瀏覽器看到的內(nèi)容；`Model` 和 `View` 是通過 `ViewModel` 對象進行雙向綁定的，而 `ViewModel` 對象是 `Vue` 提供的。雙向綁定的效果：下圖是提前準備的代碼寫出來的，輸入框綁定了 `username` 模型數(shù)據(jù)，而在頁面上也使用 `{{}}` 綁定了 `username` 模型數(shù)據(jù)

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

當我們在輸入框中輸入內(nèi)容，而輸入框后面隨之實時的展示我們輸入的內(nèi)容，這就是雙向綁定的效果。

? 快速入門

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

1. 新建 HTML 頁面，引入 Vue.js文件

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

2. 在JS代碼區(qū)域，創(chuàng)建Vue核心對象，進行數(shù)據(jù)綁定


    

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                           el: "#app",
                

            

        

        

            

                

                

            

            

                
                           data() {
                

            

        

        

            

                

                

            

            

                
                               return {
                

            

        

        

            

                

                

            

            

                
                                   username: ""
                

            

        

        

            

                

                

            

            

                
                               }
                

            

        

        

            

                

                

            

            

                
                           }
                

            

        

        

            

                

                

            

            

                
                       });

創(chuàng)建 Vue 對象時，需要傳遞一個 js 對象，而該對象中需要如下屬性：

● `el` ：用來指定哪個地方的標簽受 Vue 管理。該屬性取值 `#app` 中的 `app` 需要是受管理的標簽的id屬性值
● `data` ：用來定義數(shù)據(jù)模型
● `methods` ：用來定義函數(shù)。這個我們在后面就會用到

3. 編寫視圖


    

        

            

                

                

            

            

                
                    <div id="app">
                

            

        

        

            

                

                

            

            

                
                           <input name="username" v-model="username" >
                

            

        

        

            

                

                

            

            

                
                           {{username}}
                

            

        

        

            

                

                

            

            

                
                       </div>

`{{}}` 是 Vue 中定義的 `插值表達式` ，在里面寫數(shù)據(jù)模型，到時候會將該模型的數(shù)據(jù)值展示在這個位置。

? 整體代碼如下：


    

        

            

                

                

            

            

                
                    <!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. 創(chuàng)建Vue核心對象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){  // data() 是 ECMAScript 6 版本的新的寫法
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:""
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                            /*data: function () {
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:""
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }*/
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                

                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

2、Vue 指令

指令：HTML 標簽上帶有 v- 前綴的特殊屬性，不同指令具有不同含義。例如：v-if，v-for…

? v-bind & v-model 指令

? v-bind

該指令可以給標簽原有屬性綁定模型數(shù)據(jù)。這樣模型數(shù)據(jù)發(fā)生變化，標簽屬性值也隨之發(fā)生變化，例如：

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

上面的 `v-bind:"` 可以簡化寫成 `:` ，如下：


    

        

            

                

                

            

            

                
                    <!--
                

            

        

        

            

                

                

            

            

                
                          v-bind 可以省略
                

            

        

        

            

                

                

            

            

                
                      -->
                

            

        

        

            

                

                

            

            

                
                      <a :href="url">百度一下</a>

? v-model

該指令可以給表單項標簽綁定模型數(shù)據(jù)。這樣就能實現(xiàn)雙向綁定效果。例如：

<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. 創(chuàng)建Vue核心對象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"",
                

            

        

        

            

                

                

            

            

                
                                    url:"https://www.baidu.com"
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

通過瀏覽器打開上面頁面，并且使用檢查查看超鏈接的路徑，該路徑會根據(jù)輸入框輸入的路徑變化而變化，這是因為超鏈接和輸入框綁定的是同一個模型數(shù)據(jù)

? 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. 創(chuàng)建Vue核心對象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    username:"",
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            },
                

            

        

        

            

                

                

            

            

                
                            methods:{
                

            

        

        

            

                

                

            

            

                
                                show(){
                

            

        

        

            

                

                

            

            

                
                                    alert("我被點了...");
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

? 條件判斷指令

接下來通過代碼演示一下。在 Vue中定義一個 `count` 的數(shù)據(jù)模型，如下


    

        

            

                

                

            

            

                
                    //1. 創(chuàng)建Vue核心對象
                

            

        

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                        el:"#app",
                

            

        

        

            

                

                

            

            

                
                        data(){
                

            

        

        

            

                

                

            

            

                
                            return {
                

            

        

        

            

                

                

            

            

                
                                count:3
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        }
                

            

        

        

            

                

                

            

            

                
                    });

現(xiàn)在要實現(xiàn)，當 `count` 模型的數(shù)據(jù)是3時，在頁面上展示 `div1` 內(nèi)容；當 `count` 模型的數(shù)據(jù)是4時，在頁面上展示 `div2` 內(nèi)容；`count` 模型數(shù)據(jù)是其他值時，在頁面上展示 `div3`。這里為了動態(tài)改變模型數(shù)據(jù) `count` 的值，再定義一個輸入框綁定 `count` 模型數(shù)據(jù)。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. 創(chuàng)建Vue核心對象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    count:3
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

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

然后我們在看看 `v-show` 指令的效果，如果模型數(shù)據(jù) `count ` 的值是3時，展示 `div v-show` 內(nèi)容，否則不展示，html頁面代碼如下


    

        

            

                

                

            

            

                
                    <div v-show="count == 3">div v-show</div>
                

            

        

        

            

                

                

            

            

                
                    <br>
                

            

        

        

            

                

                

            

            

                
                    <input v-model="count">

瀏覽器打開效果如下：

通過上面的演示，發(fā)現(xiàn) `v-show` 和 `v-if` 效果一樣，那它們到底有什么區(qū)別呢？我們根據(jù)瀏覽器的檢查功能查看源代碼：

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

? v-for 指令

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


    

        

            

                

                

            

            

                
                    <標簽 v-for="變量名 in 集合模型數(shù)據(jù)">
                

            

        

        

            

                

                

            

            

                
                        {{變量名}}
                

            

        

        

            

                

                

            

            

                
                    </標簽>

注意：需要循環(huán)那個標簽，`v-for` 指令就寫在那個標簽上。

如果在頁面需要使用到集合模型數(shù)據(jù)的索引，就需要使用如下格式：


    

        

            

                

                

            

            

                
                    <標簽 v-for="(變量名,索引變量) in 集合模型數(shù)據(jù)">
                

            

        

        

            

                

                

            

            

                
                        <!--索引變量是從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. 創(chuàng)建Vue核心對象
                

            

        

        

            

                

                

            

            

                
                        new Vue({
                

            

        

        

            

                

                

            

            

                
                            el:"#app",
                

            

        

        

            

                

                

            

            

                
                            data(){
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    addrs:["北京","上海","西安"]
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        });
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

通過瀏覽器打開效果如下

3、生命周期

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

下圖是 Vue 官網(wǎng)提供的從創(chuàng)建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數(shù)

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

`mounted`：掛載完成，Vue初始化成功，HTML頁面渲染成功。而以后我們會在該方法中發(fā)送異步請求，加載數(shù)據(jù)。

二、Element

1、基本介紹

? 概述

Element：是餓了么公司前端開發(fā)團隊提供的一套基于 Vue 的網(wǎng)站組件庫，用于快速構(gòu)建網(wǎng)頁。

Element 提供了很多組件（組成網(wǎng)頁的部件）供我們使用。例如超鏈接、按鈕、圖片、表格等等~

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

我們學習 Element 其實就是學習怎么從官網(wǎng)拷貝組件到我們自己的頁面并進行修改，官網(wǎng)網(wǎng)址是：元素 - 全球最受歡迎的 Vue UI 框架 (eleme.cn)

進入官網(wǎng)能看到如下頁面

接下來直接點擊 `組件` ，頁面如下

2、Element 布局

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

● Layout 布局
● Container 布局容器

? Layout 局部

通過基礎的 24 分欄，迅速簡便地創(chuàng)建布局。也就是默認將一行分為 24 欄，根據(jù)頁面要求給每一列設置所占的欄數(shù)。

在左菜單欄找到 `Layout 布局` ，然后找到自己喜歡的按鈕樣式，點擊 `顯示代碼` ，在下面就會展示出對應的代碼，顯示出的代碼中有樣式，有html標簽。將樣式拷貝我們自己頁面的 `head` 標簽內(nèi)，將html標簽拷貝到 `<div id="app"></div>` 標簽內(nèi)。

? 整體頁面代碼如下：


    

        

            

                

                

            

            

                
                    <!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>

現(xiàn)在需要添加一行，要求該行顯示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>

? Container 布局容器

用于布局的容器組件，方便快速搭建頁面的基本結(jié)構(gòu)。如下圖就是布局容器效果。

如下圖是官網(wǎng)提供的 Container 布局容器實例：

該效果代碼中包含了樣式、頁面標簽、模型數(shù)據(jù)。將里面的樣式 `<style>` 拷貝到我們自己頁面的 `head` 標簽中；將html標簽拷貝到 `<div id="app"></div>` 標簽中，再將數(shù)據(jù)模型拷貝到 `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: '上海市普陀區(qū)金沙江路 1518 弄'
                

            

        

        

            

                

                

            

            

                
                                };
                

            

        

        

            

                

                

            

            

                
                                return {
                

            

        

        

            

                

                

            

            

                
                                    tableData: Array(20).fill(item)
                

            

        

        

            

                

                

            

            

                
                                }
                

            

        

        

            

                

                

            

            

                
                            }
                

            

        

        

            

                

                

            

            

                
                        })
                

            

        

        

            

                

                

            

            

                
                    </script>
                

            

        

        

            

                

                

            

            

                
                    </body>
                

            

        

        

            

                

                

            

            

                
                    </html>

? 完成分頁條展示

在 Element 官網(wǎng)找到 `Pagination 分頁` ，在頁面主體部分找到我們需要的效果，如下

點擊 `顯示代碼` ，找到 `完整功能` 對應的代碼，接下來對該代碼進行分析

? 上面代碼屬性說明：

● `page-size` ：每頁顯示的條目數(shù)

● `page-sizes` ：每頁顯示個數(shù)選擇器的選項設置。

`:page-sizes="[100,200,300,400]"` 對應的頁面效果如下：

● `currentPage` ：當前頁碼。我們點擊那個頁碼，此屬性值就是幾。
● `total` ：總記錄數(shù)。用來設置總的數(shù)據(jù)條目數(shù)，該屬性設置后， Element 會自動計算出需分多少頁并給我們展示對應的頁碼。

? 事件說明：

● `size-change` ：pageSize 改變時會觸發(fā)。也就是當我們改變了每頁顯示的條目數(shù)后，該事件會觸發(fā)。
● `current-change` ：currentPage 改變時會觸發(fā)。也就是當我們點擊了其他的頁碼后，該事件會觸發(fā)。

來源：csdn

藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯(lián)系01063334945。

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計、 cs界面設計、 ipad界面設計、包裝設計、圖標定制、用戶體驗、交互設計、網(wǎng)站建設、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數(shù)據(jù)可視化設計公司、UI交互設計公司、高端網(wǎng)站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司

分享本文至：

« 《服務設計與創(chuàng)新實踐》深入導讀 · 理解人與人際 [ 紅隊知識庫 ] 常見防火墻(WAF)攔截頁面 »

VUE&Element簡單介紹。

一、VUE

1、基本介紹

2、Vue 指令

3、生命周期

二、Element

1、基本介紹

2、Element 布局

分類

日歷

鏈接

個人資料

存檔

VUE&Element簡單介紹。

一、VUE

1、基本介紹

2、Vue 指令

3、生命周期

二、Element

1、基本介紹

2、Element 布局

分類

日歷

鏈接

個人資料

存檔

VUE&Element簡單介紹。

一、VUE

2、Vue 指令

二、Element

1、基本介紹

2、Element 布局