Vue的設計理念

MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發的架構模式，其核心是提供對View 和 ViewModel 的雙向數據綁定，這使得ViewModel 的狀態改變可以自動傳遞給 View，即所謂的數據雙向綁定。
Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專注于View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負責連接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。

Vue中的Mvvm實現原理

Vue.js的實現方式，對數據（Model）進行劫持，當數據變動時，數據會出發劫持時綁定的方法，對視圖進行更新。

這里有兩個方向：

1、數據流向視圖：數據變動時，能自動更新Dom節點的內容。此功能是通過數據劫持實現的，對數據（Model）進行劫持，當數據變動時，會調用劫持時綁定的方法，對視圖進行更新。

2、視圖流向數據：如輸入框input內容發生變動時，input對應的數據也會發生變動。此功能是通過監聽Dom事件實現的。當用戶在輸入框中輸入文字（即input的keyup事件發生時），vue會監聽到這個事件，找到對應的數據模型變量，修改變量值。

vue中雙向數據綁定的示例




    

        

            

            

        

        

            
                <div id="app-6">
            

        

    

    

        

            

            

        

        

            
                <p>{{ message }}</p>
            

        

    

    

        

            

            

        

        

            
                <input v-model="message">
            

        

    

    

        

            

            

        

        

            
                </div>




    

        

            

            

        

        

            
                var app6 = new Vue({
            

        

    

    

        

            

            

        

        

            
                el: '#app-6',
            

        

    

    

        

            

            

        

        

            
                data: {
            

        

    

    

        

            

            

        

        

            
                message: 'Hello Vue!'
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })

自己實現雙向數據綁定的示例




    

        

            

            

        

        

            
                <!DOCTYPE html>
            

        

    

    

        

            

            

        

        

            
                <html lang="en">
            

        

    

    

        

            

            

        

        

            
                <head>
            

        

    

    

        

            

            

        

        

            
                <title>雙向綁定demoo</title>
            

        

    

    

        

            

            

        

        

            
                <meta charset="UTF-8">
            

        

    

    

        

            

            

        

        

            
                </head>
            

        

    

    

        

            

            

        

        

            
                <body>
            

        

    

    

        

            

            

        

        

            
                <div id="app">
            

        

    

    

        

            

            

        

        

            
                <input type="text" id="txt">
            

        

    

    

        

            

            

        

        

            
                <p id="show-txt"></p>
            

        

    

    

        

            

            

        

        

            
                </div>
            

        

    

    

        

            

            

        

        

            
                </body>
            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                var model={}
            

        

    

    

        

            

            

        

        

            
                Object.defineProperty(model,'txt',{
            

        

    

    

        

            

            

        

        

            
                _txt: "",
            

        

    

    

        

            

            

        

        

            
                get:function(){
            

        

    

    

        

            

            

        

        

            
                return _txt
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                set:function(newValue){
            

        

    

    

        

            

            

        

        

            
                _txt = newValue
            

        

    

    

        

            

            

        

        

            
                document.getElementById('txt').value = newValue
            

        

    

    

        

            

            

        

        

            
                document.getElementById('show-txt').innerHTML = newValue
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                document.addEventListener('keyup',function(e){
            

        

    

    

        

            

            

        

        

            
                model.txt = e.target.value
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                </script>
            

        

    

    

        

            

            

        

        

            
                </html>

這里要講到一個關鍵函數

Object.defineProperty

Object.defineProperty 需要三個參數（object , propName , descriptor）

1 object 對象 => 給誰加
2 propName 屬性名 => 要加的屬性的名字【類型：String】
3 descriptor 屬性描述 => 加的這個屬性有什么樣的特性【類型：Object】

descriptor 屬性描述

get：一個給屬性提供getter的方法，如果沒有getter則為undefined。該方法返回值被用作屬性值。默認為undefined。
set：一個給屬性提供setter的方法，如果沒有setter則為undefined。該方法將接受唯一參數，并將該參數的新值分配給該屬性。默認值為undefined。

Vue與模板引Thymeleaf擎對比

顯示變量值（Vue）




    

        

            

            

        

        

            
                <div id="app">
            

        

    

    

        

            

            

        

        

            
                {{ message }}
            

        

    

    

        

            

            

        

        

            
                </div>

顯示變量值（Thymeleaf）




    

        

            

            

        

        

            
                <div id="app" th:text="${message}">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

替換Html（Vue）




    

        

            

            

        

        

            
                <div id="app" v-html="content">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

替換Html（Thymeleaf）




    

        

            

            

        

        

            
                <div id="app" th:html="${content}">
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div>

綁定屬性（Vue）

<img :src="imgUrl" :id="newId"/>

綁定屬性（Thymeleaf）

<img th:attr="id=${newId},src=${imgUrl}"/>

隱藏顯示區塊（Vue）




    

        

            

            

        

        

            
                <div id="app" v-if="show">
            

        

    

    

        

            

            

        

        

            
                這是一個區塊
            

        

    

    

        

            

            

        

        

            
                </div>

隱藏顯示區塊（Thymeleaf）




    

        

            

            

        

        

            
                <div id="app" th:if="${show}">
            

        

    

    

        

            

            

        

        

            
                這是一個區塊
            

        

    

    

        

            

            

        

        

            
                </div>

遍歷列表數據-帶索引（Vue）




    

        

            

            

        

        

            
                <ul id="app">
            

        

    

    

        

            

            

        

        

            
                <li v-for="(item, index) in dataList">
            

        

    

    

        

            

            

        

        

            
                {{ index }} - {{ item.message }}
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                </ul>

遍歷列表數據-帶索引（Thymeleaf）




    

        

            

            

        

        

            
                <ul id="app">
            

        

    

    

        

            

            

        

        

            
                <li th:each="item, stat: ${dataList}">
            

        

    

    

        

            

            

        

        

            
                {{ stat.index }} - {{ item.message }}
            

        

    

    

        

            

            

        

        

            
                </li>
            

        

    

    

        

            

            

        

        

            
                </ul>

引入其他文件內容（vue）

在vue中，可復用的單元塊被稱為組件，定義組件




    

        

            

            

        

        

            
                <template>
            

        

    

    

        

            

            

        

        

            
                <button v-on:click="count++">You clicked me {{ count }} times.</button>
            

        

    

    

        

            

            

        

        

            
                </template>
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script>
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                name: "button-counter"
            

        

    

    

        

            

            

        

        

            
                data(){
            

        

    

    

        

            

            

        

        

            
                count: 0
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script>

引入組件




    

        

            

            

        

        

            
                <div id="components-demo">
            

        

    

    

        

            

            

        

        

            
                <button-counter></button-counter>
            

        

    

    

        

            

            

        

        

            
                </div>

引入其他文件內容（Thymeleaf）

被導入模塊index.html：




    

        

            

            

        

        

            
                <div th:fragment="head">
            

        

    

    

        

            

            

        

        

            
                這是網頁頭
            

        

    

    

        

            

            

        

        

            
                </div>

在其它頁面導入index.html中的head模塊：

<div th:include="index::head"></div>

由此可見在Html層面上來講，vue和后臺的模板引擎，整個設計方向是一樣。都是使用特定屬性標簽，來描述如何把數據映射到視圖上。

Vue的頁面定義基石-Options API

Options API，即大家常說的選項API，即以vue為后綴的文件，通過定義methods，computed，watch，data等屬性與方法，共同處理頁面邏輯

可以看到Options代碼編寫方式，如果是組件狀態，則寫在data屬性上，如果是方法，則寫在methods屬性上...

這種形式的頁面定義類似一個配置文件，定義了頁面的數據模型和行為

Vue中的代理運用

代理服務器：所謂代理服務器就是位于發起請求的客戶端與原始服務器端之間的一臺跳板服務器，是以正向代理可以隱藏客戶端，反向代理可以隱藏原始服務器。

代理分為正向代理和反向代理，下面就以我們實際使用中的示例講解下這兩種代理方式的區別。

nginx反向代理

這樣對于瀏覽器而言，瀏覽器只需要訪問代理服務器，就可以達到同時訪問兩個網站的目的

我們看下實際場景下的nginx的配置




    

        

            

            

        

        

            
                server {
            

        

    

    

        

            

            

        

        

            
                listen  4503;
            

        

    

    

        

            

            

        

        

            
                server_name  vue.izkml.com;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                access_log "pipe:rollback logs/gov-manage-new-vue/access_log interval=1d baknum=7 maxsize=2G" main;
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                # 接口代理
            

        

    

    

        

            

            

        

        

            
                location /api {
            

        

    

    

        

            

            

        

        

            
                #去除 /api前綴
            

        

    

    

        

            

            

        

        

            
                rewrite  ^.+api/?(.*)$ /$1 break;
            

        

    

    

        

            

            

        

        

            
                # 轉發到 117.71.53.199:50020端口上
            

        

    

    

        

            

            

        

        

            
                proxy_pass  http://117.71.53.199:50020;
            

        

    

    

        

            

            

        

        

            
                proxy_buffering off;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                # 頁面文件代理
            

        

    

    

        

            

            

        

        

            
                location / {
            

        

    

    

        

            

            

        

        

            
                # 直接去本地文件讀取文件路徑
            

        

    

    

        

            

            

        

        

            
                root     html/gov-task-supervison;
            

        

    

    

        

            

            

        

        

            
                index    index.html index.htm;
            

        

    

    

        

            

            

        

        

            
                if (!-e $request_filename) {
            

        

    

    

        

            

            

        

        

            
                rewrite ^/(.*) /index.html last;
            

        

    

    

        

            

            

        

        

            
                break;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

其中可以看到，主要分為接口代理和頁面代理兩部分
1. 如果是/api前綴的請求，則去除/api前綴，轉發到后臺網關端口上
2. 其他情況下，請求的為頁面內容，在html/gov-task-supervison文件夾中讀取文件內容

vue代理（正向代理）




    

        

            

            

        

        

            
                devServer: { // 支持webPack-dev-server的所有選項
            

        

    

    

        

            

            

        

        

            
                port: 8888, // 端口號
            

        

    

    

        

            

            

        

        

            
                host: '0.0.0.0',
            

        

    

    

        

            

            

        

        

            
                https: false,
            

        

    

    

        

            

            

        

        

            
                open: true, //配置自動啟動瀏覽器
            

        

    

    

        

            

            

        

        

            
                proxy: {
            

        

    

    

        

            

            

        

        

            
                '/api': {
            

        

    

    

        

            

            

        

        

            
                // 轉發地址
            

        

    

    

        

            

            

        

        

            
                target: 'http://117.71.53.199:50020', //測試環境
            

        

    

    

        

            

            

        

        

            
                changeOrigin: true,
            

        

    

    

        

            

            

        

        

            
                ws: true,
            

        

    

    

        

            

            

        

        

            
                // 去除/api前綴
            

        

    

    

        

            

            

        

        

            
                pathRewrite: {
            

        

    

    

        

            

            

        

        

            
                '^/api': ''
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }

這里主要看的是proxy字段，其中定義了規則

1. 如果是/api前綴的請求，則去除/api前綴，轉發到后臺網關端口上
2. 其他情況下，請求的為頁面內容，直接讀取本地項目路徑下面的頁面內容 **（隱式包含）**

Vue特性能力-filter

Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化

應用場景：前端常量翻譯




    

        

            

            

        

        

            
                <el-tag v-if="scope.row.status" class="round" size="small" >
            

        

    

    

        

            

            

        

        

            
                {{scope.row.status | CodeMaster('TASK_STATUS')}}
            

        

    

    

        

            

            

        

        

            
                </el-tag>




    

        

            

            

        

        

            
                Vue.filter('CodeMaster', function (value, type) {
            

        

    

    

        

            

            

        

        

            
                return Vue.prototype.$codeMaster.getCodeValue(type, value);
            

        

    

    

        

            

            

        

        

            
                })