Vue2 學習筆記

引入相關 .js 和 .css

搭配 asp.net mvc razor page 架構，直接引入相關 .js 和 .css，不使用webpack import 方式

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script> @*目前版本是2.x*@

<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> @*http 請求*@

<script src="~/Scripts/moment-with-locales.min.js"></script> @*date 格式化*@

html

定義app範圍

<div id="app"> 

...

</div>

顯示data

{{plaintext}} 

顯示html文字

<span v-html="htmltext"></span>

input綁定屬性值，.number 表示限制只能輸入數字

<input v-model.number="unitprice" type="number" /> 

.trim 表示自動刪除前後空白字元

<input type="text" v-model.trim="trimMsg" /> 

可綁定陣列屬性

<label><input type="checkbox" value="Jack" v-model="checkedNames">Jack</label> 

<label><input type="checkbox" value="John" v-model="checkedNames">John</label>

href 替換變數bbb

<a v-bind:href='`...?a=${bbb}`' target="_blank">{{ccc}}</a> 

select 綁定用法，v-bind:value="option" 透過 v-bind: 讓屬性 綁定變數

<select v-model="selected"> 

        <option disabled value="">请选择</option>

        <option v-for="option in options" v-bind:value="option.value" v-bind:key="option.value"> @*v-bind:key 指定識別物件的屬性*@

            {{ option.text }}

        </option>

</select>

select 複選綁定用法，搭配ctrl or shift 選擇多筆

<select multiple v-model="multiselected"> 

        <option disabled value="">请选择</option>

        <option v-for="option in options" v-bind:value="option.value">

            {{ option.text }}

        </option>

</select>

v-bind:xxx 對應 attribute:xxx 綁定屬性值，v-on:xxx 對應事件，.stop 表示事件觸發不往上層拋，.prevent 表示不觸發預設行為

<button v-bind:disabled="loading" v-bind:class="{ 'error': 按鈕禁用 }" v-bind:style="按鈕樣式" v-on:click.stop.prevent="下單($event)">下單</button> 

v-on:keyup.enter 表示按enter 後執行

<input type="text" placeholder="輸入任意文字後按下 enter 鍵" v-model.trim="trimMsg"

 v-on:keyup.enter="下單()"> 

v-on:keyup.enter.exact 表示若有搭配其他按鍵則不要觸發 (例如 shift+enter)

依據條件控制是否顯示

<span v-show="按鈕禁用">按鈕禁用</span> 

※若搭配 class:d-flex 會造成 v-show 無法正確隱藏，必須改用 v-if

強制更新頁面區塊，每當componentKey 更新時就會更新此div (重新判斷v-show)

<div v-show="new Date()>=時間 && !已預約" v-bind:key="componentKey">很抱歉，活動已開始，無法預約囉</span>

依據屬性值控制顯示忙碌中圖案，例如呼叫後端尚未完成時，內部元素會暫時無法互動，預設位置是外部容器的正中間

<b-overlay :show="loading" opacity="0.8" variant="light" spinner-variant="primary">

...

</b-overlay>

若要保持捲動瀏覽器視窗時位置不會跑掉，外面必須再包一層div

<div style="position: fixed; top: 2em; width: 100%; z-index: 10;"><b-overlay :show="loading" opacity="0.8" variant="light" spinner-variant="primary"></b-overlay></div>

或單獨使用 b-spinner 顯示忙碌中圖案，各按鈕單獨控制是否暫時disable

<div style="position: fixed;top:1em; left: 50%; transform: translateX(-50%)"  v-show="loading"><b-spinner label="Loading..."  variant="primary"></b-spinner></div>

使用 Bootstrap Icon

<b-icon-[Bootstrap Icon name]></b-icon-[Bootstrap Icon name]>

<b-icon-clipboard></b-icon-clipboard> 

針對 arrow-90deg-left 順時針旋轉90度

<b-icon-arrow-90deg-left style="transform: rotate(90deg)"></b-icon-arrow-90deg-left> 

格式化輸出

{{ xxx | dateFormat('HH:mm')}}

{{ xxx | numberFormat(0,false)  }}

javascript (放在 </html> 後面才能正確載入)

====

設定 moment 為繁體中文

moment.locale('zh-tw'); 

加入filter

// 數值格式化

Vue.filter('numberFormat', function (value, 最大小數位, 千分位符號) {// 小數位、千分位符號

        return Intl.NumberFormat('en-US', { maximumFractionDigits: 最大小數位, useGrouping: 千分位符號 }).format(value);

    });

// 日期格式化

Vue.filter('dateFormat', function (value, myFormat) {

    return moment(value).format(myFormat);

});

載入 BootstrapVue 套件，提供多種美化功能

Vue.use(BootstrapVue) 

建立 vue app

const app = new Vue({ 

        el: '#app', // 綁定 html element

        data() { // 定義屬性及預設值，需要先定義才能使用 v-model

            return {

                plaintext: '123',

                htmltext: '<i>123</i>',

                trimMsg: null,

                loading: false, // 控制顯示忙碌中圖案

            }

        },

        methods: { // 定義函數

            取得參數字串() {

                return this.參數字串;

            },

            下單() {

                this.$bvToast.toast('已下單', {variant: 'success',solid: true, noCloseButton:true}); // 顯示訊息視窗，variant 決定顏色，sold:true 表示不要透明處理，noCloseButton:true 搭配不指定 title 才不會顯示 title bar

            },

            getdata() {

                let $vue = this;

                axios.post('./get', { 參數: '@Model' }) // 呼叫後端

                    .then(response => {

                    this.resultdata = response.data;

                    }).catch(function (error) { // 请求失败处理

                        console.log(error);

                        $vue.$bvToast.toast(error.response.data, { variant: 'danger', solid: true, noCloseButton: true }); // catch 中的 this 是window，需要在之前先用變數儲存 vue 物件

                    });

            },

            並行呼叫() {

                axios.all([axios.post('./get', { 參數: '@Model' }), axios.post('./testpost')]) // 同時呼叫多個後端，全部完成後才進行下一個動作時使用此方法

                    .then(axios.spread((response1, response2) => {

                        this.resultdata1 = response1.data;

                        this.resultdata2 = response2.data;

                    }));

            },

        },

        computed: { // 計算型屬性，html使用時不需要加括號

            金額() {

                return this.unitprice * this.number;

            },            

        },

        watch: { // 監控屬性變化

            trimMsg(val, oldValue) { // 當trimMsg更新時觸發

                console.log(`新的 msg: ${val}`);

                console.log(`舊的 msg: ${oldValue}`);

            }

        },

        created: function () { // app 建立後觸發

            let $vue = this; // 預先儲存 app 以供函數使用

            axios.interceptors.request.use( // 呼叫後端前觸發

                function (config) {

                    $vue.loading = true; // 搭配b-spinner顯示忙碌中圖案，且透過 v-bind:disabled 避免重複執行click

                    return config;

                },

                function (error) {

                    $vue.loading = false; // 呼叫失敗時隱藏忙碌中圖案

                    return Promise.reject(error);

                }

            );

            axios.interceptors.response.use(function (response) { // 呼叫後端完成後觸發

                $vue.loading = false; // 呼叫完成後隱藏忙碌中圖案

                return response;

            }, function (error) {

                $vue.loading = false; // 呼叫完成但失敗時隱藏忙碌中圖案

                return Promise.reject(error);

            });

        },

        mounted: function () {

            this.$nextTick(function () {

                // 放置頁面載入後要執行的初始動作，類似 jquery $(document).ready(function() {})

                // 若要立刻呼叫 axios.post 必須先等候一下，否則 b-overlay 無法正確顯示

                // ex. setTimeout(() => this.查詢訂單(), 100);

            })

        },

    });

避免中文字出現亂碼

1. <head></head> 加入 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

2. 檔案編碼必須為"具有BOM 的 UTF-8"，若無則用記事本另存，編碼選擇 具有BOM 的 UTF-8 (visual studio create view 預設此編碼)

混入 (可放共用函數)

import { commonMixin } from '@Url.Content("~/scripts/commonVue.js")'

Vue.mixin(commonMixin); // 放在 Vue.filter 之後避免 filter 失效

commonVue.js :

export const commonMixin = {

    methods: {       

        onerror: function (error) {

            console.error(error);

            if (error.response.status == 401) {

                alert('登入逾時');

                location.reload();

            }

            else

            this.$bvToast.toast(error.response.data, { variant: 'danger', solid: true, noAutoHide: true });

    },

  }

}

※若要動態新增物件屬性，必須在綁定到 vue 之前完成，否則會喪失DOM雙向綁定機制

const rows = [{value:1},{value:2},];

rows.forEach(a => {

a.text = '...';

});                                        

this.rows = rows;

相關連結

官網 (2.x)

電子書

Bootstrap Icons

BootstrapVue 官網

Vue.js Examples