目錄
Mvvm模型
Vue中的Mvvm實作原理
?
自己實作雙向資料系結的示例
Vue與模板引Thymeleaf擎對比
顯示變數值（Vue）
顯示變數值（Thymeleaf）
替換Html（Vue）
替換Html（Thymeleaf）
系結屬性（Vue）
系結屬性（Thymeleaf）
隱藏顯示區塊（Vue）
隱藏顯示區塊（Thymeleaf）
遍歷串列資料-帶索引（Vue）
遍歷串列資料-帶索引（Thymeleaf）
引入其他檔案內容（vue）
引入其他檔案內容（Thymeleaf）
Vue的頁面定義基石-Options API
Vue中的代理運用
nginx反向代理
vue代理（正向代理）
Vue特性能力-filter
Vue (讀音 /vju?/，類似于 view) 是一套用于構建用戶界面的漸進式框架，與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用，Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有專案整合
Mvvm模型
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);
})在上面的代碼中，我們在模板html中，添加了filter的呼叫，并傳入了一個引數，
在vue進行html生成的程序中，會呼叫相應的filter，根據自定義的規則，完成文本格式化操作，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/303893.html
標籤：其他
上一篇：關于jq及jquery的使用