渐进式框架Vue
漸進(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)
當(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é)
- 上一篇: android ui状态栏高度,移动界面
- 下一篇: Vue中img的动态src不显示图片