2021-9-29 前端達人
目錄
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。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。
-
<div id="app">
-
{{ message }}
-
</div>
-
<div id="app" th:text="${message}">
-
-
</div>
-
<div id="app" v-html="content">
-
-
</div>
-
<div id="app" th:html="${content}">
-
-
</div>
<img :src="imgUrl" :id="newId"/><img th:attr="id=${newId},src=${imgUrl}"/>
-
<div id="app" v-if="show">
-
這是一個區塊
-
</div>
-
<div id="app" th:if="${show}">
-
這是一個區塊
-
</div>
-
<ul id="app">
-
<li v-for="(item, index) in dataList">
-
{{ index }} - {{ item.message }}
-
</li>
-
</ul>
-
<ul id="app">
-
<li th:each="item, stat: ${dataList}">
-
{{ stat.index }} - {{ item.message }}
-
</li>
-
</ul>
在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>
被導入模塊index.html：
-
<div th:fragment="head">
-
這是網頁頭
-
</div>
在其它頁面導入index.html中的head模塊：
<div th:include="index::head"></div>由此可見在Html層面上來講，vue和后臺的模板引擎，整個設計方向是一樣。都是使用特定屬性標簽，來描述如何把數據映射到視圖上。
Options API，即大家常說的選項API，即以vue為后綴的文件，通過定義methods，computed，watch，data等屬性與方法，共同處理頁面邏輯
可以看到Options代碼編寫方式，如果是組件狀態，則寫在data屬性上，如果是方法，則寫在methods屬性上...
這種形式的頁面定義類似一個配置文件，定義了頁面的數據模型和行為
代理服務器：所謂代理服務器就是位于發起請求的客戶端與原始服務器端之間的一臺跳板服務器，是以正向代理可以隱藏客戶端，反向代理可以隱藏原始服務器。
代理分為正向代理和反向代理，下面就以我們實際使用中的示例講解下這兩種代理方式的區別。
這樣對于瀏覽器而言，瀏覽器只需要訪問代理服務器，就可以達到同時訪問兩個網站的目的
我們看下實際場景下的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文件夾中讀取文件內容
-
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.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);
-
})
在上面的代碼中，我們在模板html中，添加了filter的調用，并傳入了一個參數。
在vue進行html生成的過程中，會調用相應的filter，根據自定義的規則，完成文本格式化操作。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn