92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

VUE&Element簡單介紹。

2023-1-10 前端達人

目錄

1、基本介紹

3、生命周期

1、基本介紹

2、Element 布局

一、VUE

1、基本介紹

? 概述

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` 模型數據

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

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

? 快速入門

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

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

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

2. 在JS代碼區域，創建Vue核心對象，進行數據綁定


    

        

            

                

                

            

            

                
                    new Vue({
                

            

        

        

            

                

                

            

            

                
                           el: "#app",
                

            

        

        

            

                

                

            

            

                
                           data() {
                

            

        

        

            

                

                

            

            

                
                               return {
                

            

        

        

            

                

                

            

            

                
                                   username: ""
                

            

        

        

            

                

                

            

            

                
                               }
                

            

        

        

            

                

                

            

            

                
                           }
                

            

        

        

            

                

                

            

            

                
                       });

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

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

3. 編寫視圖


    

        

            

                

                

            

            

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

2、Vue 指令

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

? v-bind & v-model 指令

? v-bind

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

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

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


    

        

            

                

                

            

            

                
                    <!--
                

            

        

        

            

                

                

            

            

                
                          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>

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

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

? 條件判斷指令

接下來通過代碼演示一下。在 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` 指令是條件不滿足時根本就不會渲染。

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

通過瀏覽器打開效果如下

3、生命周期

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

下圖是 Vue 官網提供的從創建 Vue 到效果 Vue 對象的整個過程及各個階段對應的鉤子函數

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

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

二、Element

1、基本介紹

? 概述

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

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

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

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

進入官網能看到如下頁面

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

2、Element 布局

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

● Layout 布局
● Container 布局容器

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

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

? 完成分頁條展示

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

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

? 上面代碼屬性說明：

● `page-size` ：每頁顯示的條目數

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

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

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

? 事件說明：

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

來源：csdn

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

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者. 免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

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

分類

日歷

鏈接

個人資料

藍藍設計的小編 http://m.skdbbs.com

存檔

92国产精品视频_亚洲a级在线观看_国产精品电影观看_国产精品免费观看在线_精品伊人久久97_亚洲人成在线观_尤物九九久久国产精品的特点_成人激情在线播放_成人黄色大片在线免费观看_亚洲成人精品久久久_久久免费视频在线观看_久久精品国产一区_国产一区二区三区18_亚洲欧美中文字幕在线一区_日韩美女中文字幕_日韩视频免费在线

欧美不卡视频一区发布| 亚洲精品久久视频| 国产在线观看免费麻豆| 97超级碰碰| 韩日欧美一区二区| 亚洲成人av在线播放| 日韩欧美亚洲一二三区| 亚洲欧洲精品一区二区三区不卡| 99伊人成综合| 中文字幕亚洲图片| 在线色欧美三级视频| 亚洲欧美日韩天堂| 欧美日韩精品免费观看视完整| 亚洲日韩国产第一区| 91精品国产综合久久久久久久久| 91视频免费在线观看| 69堂免费精品视频在线播放| 日韩毛片免费看| 日本另类视频| 99热国内精品永久免费观看| 国产三区二区一区久久| 国产一区二区三区无遮挡| 久久99九九99精品| 色图在线观看| 米奇777超碰欧美日韩亚洲| 日韩激情视频网站| 国产精品直播网红| 91精品国产麻豆国产在线观看| 爱福利在线视频| 九九热r在线视频精品| 亚洲图片欧美日产| 欧美日韩美少妇| 黄色一级片在线观看| 久久久久久亚洲综合| 亚洲毛片在线观看| 欧美精品少妇一区二区三区| 波多野结衣一区二区三区| 精品国产一区二区三区av性色| 国产另类在线| 日本在线不卡一区| 欧美日韩视频在线| 久久久999精品免费| 国产亚洲一区二区三区啪| 国产成人免费观看| 欧美日韩国产综合视频在线观看| 一区二区高清不卡| 天天综合视频在线观看| 婷婷久久综合| 91porn在线观看| 亚洲日本电影在线| 亚洲综合在线视频| 午夜精品在线视频| 国产精品日韩精品欧美精品| 国产精品一区二区在线观看不卡| 999热视频| 国产精品一二三区在线| 成人av免费看| 国产大陆a不卡| 欧美视频一区二区在线观看| 6699嫩草久久久精品影院| 欧美日韩国产乱码电影| 天天做天天摸天天爽国产一区| 爱爱爱免费视频在线观看| 自拍偷拍国产亚洲| 在线国产91| 九九色在线视频| 国产精品入口夜色视频大尺度| 国产综合色产| 午夜国产精品视频免费体验区| 美女脱光内衣内裤视频久久网站| 一区二区激情视频| 亚洲伦理一区| 日韩欧洲国产| 欧美老女人xx| 国产剧情av在线播放| 亚洲久久一区| 疯狂做受xxxx高潮欧美日本| 五月天激情综合| 亚洲黄色片在线观看| 国产精品对白交换视频| 国产精品精品久久久| 99亚洲伊人久久精品影院| 2019国产精品视频| 精品写真视频在线观看| jizz欧美| 精品一区二区精品| 成人自拍视频在线| 香蕉免费一区二区三区在线观看| 亚洲欧美在线x视频| 久久精品亚洲94久久精品| 亚洲欧洲精品在线| 欧美丰满少妇xxxx| 亚洲国产高清一区| 成人在线视频网站| 国产美女搞久久| 欧美精品国产白浆久久久久| 亚洲欧美国产三级| 一级毛片久久久| 美女精品一区| 日韩精品一区二区三区三区免费| 91精品一区二区三区综合在线爱| 羞羞视频在线免费国产| 日韩精品小视频| 国产精品久久久久久久久动漫| 国产综合久久久久久| av动漫一区二区| 伊人久久大香线蕉综合四虎小说| 日韩一级欧洲| 欧美亚洲国产一区二区三区va| 91久久香蕉国产日韩欧美9色| 99视频网站| 精品国产一区二区三区久久久久久| 国内自拍欧美| 欧美精品电影| 日韩视频三区| 欧美一区日本一区韩国一区| 99re8精品视频在线观看| 国产精品美女久久久久久久久久久| 亚洲私人黄色宅男| 国产精品99久久久久久久久久久久| 精品视频一二| 在线电影av不卡网址| 日韩欧美在线字幕| 亚洲第一级黄色片| 日韩视频在线免费| 96pao国产成视频永久免费| 国产日本精品| 精品一区二区精品| 久久久成人av毛片免费观看| 大波视频国产精品久久| 在线日韩欧美| 成人av一区| 成人福利片在线| 天天综合网网欲色| 红杏视频成人| 97在线视频免费观看完整版| 成人一级视频| 亚洲欧美综合另类中字| 一本大道久久a久久精二百| 97久久精品人人做人人爽50路| 久久国产精品亚洲| 色婷婷久久综合| www国产成人| 欧美体内谢she精2性欧美| 日韩美女视频一区二区在线观看| 欧美主播一区二区三区美女| 亚洲男人的天堂av| 91精品久久久久久久久久久久久久| 欧美不卡一区二区三区四区| 少妇精品久久久久久久久久| 亚洲在线观看免费视频| 日韩av在线播放资源| 五月天久久久| 欧美日韩1区2区| 久久99精品久久久久久青青日本| 久久精品女人天堂av免费观看| 要久久爱电视剧全集完整观看| 久久久福利视频| 韩国精品久久久999| 成人在线免费观看视频| 毛片电影在线| 精品国产一区二区三区在线观看| 亚洲综合激情网| 免费观看成人在线|