漸進式框架Vue

1. 什么是vue？

類似于一套構建用戶界面的漸進式框架。與其他重量級框架不同，Vue采用自底向上增量開發設計。

漸進式：就是階梯式向前，vue是輕量級的，它有很多獨立的功能或庫，我們會根據我們的項目來選用vue的一些功能，我們開發項目時，只用到vue的聲明式渲染，我就只用vue的聲明渲染，而我們要用它的組件系統，我們可以使用它的組件系統。

Vue的漸進式表現：

聲明式渲染----組件系統-----客戶端路由------大數據裝填管理-------構建工具

2. vue中兩個核心點

響應式數據綁定

當數據發生變化時，vue自動更新視圖。

它的原理時利用Object.definedProperty中的setter/getter代理數據，監控對數據的操作。

組合的視圖組件

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

3.虛擬DOM

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

4. MVVM模式

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

而vue時MVVM模式的框架，即

M：model 數據層也就是數據 前端的js

V: view 指DOM層或用戶界面

VM：view-model 處理數據和界面的中間層

5. Vue的實例

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

6. 聲明式渲染

渲染時分為聲明式渲染和命令式渲染的

Vue是聲明式渲染的

也就是只需要關心聲明在哪里，做什么，不需要關心如何實現

命令式渲染

需要通過具體的代碼表達在哪里做什么，如何實現

調試插件

? vue調試方面，可以選擇安裝chrome插件、打開vue項目，在console控制臺選擇vue面板。在Devtools工具中，可以選擇組件，查看對應組件內的數據信息，也可以選擇Vuex選項，查看該項目內Vuex的狀態變量信息

UI組件

選擇使用Element組件

其github項目（https://github.com/ElemeFE/element）更新比較頻繁

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

vue、React、Angular1對比

性能對比

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

? Vue它使用基于依賴追蹤的觀察系統并且異步隊列更新，數據的變化都是獨立處罰的，除非數據之間有明確的依賴關系。
vue的渲染性能優于react

渲染能力對比

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

Vue 操作符

1. 配置

首先使用webstrom創建一個vue框架，然后進行如下配置

在App.vue中 配置

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

在 src/components下 可以使用vus的相關函數

<template><div > <!-- 頁面加載 只執行一次 --><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. 功能函數

1.<h1>{{message}}</h1> // message 需要自己定義<input v-model="message"> 文本框內容 與message內容同步 2. JS 組件之中可以嵌套另一個組件 <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=" 函數 " 點擊按鈕 有相關的函數生效<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';},// 將字符串換進行分割稱數組 賦值第一個切割內容fn2(){// this.message = this.message.split(" ")[0];this.message = this.message.split(' ')[0];},},} 4. v-one 頁面加載 只執行一次 多用于修改頁面 5. v-html 可以將標簽解析成相關內容 6. {{message}} 會隨相關內容改變而改變 7. vue可以進行一些相關運算以及三目運算符的比較

綜合實例 點擊按鈕 文字變色

<template><div > <!-- 頁面加載 只執行一次 --><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>

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。