Vue.js+vue-element搭建屬於本身的後臺管理模板：Vue.js快速入門（二）

時間 2019-11-14

標籤 vue.js+vue vue element 搭建屬於本身後臺管理模板 vue.js 快速入門欄目 JavaScript 简体版

原文原文鏈接

Vue.js+vue-element搭建屬於本身的後臺管理模板：Vue.js快速入門（二）

前言

上篇文章對Vue.js有了初步理解，接下來咱們把Vue.js基礎語法快速的過一遍，先混個臉熟留個印象就好。Vue.js基礎主要包括，生命週期，數據綁定，過濾器，方法，計算屬性，內置指令，組件，自定義指令，Render函數。css

Vue實例與數據綁定

經過構造函數Vue就能夠建立一個Vue的根實例，el掛載DOM對象，data綁定數據，頁面文本中經過插值顯示data數據，插值方式爲{{}}雙大括號，如<div>{{ name }}</div>。Vue實例中data數據就是Model它默認就是雙向綁定的，咱們經過維護data數據來能夠實時改變視圖展現內容。注意：若是有些數據改變不影響視圖的變量，儘可能不要在data中定義它，由於這樣會增長效率問題。html

var app = new Vue({
    el: '#app', //el指定一個頁面中已存在的DOM元素來掛載VUE實例
    data() {
          return {
             name: ''
         };
    }
})

Vue.js生命週期

每一個框架都有它的生命週期，每一個Vue實例建立時，都會經歷一系列的初始化過程，同時也會調用相應的生命週期鉤子，咱們能夠利用這些鉤子，在適合的時機執行咱們的業務邏輯。vue

created：實例建立完成後調用，但還沒有掛載，$el還不可用。
mounted：el掛載到實例上後調用，通常第一個業務邏輯在這裏開始。
beforeDestroy：實例銷燬以前調用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ date }}</h1>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    date: new Date()
                };
            },
            created: function () { //實例建立完成後調用，但還沒有掛載，$el還不可用。
                console.log(this.$el)  //undefined
            },
            mounted: function () { //el掛載到實例上後調用，通常第一個業務邏輯在這裏開始。
                var e = this;
                this.timer = setInterval(() => {
                    e.date = new Date();
                }, 1000);
            },
            beforeDestroy: function () { //實例銷燬以前調用。
                this.timer && clearInterval(this.timer);
            }
        })
    </script>
</body>
</html>

生命週期圖示：（官方提供）webpack

過濾器

Vue.js 支持在{{ }}插值的尾部添加一個管道符「|」，對數據進行過濾，常常用於格式化文本，例如對時間進行格式化處理。過濾器能夠串聯多個，並且還能夠接收參數，默認第一個參數爲數據自己。過濾器適用於簡單的文本轉換，若是要實現複雜的數據變換，應該使用計算屬性去處理，計算屬性在後面介紹它的用法。web

filters：過濾器選項中建立每一個過濾器，過濾規則是自定義的，例：filterA: function(value){}。
管道符：管道符「|」出如今文本插值後面，進行過濾前面數據，例：{{ data | filterA }}。
串聯：過濾器也能夠串聯，數據後面設定多個過濾器，例：{{ message | filterA | filterB }}。
多個參數：每一個過濾器能夠設定多個參數，例：{{ message | filterA('arg1', 'arg2') }}，arg1爲過濾器第2個參數，arg2爲過濾器第3個參數，由於默認第一個參數爲數據自己。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>{{ date | filterA }}</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          date: new Date()
        };
      },
      filters: {
        filterA: (value) => {
          let date = new Date(value),
            y = date.getFullYear(),
            m = date.getMonth() + 1,
            d = date.getDate(),
            hh = date.getHours(),
            mm = date.getMinutes(),
            ss = date.getSeconds();
          var dt = y + '-' + (m > 9 ? m : '0' + m) + '-' + (d > 9 ? d : '0' + d) + ' ' +
            (hh > 9 ? hh : '0' + hh) + ':' + (mm > 9 ? mm : '0' + mm) + ':' + (ss > 9 ? ss : '0' + ss);
          return dt;
        }
      }
    })
  </script>
</body>
</html>

方法

methods 聲明全部綁定事件監聽器實現的方法，每一個方法以函數形式聲明，實例方法內能夠直接使用this獲取或修改數據，也能夠調用其餘申明的方法，外部也能夠經過實例去調用。下面實例中用到了v-if="show"，這是內置指令後面會詳細介紹，@click="hide" 這也是內置指令v-on它是用來綁定事件監聽器，@是語法糖，這裏主要說明一下方法hide()調用的時候（）能夠省略。關於箭頭函數，做用域不一樣，根據實際需求選擇使用它。spring

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="button" value="點擊隱藏1" @click="hide">
    <input type="button" value="點擊隱藏2" @click="hide2">
    <h1 v-if="show">{{ message }}</h1>
    <h1 v-if="show">{{ getmessage() }}</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data() {
        return {
          show: true,
          message: 'HelloWord!'
        };
      },
      methods: {
        hide: function(){
          //console.log(this.show);
          this.show = false;
        },
        hide2: ()=>{  //箭頭函數做用域不同，經過this沒法改變數據。
          console.log(this.show);  // undefined
          this.show = false;
          //app.show =false; //經過實例調用來完成修改數據
        },
        getmessage: function(){
          return this.message; //帶返回值方法，能夠在插值中輸出
        }
      }
    })
  </script>
</body>
</html>

計算屬性

computde計算屬性，模板內的表達式僅用於簡單的運算，複雜的邏輯均可以經過計算屬性代替，計算屬性是基於它的依賴緩存的，一個計算屬性所依賴的數據發生變化時，它纔會從新取值。計算屬性還能夠返回多個Vue實例的數據，其中一個數據變化，計算屬性會從新被執行。npm

computde：計算屬性選項。
用法：計算屬性包含get和set函數，默認不寫只觸發getter函數來讀取。
緩存：計算屬性與方法不同地方，它是依賴數據發生變化時纔會從新計算，高效率。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="button" value="點擊" @click="onmode">
        <h1>{{ count }} </h1>
        <h1>{{ cpdate }} </h1>
        <p>Original message: "{{ message }}"</p>
        <p>Computed reversed message: "{{ reversedMessage }}"</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    count: 0,
                    date: '',
                    message: 'Hello'
                };
            },
            methods: {
                onmode: function () {
                    this.count++;
                }
            },
            computed: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                },
                cpdate: function () {
                    //var d = this.count; //當計算屬性中依賴屬性發生變化時，會被從新計算。
                    this.date = new Date();
                    return this.date;
                }
            }
        })
    </script>
</body>
</html>

內置指令

指令 (Directives) 是帶有 v- 前綴的特殊屬性，指令是Vue模板中最經常使用的一項功能，它帶有前綴v-，主要職責就是當其表達式的值改變時，將某些行爲應用到DOM上。數組

v-if：條件渲染指令，動態在DOM內添加或刪除DOM元素。
v-else：條件渲染指令，必須跟v-if成對使用。
v-else-if：判斷多層條件，必須跟v-if成對使用。
v-show：條件渲染指令，爲DOM設置css的style屬性，v-show不能在<template>上使用，頻繁切換場景中適合使用。
v-text：更新元素的textContent；例如：<span v-text="msg"></span> 等同於 < span>{{msg}} </ span>。
v-html：更新元素的innerHTML；會把標籤名也帶上。
v-for：循環指令；<li v-for="book in books">{ { book.name } }</li>
v-for：表達式遍歷數組時支持一個可選參數做爲當前項的索引；<li v-for="(book , index) in books ">{{ index}} - {{book.name })</li>
v-for：表達式遍歷對象屬性時，有兩個可選參數，分別是鍵名和索引；<li v-for="(value , key , index) in user ">{ { index } } - { { key } } : { { value } }</li>
v-cloak：不須要表達式，這個指令保持在元素上直到關聯實例結束編譯； v-cloak 是一個解決初始化慢致使頁面閃動的最佳實踐。
v-once：也是一個不須要表達式的指令，做用是定義它的元素或組件只渲染一次，包括元素或組件的全部子節點。
v-pre：不須要表達式，跳過這個元素以及子元素的編譯過程，以此來加快整個項目的編譯速度。
v-bind：響應並更新DOM特性；例如：v-bind:href v-bind:class v-bind:title 等等。語法糖："v-bind:」能夠用"："代替。
v-on：用於監聽DOM事件；例如：v-on:click v-on:keyup。語法糖：「v-on:」能夠用「@」代替。
v-model：數據雙向綁定；用於表單輸入等；例如：< input v-model= "message">。v-model也是一個特殊的語法糖，使用@input來替代v-model。

方法與事件：緩存

Vue 提供了一個特殊變量$event ，用於訪問原生DOM 事件，能夠阻止事件冒泡或者阻止連接打開。app

寫一個阻止冒泡的例子：

    <div @click="stopClick1('stop1',$event)">
      <div @click="stopClick2('stop2',$event)">
        <div @click="stopClick3('stop3',$event)">阻止冒泡</div>
      </div>
    </div>
 
methods:{
    stopClick3: function(message, event){
      console.log(message);
      event.stopPropagation();  //阻止冒泡
    },
    stopClick2: function(message, event){
      console.log(message);
    },
    stopClick1: function(message, event){
      console.log(message);
    }
}

修飾符：
在＠綁定的事件後加小圓點「．」，再跟一個後綴來使用修飾符。
上面的阻止冒泡事件，能夠直接用戶修飾符的方式寫爲：

<div @click.stop="stopClick3('stop3')">阻止冒泡</div>　　//不用經過$event事件再來寫了

經常使用的一些修飾符有：.stop、.prevent、.capture、.self、once，修飾符能夠串聯使用。

<!--阻止單擊事件冒泡-->
<a @click.stop="handle"></a>
<!--修飾符能夠串聯-->
<a @click.stop.prevent="handle"></a>
<!--添加事件偵聽器時使用事件捕獲模式-->
<div @click.capture="handle"> ... </div>
<!--只當事件在該元素自己（而不是子元素） 觸發時觸發回調-->
<div @click.self="handle"> ... </div>
<!--只觸發一次，組件一樣適用-->
<div @click.once="handle"> ... </div>

數組更新：
當咱們修改數組時， Vue 會檢測到數據變化，因此用v-for 渲染的視圖也會當即更新。

push()
pop()
shift()
unshit()
splice()
sort()
reverse()

以上方法會改變被這些方法調用的原始數組，也有些方法不會改變原數組，它們返回的是一個新數組，在使用這些非變異的方法時，能夠用新數組來替換原數組，相同的元素不會從新渲染。

例如：

filter()
concat()
slice()

app.books = app.books.filter(function(item){
  return item.name.match(/JavaScript/);
});

過濾與排序：

當你不想改變原數組，想經過一個數組的副原本作過濾或排序顯示時，可使用計算屬性來返回過濾或排序後的數組。

表單與v-model

表單控件在實際業務中較爲常見，好比單選、多選、下拉選項、輸入框等，用它們能夠完成數據的錄入、校驗、提交等，上面內置指令中提到了v-model指令，用於在表單類元素上雙向綁定數據，能夠將輸入的內容實時映射到綁定的數據上。

備註：v-model 也有修飾符，用於控制數據同步的時機，如：使用修飾符.lazy 會轉變爲在change事件中同步；使用修飾符.number 能夠將輸入轉換爲Number類型；使用修飾符.trim 能夠自動過濾輸入的首尾空格。

輸入框：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message" placeholder="輸入...">
        <p>輸入的內容是：{{ message }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: ''
            }
        })
    </script>
</body>
</html>

在輸入框輸入的同時，{{ message }} 也會實時將內容渲染在視圖中。

單選按鈕：

單選按鈕在單獨使用時，不須要 v-model，直接使用 v-bind 綁定一個布爾值類型的值，爲真時選中，爲否時不選。

<div id="app">
        <input type="radio" :checked="picked">
        <label>單選按鈕</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: true
            }
        })
    </script>

若是是組合使用來實現互斥選擇的效果，就須要 v-model 配合 value 來使用。

<div id="app">
        <input type="radio" v-model="picked" value="html" id="html"><label for="html">HTML</label>
        <input type="radio" v-model="picked" value="js" id="js"><label for="js">JavaScript</label>
        <input type="radio" v-model="picked" value="css" id="css"><label for="css">CSS</label>
        <br>
        <p>選擇的項是：{{ picked }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                picked: 'js'
            }
        })
    </script>

複選框：

複選框也是分單獨使用和組合使用，不過用法稍與單選不一樣，複選框單獨使用時也是用 v-model 來綁定一個布爾值。

   <div id="app">
        <input type="checkbox" v-model="checked" id="checked">
        <label for="checked">選擇狀態：{{ checked }}</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                checked: false
            }
        })
    </script>

組合使用時，也是 v-model 與 value 一塊兒，多個勾選框都綁定到同一個數組類型的數據，value的值在數組當中，就會選擇這一項。

    <div id="app">
        <input type="checkbox" v-model="checked" value="html" id="html"><label for="html">HTML</label>
        <br>
        <input type="checkbox" v-model="checked" value="js" id="js"><label for="js">JavaScript</label>
        <br>
        <input type="checkbox" v-model="checked" value="css" id="css"><label for="css">CSS</label>
        <br>
        <p>選擇的項是：{{ checked }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                checked: ['html','css']
            }
        })
    </script>

選擇列表：

選擇列表就是下拉選擇器，一樣也是分爲單選和多選方式。

    <div id="app">
        <select v-model="selected">
            <option>HTML</option>
            <option value="js">JavaScript</option>
            <option>CSS</option>
        </select>
        <p>選擇的項是：{{ selected }}</p>

        <select v-model="selected2" multiple>
            <option value="html">HTML</option>
            <option value="js">JavaScript</option>
            <option value="css">CSS</option>
        </select>
        <p>選擇的項是：{{ selected2 }}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                selected: 'HTML',
                selected2: ['html','js']
            }
        })
    </script>

Class 與 Style 綁定

對於數據綁定，一個常見的需求是操做元素的class樣式列表和它的內聯樣式。咱們能夠用v-bind綁定元素屬性，表達式的結果類型能夠是字符串，也能夠是對象或數組，v-bind:class 指令也能夠與普通的 class 屬性共存。

表達式爲對象時：

<div id='example' class="h12" :class="{'active':isActive,'error':isError}"></div>
var vm = new Vue({
  el: '#example',
  data: {
    isActive: true,
    isError: false
  }
})

渲染爲：

<div id='example' class="h12 active"></div>

以上例子普通class綁定h12樣式，經過v-bind:class綁定的表達式爲對象，渲染結果中h12樣式永遠存在，當數據isActive和isError變化時，爲true的對應的class樣式被添加到class列表中。

咱們也能夠直接綁定數據中的一個對象，代碼示例以下：

<div id='example' class="h12" :class="container"></div>
var vm = new Vue({
  el: '#example',
  data: {
    container：{
      'active': true,
      'error': false
    }
  }
})

固然除了綁定數據外，咱們也能夠直接綁定計算屬性使用，處理更復雜的業務邏輯，不過在項目中不多用到。

表達式爲數組時：

<div id='example' :class="[active, error]"></div>
var vm = new Vue({
  el: '#example',
  data: {
    active: 'active',
    error: 'error',
    isError: true
  }
})

渲染爲：

<div id='example' class="active error"></div>

若是想根據條件切換列表中的class，則能夠用三元表達式，代碼示例以下：

<div id='example' :class="[active, isError ? error : '']"></div>

綁定內聯樣式：

v-bind:style的表達式能夠綁定對象，也能夠是數組，CSS屬性名能夠用駝峯命名式(camelCase)或短橫分隔命名式(kebab-case)，代碼示例以下：

<div id='example' :style="{'color':color,'fontSize':fontSize+'px'}">樣式</div>
var vm = new Vue({
  el: '#example',
  data: {
    color: 'orange',
    fontSize: 13
  }
})

渲染爲：

<div style="color: orange; font-size: 13px;">樣式</div>

一般直接綁定到一個樣式對象更好，讓模板更清晰，代碼示例以下：

<div id='example' :style="ddfe">樣式</div>
var vm = new Vue({
  el: '#example',
  data: {
    ddfe: {
      color: 'orange',
      fontSize: 13
    }
  }
})

v-bind:style 的數組語法能夠將多個樣式對象應用到一個元素上，代碼示例以下：

<div id='example' :style="[ddfe, ddcolor]">樣式</div>

目錄導航

參考資料

Vue.js

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。