漸進(jìn)式框架Vue

1. 什么是vue？

類似于一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同，Vue采用自底向上增量開發(fā)設(shè)計(jì)。

漸進(jìn)式：就是階梯式向前，vue是輕量級的，它有很多獨(dú)立的功能或庫，我們會根據(jù)我們的項(xiàng)目來選用vue的一些功能，我們開發(fā)項(xiàng)目時(shí)，只用到vue的聲明式渲染，我就只用vue的聲明渲染，而我們要用它的組件系統(tǒng)，我們可以使用它的組件系統(tǒng)。

Vue的漸進(jìn)式表現(xiàn)：

聲明式渲染----組件系統(tǒng)-----客戶端路由------大數(shù)據(jù)裝填管理-------構(gòu)建工具

2. vue中兩個(gè)核心點(diǎn)

響應(yīng)式數(shù)據(jù)綁定

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，vue自動更新視圖。

它的原理時(shí)利用Object.definedProperty中的setter/getter代理數(shù)據(jù)，監(jiān)控對數(shù)據(jù)的操作。

組合的視圖組件

• ui頁面映射為組件書
• 劃分組件可維護(hù)、可重用、可測試

3.虛擬DOM

• js的運(yùn)行速度已經(jīng)很快，然而大量的DOM操作就會變得很慢，但是前端本身就要通過JS處理DOM來更新視圖數(shù)據(jù)。這樣子啊更新數(shù)據(jù)后會重新渲染頁面，這樣就造成在沒有改變數(shù)據(jù)的地方也重新渲染了DOM節(jié)點(diǎn)。這樣性能方面就會很受影響
• 利用在內(nèi)存中生成于真實(shí)DOM與之對應(yīng)的數(shù)據(jù)結(jié)構(gòu)，這個(gè)內(nèi)存中生成的結(jié)構(gòu)稱之為虛擬DOM
• 當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，能夠只能的計(jì)算出重新渲染組件的最小代價(jià)，并應(yīng)用到DDOM操作上，vue就是利用了這一點(diǎn)

4. MVVM模式

angular就是所謂的MVC模式的框架，model、view、controller。

而vue時(shí)MVVM模式的框架，即

M：model 數(shù)據(jù)層也就是數(shù)據(jù) 前端的js

V: view 指DOM層或用戶界面

VM：view-model 處理數(shù)據(jù)和界面的中間層

5. Vue的實(shí)例

? 每一個(gè)應(yīng)用得是通過Vue這個(gè)構(gòu)造函數(shù)來創(chuàng)建根實(shí)例啟動的 new Vue() 構(gòu)造函數(shù)中需要傳入一些選項(xiàng)對象。包含掛在元素、數(shù)據(jù)、模板、方法等待、這些只是一部份API

6. 聲明式渲染

渲染時(shí)分為聲明式渲染和命令式渲染的

Vue是聲明式渲染的

也就是只需要關(guān)心聲明在哪里，做什么，不需要關(guān)心如何實(shí)現(xiàn)

命令式渲染

需要通過具體的代碼表達(dá)在哪里做什么，如何實(shí)現(xiàn)

調(diào)試插件

? vue調(diào)試方面，可以選擇安裝chrome插件、打開vue項(xiàng)目，在console控制臺選擇vue面板。在Devtools工具中，可以選擇組件，查看對應(yīng)組件內(nèi)的數(shù)據(jù)信息，也可以選擇Vuex選項(xiàng)，查看該項(xiàng)目內(nèi)Vuex的狀態(tài)變量信息

UI組件

選擇使用Element組件

其github項(xiàng)目（https://github.com/ElemeFE/element）更新比較頻繁

目前為止element就是最好的支持vue2.0的UI組件

vue、React、Angular1對比

性能對比

? 在Angular1中，在scope作用域中每一次數(shù)據(jù)變化，會觸發(fā)watcher的重新計(jì)算，angular對常用的dom事件，xhr事件等做了封裝， 在里面觸發(fā)進(jìn)入angular的digest流程。在digest流程里面，會從rootscope開始遍歷， 檢查所有的watcher。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次

? Vue它使用基于依賴追蹤的觀察系統(tǒng)并且異步隊(duì)列更新，數(shù)據(jù)的變化都是獨(dú)立處罰的，除非數(shù)據(jù)之間有明確的依賴關(guān)系。
vue的渲染性能優(yōu)于react

渲染能力對比

ReactNative能使你用相同的組件模型編寫有本地渲染能力的 APP（iOS 和 Android）。能同時(shí)跨多平臺開發(fā)，對開發(fā)者是非常棒的

Vue 操作符

1. 配置

首先使用webstrom創(chuàng)建一個(gè)vue框架，然后進(jìn)行如下配置

在App.vue中 配置

<template><div id="app">//使用組件中的那個(gè)vus 就引入誰<C3/></div> </template> <script>// eslint-disable-next-line no-unused-vars 鎮(zhèn)壓 即不顯示效果// import HelloWorld from "@/components/HelloWorld";// import C1 from "@/components/C1";// import C2 from "@/components/C2"; 引入相關(guān)路徑import C3 from "@/components/C3"; export default {name: 'App',components: {// C1,// C2// 引入組件 來進(jìn)行使用C3} } </script>

在 src/components下 可以使用vus的相關(guān)函數(shù)

<template><div > <!-- 頁面加載 只執(zhí)行一次 --><span v-once>{{msg}}</span><br/> <!-- mothch 大胡子--><span>{{msg}}</span><br/><input v-model="msg"><div><hello-world></hello-world><h1>{{htmlInfo}}}</h1><h1 v-html="htmlInfo"></h1></div><ol v-bind:style="'text-align:left;' + colorstyle"><li>1111</li><li>2222</li></ol><button v-on:click="red"> one</button><button v-on:click="blue"> two</button><ul ><li>3333</li><li>4444</li></ul><div> <!-- <h3>{{age++}}</h3>--> <!-- <h3>{{ age+=1}}</h3>--><h3>{{age+age}} = 36 </h3> <!-- <h3>{{ age+=1}}</h3>--> <!-- <h3>{{age +=1}}</h3>--><h3>{{isSuccess ? 'yes':'no'}}</h3><h3>{{info.split(",").reverse().join(",")}}</h3></div></div></template><script>export default {name: "C3",data(){return{msg:'hello',htmlInfo:'<span> inner span</span>',colorstyle:'color:red',age:18,isSuccess:true,info:'a,b,c,d,e,f'}} ,methods:{red(){this.colorstyle = 'color:green';},blue(){// this.message = this.message.split(" ")[0];this.colorstyle = 'color:blue';},},} </script><style scoped></style>

2. 功能函數(shù)

1.<h1>{{message}}</h1> // message 需要自己定義<input v-model="message"> 文本框內(nèi)容 與message內(nèi)容同步 2. JS 組件之中可以嵌套另一個(gè)組件 <script>import C1inner1 from "@/components/C1inner1";export default {name: "C1",components: {C1inner1},data() {return {message: 'hello'}},// eslint-disable-next-line no-dupe-keyscomponents:{C1inner1}} </script> 3. v-on:click=" 函數(shù) " 點(diǎn)擊按鈕 有相關(guān)的函數(shù)生效<p><input v-model="message" ><button v-on:click="fn1">按鈕1</button><button v-on:click="fn2">按鈕2</button></p>export default {name: "C2",data() {return {message: 'hello'}},methods:{// 添加 world 字符串fn1(){this.message += ' world';},// 將字符串換進(jìn)行分割稱數(shù)組 賦值第一個(gè)切割內(nèi)容fn2(){// this.message = this.message.split(" ")[0];this.message = this.message.split(' ')[0];},},} 4. v-one 頁面加載 只執(zhí)行一次 多用于修改頁面 5. v-html 可以將標(biāo)簽解析成相關(guān)內(nèi)容 6. {{message}} 會隨相關(guān)內(nèi)容改變而改變 7. vue可以進(jìn)行一些相關(guān)運(yùn)算以及三目運(yùn)算符的比較

綜合實(shí)例 點(diǎn)擊按鈕 文字變色

<template><div > <!-- 頁面加載 只執(zhí)行一次 --><span v-once>{{msg}}</span><br/> <!-- mothch 大胡子--><span>{{msg}}</span><br/><input v-model="msg"><div><hello-world></hello-world><h1>{{htmlInfo}}}</h1><h1 v-html="htmlInfo"></h1></div><ol v-bind:style="'text-align:left;' + colorstyle"><li>1111</li><li>2222</li></ol><button v-on:click="red"> one</button><button v-on:click="blue"> two</button><div><h3>{{age+age}} = 36 </h3><h3>{{isSuccess ? 'yes':'no'}}</h3><h3>{{info.split(",").reverse().join(",")}}</h3></div></div></template><script>export default {name: "C3",data(){return{msg:'hello',htmlInfo:'<span> inner span</span>',colorstyle:'color:red',age:18,isSuccess:true,info:'a,b,c,d,e,f'}} ,methods:{red(){this.colorstyle = 'color:green';},blue(){// this.message = this.message.split(" ")[0];this.colorstyle = 'color:blue';},},} </script><style scoped></style>

總結(jié)

以上是生活随笔為你收集整理的渐进式框架Vue的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。