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。

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

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

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

分類

日歷

鏈接

個人資料

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

存檔

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

国产精品精品一区二区三区午夜版| 亚洲jizzjizz日本少妇| 亚洲性xxxx| 久久精品视频播放| 在线视频精品一| 亚洲aa中文字幕| 国产亚洲精品美女久久久| 国产精品va在线播放| 久久久久久亚洲精品中文字幕| 91精品国产高清久久久久久91| 久久久久久亚洲精品中文字幕| 精品国偷自产在线视频| 7777kkkk成人观看| 亚洲18私人小影院| 久久久久99精品久久久久| 欧美日韩国产一中文字不卡| 国产精品第2页| 秋霞午夜一区二区| 在线亚洲午夜片av大片| 777国产偷窥盗摄精品视频| 日韩欧美中文字幕在线播放| 欧美激情伊人电影| 26uuu日韩精品一区二区| 在线播放精品一区二区三区| 成人黄色大片在线免费观看| 97精品在线观看| 亚洲精品久久久一区二区三区| 中文字幕精品视频| 亚洲国产高清高潮精品美女| 51视频国产精品一区二区| 久久久精品久久| 亚洲成人av片在线观看| 日韩av免费在线看| 97在线免费观看视频| 日韩av在线免费播放| 亚洲老板91色精品久久| 久久综合网hezyo| 欧美日韩精品在线观看| 成人h视频在线| 欧美综合国产精品久久丁香| 国产精品美女免费看| 久久久久久久色| 韩国v欧美v日本v亚洲| 精品二区三区线观看| 国产成人精品电影久久久| 日韩有码在线播放| 国产成人啪精品视频免费网| 91精品国产自产在线观看永久| 色系列之999| 91av国产在线| 国产日韩精品一区二区| 欧美激情国产精品| 欧美一区二区三区艳史| 欧美一级免费视频| 亚洲男人av在线| 午夜欧美不卡精品aaaaa| 久久久久久这里只有精品| 欧美一区在线直播| 欧美天堂在线观看| 日韩av免费在线观看| 国产精品视频久| 日韩精品视频中文在线观看| 亚洲欧美日韩图片| 久久久久久亚洲| 日韩国产精品亚洲а∨天堂免| 91精品视频在线播放| 久热精品视频在线免费观看| 国产成人鲁鲁免费视频a| 91精品视频观看| 成人做爰www免费看视频网站| 欧美国产日韩在线| 啊v视频在线一区二区三区| 国产91露脸中文字幕在线| 色樱桃影院亚洲精品影院| 亚洲免费一在线| 日韩在线观看精品| 九九九久久国产免费| 日韩av在线影院| 精品日韩视频在线观看| 成人黄色av免费在线观看| 欧美第一黄网免费网站| 国产主播欧美精品| 国产成人精品午夜| 欧美黄色小视频| 视频直播国产精品| 97婷婷涩涩精品一区| www.日韩免费| 69久久夜色精品国产69乱青草| 久久久久久国产精品美女| 亚洲xxxx妇黄裸体| 成人激情视频在线播放| 亚洲黄色片网站| 69视频在线播放| 欧美一区视频在线| 2019日本中文字幕| 亚洲电影天堂av| 国产精品麻豆va在线播放| 亚洲最新av网址| 亚洲一区二区三区乱码aⅴ| 欧美一级视频一区二区| 黑人巨大精品欧美一区免费视频| 国产精品久久久久秋霞鲁丝| 亚洲视频在线观看| 日韩成人高清在线| 亚洲黄色成人网| 国产精品老女人精品视频| 久久九九热免费视频| 欧美日韩国产一区中文午夜| 这里只有精品视频| 欧美日韩亚洲91| 亚洲午夜女主播在线直播| 欧美激情影音先锋| 久久久亚洲精品视频| 亚洲精品色婷婷福利天堂| 91九色国产社区在线观看| 久久人人爽人人爽人人片亚洲| 亚洲www在线| 亚洲欧美激情在线视频| 久久6精品影院| 热门国产精品亚洲第一区在线| 2019中文字幕在线免费观看| 国产精品福利在线观看网址| 国产99视频在线观看| 日韩经典一区二区三区| 亚洲人午夜色婷婷| 日韩有码在线电影| 色视频www在线播放国产成人| 97精品欧美一区二区三区| 国模吧一区二区三区| 国产v综合ⅴ日韩v欧美大片| 国产aⅴ夜夜欢一区二区三区| 亚洲国产精品字幕| 久久久国产精品亚洲一区| 日韩欧美a级成人黄色| 亚洲免费电影在线观看| 91国语精品自产拍在线观看性色| 91精品啪在线观看麻豆免费| 国产精品久久久久99| 97国产在线视频| 在线电影中文日韩| 神马国产精品影院av| 欧美精品做受xxx性少妇| 久久久久久香蕉网| 九九精品在线视频| 2019中文字幕全在线观看| 国产精品久久久久999| 久久精品国产2020观看福利| 欧美丰满老妇厨房牲生活| 91精品国产成人| 国产日韩欧美另类| 国产日韩欧美中文| 精品一区精品二区| 国模叶桐国产精品一区| 91热福利电影| 另类专区欧美制服同性| 亚洲字幕一区二区| 欧美精品www| 丁香五六月婷婷久久激情| 精品国产乱码久久久久久婷婷| 国产热re99久久6国产精品| 欧美国产日本高清在线| 91产国在线观看动作片喷水| 国产精品久久久久久久久久新婚| 国产精品video|