整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
說明: 文本數(shù)據(jù)渲染 用法: v-text="Vue實例中的數(shù)據(jù)"=> 簡寫 {{Vue實例中的數(shù)據(jù)}}
相當于JavaScript中的innerText
說明: HTML渲染數(shù)據(jù) 用法:v-html="Vue實例中的數(shù)據(jù)" 會解析html結(jié)構(gòu) 渲染至頁面
相當于JavaScript中的innerHTML
注意: 在網(wǎng)站上動態(tài)渲染任意的 HTML 是非常危險的!!! 因為容易導(dǎo)致 XSS 攻擊 只在可信內(nèi)容上使用 v-html 絕對不要用在用戶通過(提交)的內(nèi)容上使用
說明: 事件綁定(綁定事件監(jiān)聽器) 用法: v-on:事件名="事件處理函數(shù)"=> 簡寫 @事件名="事件處理函數(shù)"
$event.target 獲取當前事件觸發(fā)的DOM元素 $event.path[0](el.path[0]) 也可以獲取當前事件觸發(fā)的DOM元素 path數(shù)組中有從觸發(fā)事件源的元素的所有上一級元素 直到window 實參不傳遞(沒有任何參數(shù)) 默認在形參中第一個就是事件參數(shù)
實參傳遞 就必須傳遞$event 來獲取獲取事件參數(shù)
面試問及
之前在使用餓了么UI的時候給一個組件添加一個原生的事件 但是一直觸發(fā)不了 后面查閱文檔發(fā)現(xiàn)這個組件內(nèi)部并沒有注冊我使用的原生事件 事件修飾符.native就可以直接監(jiān)聽并觸發(fā)組件的原生事件
說明: 屬性綁定(行內(nèi)屬性) 用法: v-bind:屬性名="Vue實例中的數(shù)據(jù)"=> 簡寫 :屬性名="Vue實例中的數(shù)據(jù)" 當Vue實例中的數(shù)據(jù)改變之后 頁面會同步更新
isRed=true 就有red這個類 isRed=false 就沒有red這個類 isRed 在 Vue 實例data中聲明
class="red" :class="{'yellow' : isYellow}"
說明: 雙向數(shù)據(jù)綁定 用法: v-model="Vue實例中的數(shù)據(jù)"
注意: v-model 只能設(shè)置給from表單屬性
說明: 循環(huán)渲染 用法: v-for="(item,index) in items" :key="index"
items是源數(shù)據(jù)數(shù)組 item是被迭代的數(shù)組元素的別名 index是被迭代的數(shù)組元素的下標(索引)
push() pop() shift() unshift() splice() sort() reverse() ...
這種修改數(shù)組中的元素是無法實現(xiàn)數(shù)據(jù)改變后頁面會同步改變(只會修改data中的數(shù)據(jù) 但是頁面不會同步改變)
說明: 條件(表達式或布爾值)判斷渲染 用法: v-if="表達式或布爾值" v-else-if="表達式或布爾值" v-else
v-if 和 v-else-if 后面必須跟表達式或布爾值 v-else-if 和 v-else 不能獨立使用 必須跟在 v-if 后面
說明: 條件渲染 用法: v-show="表達式或布爾值" 根據(jù)表達式或布爾值的真假切換元素的display屬性
v-show 不支持 <template>元素 也不支持 v-else
都是用來判斷渲染數(shù)據(jù)的
1.有較高的切換性能消耗 2.惰性渲染 第一次如果條件為false 則不會渲染到頁面 需要等后面條件切換后才會進行第一次渲染 3.條件切換是切換DOM數(shù)中這個元素的移除或添加 4.如果運行時條件很少改變則使用v-if
1.有較高的初始渲染消耗 2.初始渲染 不管條件 第一次加載頁面的時候都會渲染到頁面 3.條件切換只是切換元素的display屬性 4.如果運行時條件會非常頻繁的切換則使用v-show
說明: 這個指令保存在這個元素上 直到關(guān)聯(lián)實例結(jié)束編譯
插值表達式在網(wǎng)絡(luò)較滿的情況下可能會出現(xiàn)數(shù)據(jù)閃爍問題 可以通過給實例(#app)盒子添加一個 v-cloak 指令 通過這個指令的特性(如頁面中還有插值表達式就會存在這個指令 如果頁面的插值表達式都被替換成數(shù)據(jù) 就會自動移除這個標簽) 配合css [v-cloak]{display:none|opacity:0}來解決數(shù)據(jù)閃爍的問題
說明: 這個指令添加的元素 內(nèi)部的胡子語法只會在第一次渲染的時候執(zhí)行解析一次 后面數(shù)據(jù)發(fā)生改變后也不會觸發(fā)更新
某些元素只需要解析一次 后續(xù)不需要更新 就可以使用這個指令 提升性能
1.使用get和set函數(shù) 需要把計算屬性函數(shù)改成計算屬性對象 2.計算屬性默認執(zhí)行g(shù)et方法(根據(jù)相關(guān)的數(shù)據(jù)計算返回當前屬性的值) 3.當計算數(shù)學(xué)值自身改變后執(zhí)行set方法 4.可以用來計算稅前和稅后的互推算
watch:{
XXX:{
deep:true,
handler(newVal,oldVal){
// 處理代碼
}
}
}
watch: {
// watch里面的 $router 這些對象前面不要帶this
"$route.path"(newVal, oldVal) {
if (newVal.indexOf("/login") >=0) {
this.welcom="歡迎登陸";
}
if (newVal.indexOf("/register") >=0) {
this.welcom="歡迎注冊";
}
}
}
watch: {
$route: function(newVal,oldVal) {
console.log(this.$route.path);
}
}
1.偵聽器用來檢測數(shù)據(jù)的改變 2.當偵聽的那個數(shù)據(jù)發(fā)生改變后就會觸發(fā)偵聽器中的對應(yīng)函數(shù) 3.一般我更多的使用是用偵聽路由的變化=> 重新獲取數(shù)據(jù)(如搜索在對應(yīng)的router-view中顯示對應(yīng)的數(shù)據(jù)) 4.之前碰到過一個坑點 偵聽器默認無法偵聽復(fù)雜數(shù)據(jù)類型 5.后面使用深度偵聽 depp:true 來解決了這個問題 6.或者偵聽精確到對象中的那個值也可
Vue.filter("formatData", (形參=管道符前面的數(shù)據(jù),形參=想要傳入的數(shù)據(jù)...)=> {
處理數(shù)據(jù)； `返回`處理之后的數(shù)據(jù)
});
filters:{
formatTime(形參=管道符前面的數(shù)據(jù),形參=想要傳入的數(shù)據(jù)...){
處理數(shù)據(jù)； `返回`處理之后的數(shù)據(jù) }
}
獲取data中的所有數(shù)據(jù)
用于當前Vue實例的初始化選項 可以獲取自定義選項
new Vue({
customOption: 'foo',
created: function () {
console.log(this.$options.customOption) //=> 'foo'
}
})
組件的出現(xiàn)就是為了拆分Vue實例的代碼量 能夠讓我們以不同的組件來劃分不同的功能模塊 需要什么功能就去調(diào)用對應(yīng)的模塊即可 局部功能界面
Vue.component('組件名',{參數(shù)})
組件名請使用小寫 大寫需要駝峰命名法
Vue.component('sayHiBaby',{參數(shù)})
頁面中標簽使用 <say-hi-baby></say-hi-baby>
父向子傳參 通過 props 向子組件傳遞數(shù)據(jù) 可以在組件實例中通過 this.xxx 拿到傳遞過來的值 高級寫法(props驗證)
props:{
xxx:{
// 數(shù)據(jù)類型
type:"String",
// 必須傳遞
required:"true",
// 默認值
default:"mystring"
....
}
}
props可以傳遞任何數(shù)據(jù)類型 包括函數(shù)
為什么組件的data是一個函數(shù) 而Vue實例的data是一個對象?
1.每一個Vue組件都是一個Vue實例 2.都是通過new Vue() 創(chuàng)建出來的 3.如果data是一個對象的話 那么這些組件的引用指向就會相同 4.一個的值修改后 其他的值也會修改(這是JavaScript語法的特性) 5.如果data是一個函數(shù) 函數(shù)中再返回一個對象 6.那么每個Vue組件都有了自己的作用域 互不干擾
Vue生命周期鉤子 || Vue生命周期函數(shù) Vue提供給開發(fā)者一系列的回調(diào)函數(shù) 讓我們可以在Vue的各個階段添加自定義的邏輯處理
創(chuàng)建期間的生命周期函數(shù)(1次)
Vue渲染解析插值表達式 并不是在頁面中直接渲染解析 而是將整個掛載在Vue實例的模版 拿到內(nèi)存中去解析 等全部解析完成后 再一次性的渲染到頁面(批量) (因為有可能頁面中有很多一樣的data中的值 如果是在頁面中直接渲染解析會很耗性能)
運行期間的生命周期函數(shù)(0次-多次)
銷毀期間的生命周期函數(shù)(1次)
想要銷毀Vue實例 調(diào)用 vm.$destroy() 即可 注意: 這個方法方法并不會銷毀Vue實例的一些如 定時器或計時器等方法 會造成 '內(nèi)存泄漏' 所以在完全銷毀之前 需要在 beforeDestory 鉤子中清除定時器等...
url地址和組件之間的關(guān)系
必須添加 Vue.use(VueRouter)
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
<router-link to="/login" tag="span">登陸</router-link>
<router-link to="/logout" tag="span">注冊</router-link>
<router-view></router-view>
const login={ template: "#tempLogin" };
const logout={ template: "#tempLogout" };
const routes=[
{ path: "/login", component: login },
{ path: "/logout", component: logout }
];
const router=new VueRouter({
routes
});
new Vue({
el:"xxx",
router
})
設(shè)置路由匹配成功后 router-link 的樣式屬性
/login=> /login/user
觸發(fā) 添加樣式
/login/user=> /login/user
觸發(fā) 添加樣式
點了跳轉(zhuǎn) 沒有任何邏輯 類似于(a標簽設(shè)置了href) <router-link to="地址">XXX</router-link>
跳轉(zhuǎn)的同時執(zhí)行其他需要執(zhí)行的邏輯 router.push('地址')
const router=new VueRouter({ ... })
router.beforeEach((to, from, next)=> {
// ...
next()
})
to
去哪個路由 一般通過to來判斷對應(yīng)路由做對應(yīng)處理
from
來自哪個路由
next()
必須next()才可以繼續(xù)跳轉(zhuǎn)頁面(像node"express"里面的中間件)
1.判斷登陸狀態(tài) 如判斷token... 2.可以在跳轉(zhuǎn)路由時先判斷這個頁面這個用戶是否有權(quán)限訪問... 3.可以每次路由跳轉(zhuǎn)前都提示用戶跳轉(zhuǎn)至什么頁面...
{ path: '/user', component: User,
children: [
{
path: 'index',
component: Index
}
]
}
配置錯誤路由規(guī)則
Axios是一個基于 promise(實現(xiàn)了鏈式調(diào)用) 的 HTTP 庫 可以用在瀏覽器和 Node.js 中 專注于發(fā)請求 專注于網(wǎng)絡(luò)請求的一個庫`
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
成功回調(diào)
失敗回調(diào)
// 為給定 ID 的 user 創(chuàng)建請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 可選地，上面的請求可以這樣做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
基礎(chǔ)的地址應(yīng)用 沒有必要每次都寫 可以直接抽離出來
axios.defaults.baseURL='設(shè)置的基地址'
Vue.prototype.$axios=axios
axios填寫路徑時后面直接寫對應(yīng)的路徑即可 前面的公共部分不需在寫(寫了也不會影響)
axios.defaults.withCredentials=true
const xxx=axios.create({
// 即地址
baseURL: 'https://some-domain.com/api/',
// 可以統(tǒng)一設(shè)置請求頭
headers: {Authorization: token}
});
xxx.get()
xxx.post()
axios.interceptors.request.use(function (config) {
// 可以在發(fā)請求之前在這里設(shè)置一些請求頭
`config.headers.Authorization=token`
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
axios.interceptors.response.use(function (response) {
// 可以在獲取響應(yīng)數(shù)據(jù)之后設(shè)置一些提示 如獲取失敗/成功
`response.data.code==200?`
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
vue-resource已經(jīng)不再更新 推薦使用Axios
Vue提供的讓程序員可以在動畫的各個時機 添加 自定義邏輯 的鉤子 也可稱之為 動畫鉤子或動畫函數(shù)
// 指定顯示的transition
xxx-enter-active
// 指定隱藏的transition
xxx-leave-active
// 指定隱藏時的樣式
xxx-enter/xxx-leave-to
transition標簽包裹
transition-group標簽包裹
動畫樣式的開始類名
解析為的標簽名
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
// ...
methods: {
// --------
// 進入中
// --------
beforeEnter: function (el) {
// ...
},
// 當與 CSS 結(jié)合使用時
// 回調(diào)函數(shù) done 是可選的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 離開時
// --------
beforeLeave: function (el) {
// ...
},
// 當與 CSS 結(jié)合使用時
// 回調(diào)函數(shù) done 是可選的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
npm install vuex --save
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store=new Vuex.Store({
state: {
// 數(shù)據(jù)
count: 0
},
mutations: {
// 方法
increment (state) {
state.count++
}
}
})
new Vue({
el:xxx,
// 掛載到Vue實例上
store
})
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
把很多開發(fā)中需要用到的功能整合到了一起 讓Vue開發(fā)人員專注于邏輯代碼即可 是用webpack配置出來的
vue create 項目名 <=項目名不要有中文!!!不要大些 cd 項目名 npm run serve
npm init webpack "項目名" cd "項目名" npm instal npm run dev
最后一步選 No, I will handle that myself 自己再npm i 下載速度會快一點
|-- build : webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- dev-server.js : 通過 express 啟動后臺服務(wù)器
|-- config: webpack 相關(guān)的配置文件夾(基本不需要修改)
|-- index.js: 指定的后臺服務(wù)的端口號和靜態(tài)資源文件夾
|-- node_modules
|-- src : 源碼文件夾
|-- components: vue 組件及其相關(guān)資源文件夾
|-- App.vue: 應(yīng)用根主組件
|-- main.js: 應(yīng)用入口 js
|-- static: 靜態(tài)資源文件夾
|-- .babelrc: babel 的配置文件
|-- .eslintignore: eslint 檢查忽略的配置
|-- .eslintrc.js: eslint 檢查的配置
|-- .gitignore: git 版本管制忽略的配置
|-- index.html: 主頁面文件
|-- package.json: 應(yīng)用包配置文件
|-- README.md: 應(yīng)用描述說明的 readme 文件
npm install vue-router
import VueRouter from 'vue-router'
`const router=new VueRouter({
routes
})`
`new Vue({
router
})`
為元素添加隨機屬性 樣式中添加屬性選擇器 2者結(jié)合 就把css的作用范圍 約束
餓了么前端團隊開發(fā)的PC端的基于Vue的組件 內(nèi)部封裝了很多現(xiàn)成的組件 在VueCLI中使用elementUI npm i element-ui import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 有些組件并沒有在組件內(nèi)部使用原生事件 但是有些情況需要一些原生事件 就可以使用.native修飾符來觸發(fā)
返回所有匹配成功的值 創(chuàng)建一個新數(shù)組, 其包含通過所提供函數(shù)實現(xiàn)的測試的所有元素 (數(shù)組過濾)
const oldArr=["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res=oldArr.filter((val, index)=> val.indexOf("d") !=-1); // 返回所有匹配成功的值
console.log(res); // [ 'dajsk', 'dkjdklas', 'ds' ]
返回匹配的第一個值 返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值 沒有匹配成功返回undefined
const oldArr=["dajsk", "dkjdklas", "kgjftlk", "ksf", "ds", "mfksjjks"];
let res1=oldArr.find((val, index)=> val.indexOf("d") !=-1); // 返回匹配的第一個值
console.log(res1); // dajsk
將匹配成功的值做對應(yīng)的計算后再次返回 創(chuàng)建一個新數(shù)組 其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果
const oldArrMap=[3, 4, 7, 1, 8, 5];
let res2=oldArrMap.map((val, index)=> {
// 將匹配成功的值做對應(yīng)的計算后再次返回
if (val > 5) {
val=val * 2;
}
return val;
});
console.log(res2); // [ 3, 4, 14, 1, 16, 5 ]
因為這些方法都是返回的新數(shù)組 并沒有覆蓋原來的數(shù)組所以可以繼續(xù)鏈式調(diào)用數(shù)組的方法繼續(xù)過濾
遍歷數(shù)組 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)
const oldArrForEach=[3, 6, 8, 2, 8, 0];
let num=0;
oldArrForEach.forEach((val, index)=> {
num +=val;
});
console.log(num); // 27
oldArrForEach.forEach((val, index)=> {
if (index==2) return console.log(val); // 8
});
注意 需要在瀏覽器聲明callback去的函數(shù) 需要在script請求前聲明 兼容性強 只能發(fā)送get請求
網(wǎng)絡(luò)請求設(shè)計方法時 考慮到數(shù)據(jù)的操作主要：增刪改查 方法的命名可以體現(xiàn)這個操作 一般常用的就是get和post
每次請求 瀏覽器和服務(wù)器交互完畢后 彼此并沒有留下什么 繼續(xù)請求 也無法判斷你是誰 如登陸功能 為了能夠保存一些信息 服務(wù)器返回響應(yīng)報文時 會偷偷的帶一個響應(yīng)頭 作用是在瀏覽器中偷偷保存一些信息set-cookie 瀏覽器接收到這個響應(yīng)頭后 會在本地保存這個響應(yīng)頭 第二次請求時 瀏覽器就會自動帶上這個信息去服務(wù)器 服務(wù)器接收到這個信息 就知道你是誰了 ajax跨域請求 默認不攜帶cookie 需要設(shè)置 跨域cookie在瀏覽器中無法看到 需要抓包
Seesion 是將用戶數(shù)據(jù)存儲在服務(wù)器中 通過sessionId來驗證查找服務(wù)器中的用戶信息 sessionId一般是存放在瀏覽器的cookie中的
所以Session需要配合瀏覽器的cookie或者瀏覽器的其他存儲技術(shù)一起使用
和cookie差不多 也可以記錄登陸狀態(tài) 服務(wù)器生成的 通過用戶瀏覽器版本、用戶信息...生成的一個密鑰
瀏覽器不會自動保存 可以接口本地存儲來保存token 瀏覽器不會自動攜帶發(fā)送 每次請求接口時可以通過headers攜帶存儲的token headers{ Authorization ：token }
可以把數(shù)據(jù)存儲到本地(瀏覽器) 只要用戶不刪除 則會一直保存 每個域名都是獨立的保存數(shù)據(jù) 不同域名不能互相訪問 長久保存數(shù)據(jù)可以存儲到 localStorage 可以存儲5M數(shù)據(jù)
短暫存儲數(shù)據(jù) 可以多頁面?zhèn)髦?相當于localStorage會更安全 瀏覽器關(guān)閉后就不會保存了 可以存儲5M數(shù)據(jù)
若有感興趣的小伙伴，需要VUE學(xué)習文檔思維導(dǎo)圖原圖的，關(guān)注我，私信回復(fù)獲取：VUE學(xué)習文檔思維導(dǎo)圖
作者：藍海00
轉(zhuǎn)載鏈接：https://www.jianshu.com/p/125ce0c89603
、MVVM簡介
如果你是第一次學(xué)前端，那么本節(jié)知識一定要了解，什么是MVVM。
MVVM是Model-View-ViewModel的簡寫。它本質(zhì)上就是MVC 的改進版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化，讓我們將視圖 UI 和業(yè)務(wù)邏輯分開。當然這些事 ViewModel 已經(jīng)幫我們做了，它可以取出 Model 的數(shù)據(jù)同時幫忙處理 View 中由于需要展示內(nèi)容而涉及的業(yè)務(wù)邏輯。MVVM的核心是ViewModel層，負責轉(zhuǎn)換Model中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用。是一種簡化用戶界面的事件驅(qū)動編程方式。
下邊我們來畫張圖來大體了解下MVVM的工作原理圖：
該層向上與視圖層進行雙向數(shù)據(jù)綁定
向下與Model層通過接口請求進行數(shù)據(jù)交互
（1）View
View是視圖層， 也就是用戶界面。前端主要由HTH L和csS來構(gòu)建， 為了更方便地展現(xiàn)vi eu to del或者Hodel層的數(shù)據(jù)， 已經(jīng)產(chǎn)生了各種各樣的前后端模板語言， 比如FreeMarker，Thyme leaf等等， 各大MV VM框架如Vue.js.Angular JS， EJS等也都有自己用來構(gòu)建用戶界面的內(nèi)置模板語言。
（2）Model
Model是指數(shù)據(jù)模型， 泛指后端進行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控， 主要圍繞數(shù)據(jù)庫系統(tǒng)展開。這里的難點主要在于需要和前端約定統(tǒng)一的接口規(guī)則
（3）ViewModel
ViewModel是由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。在這一層， 前端開發(fā)者對從后端獲取的Model數(shù)據(jù)進行轉(zhuǎn)換處理， 做二次封裝， 以生成符合View層使用預(yù)期的視圖數(shù)據(jù)模型。
View Model所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分， 而Model層的數(shù)據(jù)模型是只包含狀態(tài)的
視圖狀態(tài)和行為都封裝在了View Model里。這樣的封裝使得View Model可以完整地去描述View層。由于實現(xiàn)了雙向綁定， View Model的內(nèi)容會實時展現(xiàn)在View層， 這是激動人心的， 因為前端開發(fā)者再也不必低效又麻煩地通過操縱DOM去更新視圖。 MVVM框架已經(jīng)把最臟最累的一塊做好了， 我們開發(fā)者只需要處理和維護View Model， 更新數(shù)據(jù)視圖就會自動得到相應(yīng)更新，真正實現(xiàn)事件驅(qū)動編程。 View層展現(xiàn)的不是Model層的數(shù)據(jù)， 而是ViewModel的數(shù)據(jù)， 由ViewModel負責與Model層交互， 這就完全解耦了View層和Model層， 這個解耦是至關(guān)重要的， 它是前后端分離方案實施的重要一環(huán)。
2、為什么要使用MVVM
MVVM模式和MVC模式一樣，主要目的是分離視圖（View）和模型（Model），有幾大優(yōu)點
（1） 低耦合。視圖（View）可以獨立于Model變化和修改，一個ViewModel可以綁定到不同的"View"上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
（2） 可重用性。你可以把一些視圖邏輯放在一個ViewModel里面，讓很多view重用這段視圖邏輯。
（3）獨立開發(fā)。開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel），設(shè)計人員可以專注于頁面設(shè)計，使用Expression Blend可以很容易設(shè)計界面并生成xaml代碼。
（4）可測試。界面素來是比較難于測試的，測試可以針對ViewModel來寫
3、VUE概述
（1）什么是vue?
Vue是一套用于構(gòu)建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合這是官網(wǎng)給出的介紹，可能不是那么容易理解。簡單來說，Vue是一個視圖層框架，幫助我們更好的構(gòu)建應(yīng)用。
使用Vue和原生JS一個最顯著的差別就是，Vue不再對DOM直接進行操作，而是通過對數(shù)據(jù)的操作，來改變頁面。使用Vue構(gòu)建的頁面，是有一個個的組件組成的，當組件中定義的數(shù)據(jù)發(fā)生變化時，組件的顯示也會跟著變化，且此過程無需刷新頁面。
（2）MVVM模式的實現(xiàn)者
Model：模型層， 在這里表示JavaScript對象 View：視圖層， 在這里表示DOM(HTML操作的元素) ViewModel：連接視圖和數(shù)據(jù)的中間件， Vue.js就是MVVM中的View Model層的實現(xiàn)者 在MVVM架構(gòu)中， 是不允許數(shù)據(jù)和視圖直接通信的， 只能通過ViewModel來通信， 而View Model就是定義了一個Observer觀察者
ViewModel能夠觀察到數(shù)據(jù)的變化， 并對視圖對應(yīng)的內(nèi)容進行更新 ViewModel能夠監(jiān)聽到視圖的變化， 并能夠通知數(shù)據(jù)發(fā)生改變 至此， 我們就明白了， Vue.js就是一個MV VM的實現(xiàn)者， 他的核心就是實現(xiàn)了DOM監(jiān)聽與數(shù)據(jù)綁定
（3）為什么要使用Vue
易用：熟悉HTML、CSS、JavaScript之后，可快速度上手vue。學(xué)習曲線平穩(wěn)。
輕量級：Vue.js壓縮后有只有20多kb，超快虛擬DOM
高效：吸取了Angular(模塊化) 和React(虛擬DOＭ) 的優(yōu)勢， 并擁有自己獨特的功能
開源：文檔齊全，社區(qū)活躍度高
4、VUE之Hello World!
步驟一：創(chuàng)建空文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>步驟二：引入vue.js (本人下載的開發(fā)版的vue.js，跟本html文件放在了同一目錄下，所以直接引用)
<script type="text/javascript" src="vue.js"></script>步驟三：創(chuàng)建vue實例
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>步驟四：數(shù)據(jù)與頁面元素綁定
<div id="app">
{{msg}}
</div>完整的html
<!DOCTYPE html>
<html lang="en">
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
msg:'Hello World'
}
});
</script>
</body>
</html>瀏覽器打開：
參數(shù)分析：
el : '#app' -- 綁定元素的ID（元素的掛載位置，值可以是CSS選擇器或者是DOM元素）
data : { msg : 'Hello World' } -- 模型數(shù)據(jù)，屬性名：msg 值：Hello World
{{msg}} : 在綁定的元素中使用{{ }}將Vue創(chuàng)建的名為msg的屬性包起來， 即可實現(xiàn)數(shù)據(jù)綁定功能，我們在調(diào)試狀態(tài)下手動修改下msg的值，在不刷新頁面的情況下就會展示我們修改后的值，這就是借助了Vue的數(shù)據(jù)綁定功能實現(xiàn)的。 MV VM模式中要求View Model層就是使用觀察者模式來實現(xiàn)數(shù)據(jù)的監(jiān)聽與綁定， 以做到數(shù)據(jù)與視圖的快速響應(yīng)
下一篇：VUE入門教程（二）之模板語法（指令）
者: CHICAGO
轉(zhuǎn)發(fā)連接：https://juejin.im/post/5e475829f265da57444ab10f
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
