• <noscript id="ggggg"><dd id="ggggg"></dd></noscript>
    <small id="ggggg"></small>
<sup id="ggggg"></sup>
    <noscript id="ggggg"><dd id="ggggg"></dd></noscript>
    <tfoot id="ggggg"></tfoot>
  • 

    <nav id="ggggg"><cite id="ggggg"></cite></nav>
    <nav id="ggggg"></nav>
    
成人黃色A片免费看三更小说,精品人妻av区波多野结衣,亚洲第一极品精品无码,欧美综合区自拍亚洲综合,久久99青青精品免费观看,中文字幕在线中字日韩
,亚洲国产精品18久久久久久,黄色在线免费观看 

  
      
    

    

	
    
		
    
			
    
				
    Vue的設(shè)計(jì)理念
    
				
     2021-9-29      前端達(dá)人      
    
			
    
			
    
				
    
    目錄

    

    
    Mvvm模型

    

    
    Vue中的Mvvm實(shí)現(xiàn)原理

    

    
    

    

    
    自己實(shí)現(xiàn)雙向數(shù)據(jù)綁定的示例

    

    
    Vue與模板引Thymeleaf擎對(duì)比

    

    
    顯示變量值（Vue）

    

    
     顯示變量值（Thymeleaf）

    

    
    替換Html（Vue）

    

    
    替換Html（Thymeleaf）

    

    
    綁定屬性（Vue）

    

    
    綁定屬性（Thymeleaf）

    

    
    隱藏顯示區(qū)塊（Vue）

    

    
    隱藏顯示區(qū)塊（Thymeleaf）

    

    
    遍歷列表數(shù)據(jù)-帶索引（Vue）

    

    
     遍歷列表數(shù)據(jù)-帶索引（Thymeleaf）

    

    
    引入其他文件內(nèi)容（vue）

    

    
    引入其他文件內(nèi)容（Thymeleaf）

    

    
    Vue的頁(yè)面定義基石-Options API

    

    
    Vue中的代理運(yùn)用

    

    
    nginx反向代理

    

    
    vue代理（正向代理）

    

    
    Vue特性能力-filter

    

    

    
    Vue (讀音 /vju?/，類似于 view) 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合

    

    
    Mvvm模型

    

    
    MVVM 是Model-View-ViewModel 的縮寫，它是一種基于前端開發(fā)的架構(gòu)模式，其核心是提供對(duì)View 和 ViewModel 的雙向數(shù)據(jù)綁定，這使得ViewModel 的狀態(tài)改變可以自動(dòng)傳遞給 View，即所謂的數(shù)據(jù)雙向綁定。
    
Vue.js 是一個(gè)提供了 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫(kù)，專注于View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel負(fù)責(zé)連接 View 和 Model，保證視圖和數(shù)據(jù)的一致性，這種輕量級(jí)的架構(gòu)讓前端開發(fā)更加高效、便捷。
    


    

    
    Vue中的Mvvm實(shí)現(xiàn)原理

    

    
    Vue.js的實(shí)現(xiàn)方式，對(duì)數(shù)據(jù)（Model）進(jìn)行劫持，當(dāng)數(shù)據(jù)變動(dòng)時(shí)，數(shù)據(jù)會(huì)出發(fā)劫持時(shí)綁定的方法，對(duì)視圖進(jìn)行更新。

    

    
    

    

    
    這里有兩個(gè)方向： 

    

    
    1、數(shù)據(jù)流向視圖：數(shù)據(jù)變動(dòng)時(shí)，能自動(dòng)更新Dom節(jié)點(diǎn)的內(nèi)容。此功能是通過(guò)數(shù)據(jù)劫持實(shí)現(xiàn)的，對(duì)數(shù)據(jù)（Model）進(jìn)行劫持，當(dāng)數(shù)據(jù)變動(dòng)時(shí)，會(huì)調(diào)用劫持時(shí)綁定的方法，對(duì)視圖進(jìn)行更新。

    

    
    2、視圖流向數(shù)據(jù)：如輸入框input內(nèi)容發(fā)生變動(dòng)時(shí)，input對(duì)應(yīng)的數(shù)據(jù)也會(huì)發(fā)生變動(dòng)。此功能是通過(guò)監(jiān)聽Dom事件實(shí)現(xiàn)的。當(dāng)用戶在輸入框中輸入文字（即input的keyup事件發(fā)生時(shí)），vue會(huì)監(jiān)聽到這個(gè)事件，找到對(duì)應(yīng)的數(shù)據(jù)模型變量，修改變量值。

    

    
    vue中雙向數(shù)據(jù)綁定的示例

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <div id="app-6">
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                <input v-model="message">
            
      

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      5. 


    

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                var app6 = new Vue({
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                el: '#app-6',
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                data: {
            
      

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      
                message: 'Hello Vue!'
            
      

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      6. 

    
    6. 

        
      

            
      

            
      

        
      

        
      

            
      
                })
            
      

        
      

    
      7. 


    

    

    
    

    

    
    自己實(shí)現(xiàn)雙向數(shù)據(jù)綁定的示例

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <!DOCTYPE html>
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                <html lang="en">
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                <head>
            
      

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

            
      
                <meta charset="UTF-8">
            
      

        
      

    
      6. 

    
    6. 

        
      

            
      

            
      

        
      

        
      

            
      
                </head>
            
      

        
      

    
      7. 

    
    7. 

        
      

            
      

            
      

        
      

        
      

            
      
                <body>
            
      

        
      

    
      8. 

    
    8. 

        
      

            
      

            
      

        
      

        
      

            
      
                <div id="app">
            
      

        
      

    
      9. 

    
    9. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      10. 

    
    10. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      11. 

    
    11. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      12. 

    
    12. 

        
      

            
      

            
      

        
      

        
      

            
      
                </body>
            
      

        
      

    
      13. 

    
    13. 

        
      

            
      

            
      

        
      

        
      

            
      
                <script>
            
      

        
      

    
      14. 

    
    14. 

        
      

            
      

            
      

        
      

        
      

            
      
                var model={}
            
      

        
      

    
      15. 

    
    15. 

        
      

            
      

            
      

        
      

        
      

            
      
                Object.defineProperty(model,'txt',{
            
      

        
      

    
      16. 

    
    16. 

        
      

            
      

            
      

        
      

        
      

            
      
                _txt: "",
            
      

        
      

    
      17. 

    
    17. 

        
      

            
      

            
      

        
      

        
      

            
      
                get:function(){
            
      

        
      

    
      18. 

    
    18. 

        
      

            
      

            
      

        
      

        
      

            
      
                return _txt
            
      

        
      

    
      19. 

    
    19. 

        
      

            
      

            
      

        
      

        
      

            
      
                },
            
      

        
      

    
      20. 

    
    20. 

        
      

            
      

            
      

        
      

        
      

            
      
                set:function(newValue){
            
      

        
      

    
      21. 

    
    21. 

        
      

            
      

            
      

        
      

        
      

            
      
                _txt = newValue
            
      

        
      

    
      22. 

    
    22. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      23. 

    
    23. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      24. 

    
    24. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      25. 

    
    25. 

        
      

            
      

            
      

        
      

        
      

            
      
                })
            
      

        
      

    
      26. 

    
    26. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      27. 

    
    27. 

        
      

            
      

            
      

        
      

        
      

            
      
                model.txt = e.target.value
            
      

        
      

    
      28. 

    
    28. 

        
      

            
      

            
      

        
      

        
      

            
      
                })
            
      

        
      

    
      29. 

    
    29. 

        
      

            
      

            
      

        
      

        
      

            
      
                </script>
            
      

        
      

    
      30. 

    
    30. 

        
      

            
      

            
      

        
      

        
      

            
      
                </html>
            
      

        
      

    
      31. 


    

    

    
    這里要講到一個(gè)關(guān)鍵函數(shù)

    

    
    Object.defineProperty 

    

    
    Object.defineProperty 需要三個(gè)參數(shù)（object , propName , descriptor）

    

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

    

    
    descriptor 屬性描述

    

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

    

    
    Vue與模板引Thymeleaf擎對(duì)比

    

    
    顯示變量值（Vue）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <div id="app">
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                {{ message }}
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
     顯示變量值（Thymeleaf）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    替換Html（Vue）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    替換Html（Thymeleaf）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    綁定屬性（Vue）

    

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

    
    綁定屬性（Thymeleaf）

    

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

    
    隱藏顯示區(qū)塊（Vue）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                這是一個(gè)區(qū)塊
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    隱藏顯示區(qū)塊（Thymeleaf）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                這是一個(gè)區(qū)塊
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    遍歷列表數(shù)據(jù)-帶索引（Vue）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <ul id="app">
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      
                </li>
            
      

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

            
      
                </ul>
            
      

        
      

    
      6. 


    

    

    
     遍歷列表數(shù)據(jù)-帶索引（Thymeleaf）

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <ul id="app">
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      
                </li>
            
      

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

            
      
                </ul>
            
      

        
      

    
      6. 


    

    

    
    引入其他文件內(nèi)容（vue）

    

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

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <template>
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </template>
            
      

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      6. 

    
    6. 

        
      

            
      

            
      

        
      

        
      

            
      
                <script>
            
      

        
      

    
      7. 

    
    7. 

        
      

            
      

            
      

        
      

        
      

            
      
                export default {
            
      

        
      

    
      8. 

    
    8. 

        
      

            
      

            
      

        
      

        
      

            
      
                name: "button-counter"
            
      

        
      

    
      9. 

    
    9. 

        
      

            
      

            
      

        
      

        
      

            
      
                data(){
            
      

        
      

    
      10. 

    
    10. 

        
      

            
      

            
      

        
      

        
      

            
      
                count: 0
            
      

        
      

    
      11. 

    
    11. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      12. 

    
    12. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      13. 

    
    13. 

        
      

            
      

            
      

        
      

        
      

            
      
                </script>
            
      

        
      

    
      14. 


    

    

    
     引入組件

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <div id="components-demo">
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                <button-counter></button-counter>
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    引入其他文件內(nèi)容（Thymeleaf）

    

    
    被導(dǎo)入模塊index.html：

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                <div th:fragment="head">
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                這是網(wǎng)頁(yè)頭
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </div>
            
      

        
      

    
      4. 


    

    

    
    在其它頁(yè)面導(dǎo)入index.html中的head模塊：

    

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

    
    由此可見在Html層面上來(lái)講，vue和后臺(tái)的模板引擎，整個(gè)設(shè)計(jì)方向是一樣。都是使用特定屬性標(biāo)簽，來(lái)描述如何把數(shù)據(jù)映射到視圖上。

    

    
    Vue的頁(yè)面定義基石-Options API

    

    
    

    

    
    Options API，即大家常說(shuō)的選項(xiàng)API，即以vue為后綴的文件，通過(guò)定義methods，computed，watch，data等屬性與方法，共同處理頁(yè)面邏輯

    

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

    

    
    這種形式的頁(yè)面定義類似一個(gè)配置文件，定義了頁(yè)面的數(shù)據(jù)模型和行為

    

    
    Vue中的代理運(yùn)用

    

    
    代理服務(wù)器：所謂代理服務(wù)器就是位于發(fā)起請(qǐng)求的客戶端與原始服務(wù)器端之間的一臺(tái)跳板服務(wù)器，是以正向代理可以隱藏客戶端，反向代理可以隱藏原始服務(wù)器。

    

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

    

    
    nginx反向代理

    

    
    

    

    
    這樣對(duì)于瀏覽器而言，瀏覽器只需要訪問(wèn)代理服務(wù)器，就可以達(dá)到同時(shí)訪問(wèn)兩個(gè)網(wǎng)站的目的

    

    
     

    

    
    我們看下實(shí)際場(chǎng)景下的nginx的配置 

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                server {
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                listen  4503;
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                server_name  vue.izkml.com;
            
      

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      6. 

    
    6. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      7. 

    
    7. 

        
      

            
      

            
      

        
      

        
      

            
      
                # 接口代理
            
      

        
      

    
      8. 

    
    8. 

        
      

            
      

            
      

        
      

        
      

            
      
                location /api {
            
      

        
      

    
      9. 

    
    9. 

        
      

            
      

            
      

        
      

        
      

            
      
                #去除 /api前綴
            
      

        
      

    
      10. 

    
    10. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      11. 

    
    11. 

        
      

            
      

            
      

        
      

        
      

            
      
                # 轉(zhuǎn)發(fā)到 117.71.53.199:50020端口上
            
      

        
      

    
      12. 

    
    12. 

        
      

            
      

            
      

        
      

        
      

            
      
                proxy_pass  http://117.71.53.199:50020;
            
      

        
      

    
      13. 

    
    13. 

        
      

            
      

            
      

        
      

        
      

            
      
                proxy_buffering off;
            
      

        
      

    
      14. 

    
    14. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      15. 

    
    15. 

        
      

            
      

            
      

        
      

        
      

            
      

            
      

        
      

    
      16. 

    
    16. 

        
      

            
      

            
      

        
      

        
      

            
      
                # 頁(yè)面文件代理
            
      

        
      

    
      17. 

    
    17. 

        
      

            
      

            
      

        
      

        
      

            
      
                location / {
            
      

        
      

    
      18. 

    
    18. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      19. 

    
    19. 

        
      

            
      

            
      

        
      

        
      

            
      
                root     html/gov-task-supervison;
            
      

        
      

    
      20. 

    
    20. 

        
      

            
      

            
      

        
      

        
      

            
      
                index    index.html index.htm;
            
      

        
      

    
      21. 

    
    21. 

        
      

            
      

            
      

        
      

        
      

            
      
                if (!-e $request_filename) {
            
      

        
      

    
      22. 

    
    22. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      23. 

    
    23. 

        
      

            
      

            
      

        
      

        
      

            
      
                break;
            
      

        
      

    
      24. 

    
    24. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      25. 

    
    25. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      26. 

    
    26. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      27. 


    

    

    
    其中可以看到，主要分為接口代理和頁(yè)面代理兩部分
    
1. 如果是/api前綴的請(qǐng)求，則去除/api前綴，轉(zhuǎn)發(fā)到后臺(tái)網(wǎng)關(guān)端口上
    
2. 其他情況下，請(qǐng)求的為頁(yè)面內(nèi)容，在html/gov-task-supervison文件夾中讀取文件內(nèi)容

    

    
    vue代理（正向代理）

    

    
    

    

    
     

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

            
      
                devServer: { // 支持webPack-dev-server的所有選項(xiàng)
            
      

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

            
      
                port: 8888, // 端口號(hào)
            
      

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                host: '0.0.0.0',
            
      

        
      

    
      4. 

    
    4. 

        
      

            
      

            
      

        
      

        
      

            
      
                https: false,
            
      

        
      

    
      5. 

    
    5. 

        
      

            
      

            
      

        
      

        
      

            
      
                open: true, //配置自動(dòng)啟動(dòng)瀏覽器
            
      

        
      

    
      6. 

    
    6. 

        
      

            
      

            
      

        
      

        
      

            
      
                proxy: {
            
      

        
      

    
      7. 

    
    7. 

        
      

            
      

            
      

        
      

        
      

            
      
                '/api': {
            
      

        
      

    
      8. 

    
    8. 

        
      

            
      

            
      

        
      

        
      

            
      
                // 轉(zhuǎn)發(fā)地址
            
      

        
      

    
      9. 

    
    9. 

        
      

            
      

            
      

        
      

        
      

            
      
                target: 'http://117.71.53.199:50020', //測(cè)試環(huán)境
            
      

        
      

    
      10. 

    
    10. 

        
      

            
      

            
      

        
      

        
      

            
      
                changeOrigin: true,
            
      

        
      

    
      11. 

    
    11. 

        
      

            
      

            
      

        
      

        
      

            
      
                ws: true,
            
      

        
      

    
      12. 

    
    12. 

        
      

            
      

            
      

        
      

        
      

            
      
                // 去除/api前綴
            
      

        
      

    
      13. 

    
    13. 

        
      

            
      

            
      

        
      

        
      

            
      
                pathRewrite: {
            
      

        
      

    
      14. 

    
    14. 

        
      

            
      

            
      

        
      

        
      

            
      
                '^/api': ''
            
      

        
      

    
      15. 

    
    15. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      16. 

    
    16. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      17. 

    
    17. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      18. 

    
    18. 

        
      

            
      

            
      

        
      

        
      

            
      
                }
            
      

        
      

    
      19. 


    

    

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

    

    
    1. 如果是/api前綴的請(qǐng)求，則去除/api前綴，轉(zhuǎn)發(fā)到后臺(tái)網(wǎng)關(guān)端口上
    
2. 其他情況下，請(qǐng)求的為頁(yè)面內(nèi)容，直接讀取本地項(xiàng)目路徑下面的頁(yè)面內(nèi)容 **（隱式包含）**

    

    
    Vue特性能力-filter

    

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

    

    
    應(yīng)用場(chǎng)景： 前端常量翻譯

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                </el-tag>
            
      

        
      

    
      4. 


    

    

    

      

    
    1. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      2. 

    
    2. 

        
      

            
      

            
      

        
      

        
      

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

        
      

    
      3. 

    
    3. 

        
      

            
      

            
      

        
      

        
      

            
      
                })
            
      

        
      

    
      4. 


    

    

    
    在上面的代碼中，我們?cè)谀０録tml中，添加了filter的調(diào)用，并傳入了一個(gè)參數(shù)。
    
在vue進(jìn)行html生成的過(guò)程中，會(huì)調(diào)用相應(yīng)的filter，根據(jù)自定義的規(guī)則，完成文本格式化操作。

    

    
    

    

    
    
    

    

    
    
    
        藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。
    
    
    
    
        
    
    
    
    
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    
    
    
    
        轉(zhuǎn)自：csdn
    
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
    
    
    
    
    
    
        藍(lán)藍(lán)設(shè)計(jì)( www.lzhte.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
    
    

    				
    
								
			
    
		
    
		
		
	
    


    
    
  
    
    
    日歷
    
    
    
        
    
        
    
    
  
    
    
    
    
      
    鏈接
    
      
      
                
    
    
    
    
    
      
    個(gè)人資料
    
      
    
    
    
    
      
    存檔
    
      
    
    

    

    


  
 





主站蜘蛛池模板：
亚洲中文字幕无码专区|
中文字幕无码不卡免费视频|
伊人久久大香线蕉综合影院75|
国内精品伊人久久久久影院麻豆|
国产AV无码国产AV毛片|
亚洲VA无码专区国产乱码|
成人一区二区不卡国产|
亚洲AV性色精品国产小电影|
好男人www社区视频在线资源|
97porm国内自拍视频|
五月综合激情久久婷婷|
国产精品网红尤物福利在线观看|
欧美成人免费视频|
亚洲国产AⅤ精品一区二区不卡|
亚洲无码熟妇人妻AV在线|
亚洲AV成人无码网站在线|
丁香婷婷七月九月缴情|
日韩欧美中文字幕热|
青青草国内视频在线观看|
国产精品视频亚洲二区|
午夜福利久久|
成人国产一区二区三区精品|
国产精品国产三级区|
国产精品自拍99视频|
亚洲第一综合天堂另类专|
欧美日韩一区二区三区韩大    |
亚洲精品一区二区区别|
人妻夜夜爽天天爽三区丁香花|
久热精品免费在线视频|
欧美三级在线手机版费观看|
国产乱码精品一区二区三区中文|
婺源县|
99国产精品白浆无码流出|
在线观看亚洲视频一区二区三区|
中文字幕丝袜第1页|
国产亚洲精品aa在线观看|
5566中文字幕一区二区三区|
久久久久久久无码高潮|
98在线视频噜噜噜国产|
2021最新国产精品网站
|
AV永久天堂一区二区三区香港|