MVVM框架概述

?

?

什么是vue

是一套構(gòu)建用戶界面的漸進(jìn)式（用到哪一塊就用哪一塊，不需要全部用上）前端框架，Vue?的核心庫(kù)只關(guān)注視圖層

?

?

vue的兼容性

Vue.js?不支持?IE8?及其以下版本，因?yàn)?Vue.js?使用了?IE8?不能模擬的?ECMAScript 5?特性。?Vue.js?支持所有兼容?ECMAScript 5?的瀏覽器。

?

?

vue學(xué)習(xí)資源

vue.js中文官網(wǎng)：http://cn.vuejs.org/

vue.js源碼：https://github.com/vuejs/vue

vue.js官方工具：https://github.com/vuejs

vue.js官方論壇：forum.vuejs.org

?

?

對(duì)比其他框架-React

React?和?Vue?有許多相似之處，它們都有使用?Virtual DOM；提供了響應(yīng)式（Reactive）和組件化（Composable）的視圖組件。將注意力集中保持在核心庫(kù)，而將其他功能如路由和全局狀態(tài)管理交給相關(guān)的庫(kù)。React?比?Vue?有更豐富的生態(tài)系統(tǒng)

都有支持native的方案，React的RN，vue的Wee下

都支持SSR服務(wù)端渲染

都支持props進(jìn)行父子組件間的通信

性能方面：React?和?Vue?在大部分常見場(chǎng)景下都能提供近似的性能。通常?Vue?會(huì)有少量?jī)?yōu)勢(shì)，因?yàn)?Vue?的?Virtual DOM?實(shí)現(xiàn)相對(duì)更為輕量一些。

不同之處就是：

• 數(shù)據(jù)綁定方面，vue實(shí)現(xiàn)了數(shù)據(jù)的雙向數(shù)據(jù)綁定，react數(shù)據(jù)流動(dòng)是單向的
• virtual DOM不一樣,vue會(huì)跟蹤每一個(gè)組件的依賴關(guān)系,不需要重新渲染整個(gè)組件樹.而對(duì)于React而言,每當(dāng)應(yīng)用的狀態(tài)被改變時(shí),全部組件都會(huì)重新渲染,所以react中會(huì)需要shouldComponentUpdate這個(gè)生命周期函數(shù)方法來進(jìn)行控制
• state對(duì)象在react應(yīng)用中不可變的,需要使用setState方法更新狀態(tài);在vue中,state對(duì)象不是必須的,數(shù)據(jù)由data屬性在vue對(duì)象中管理（如果要操作直接this.xxx）
• 組件寫法不一樣, React推薦的做法是?JSX ,?也就是把HTML和CSS全都寫進(jìn)JavaScript了,即'all in js'; Vue推薦的做法是webpack+vue-loader的單文件組件格式,即html,css,js寫在同一個(gè)文件

?

?

對(duì)比其他框架-angular

在性能方面，這兩個(gè)框架都非常的快，我們也沒有足夠的實(shí)際應(yīng)用數(shù)據(jù)來下一個(gè)結(jié)論。如果你一定想看些數(shù)據(jù)的話，你可以參考這個(gè)第三方跑分。單就這個(gè)跑分來看，Vue?似乎比?Angular?要更快一些。

在大小方面，最近的?Angular?版本中在使用了?AOT?和?tree-shaking?技術(shù)后使得最終的代碼體積減小了許多。但即使如此，一個(gè)包含了?vuex + vue-router?的?Vue?項(xiàng)目?(30kb gzipped)?相比使用了這些優(yōu)化的?Angular CLI?生成的默認(rèn)項(xiàng)目尺寸?(~130kb)?還是要小的多。

靈活性：Vue?相比于?Angular?更加靈活，Vue?官方提供了構(gòu)建工具來協(xié)助你構(gòu)建項(xiàng)目，但它并不限制你去如何組織你的應(yīng)用代碼。有人可能喜歡有嚴(yán)格的代碼組織規(guī)范，但也有開發(fā)者喜歡更靈活自由的方式。

?

?

vue.js的核心特點(diǎn)—響應(yīng)的數(shù)據(jù)綁定

傳統(tǒng)的js操作頁(yè)面：在以前使用js操作頁(yè)面的時(shí)候是這樣的，需要操作某個(gè)html元素的數(shù)據(jù)，就的使用js代碼獲取元素然后在處理業(yè)務(wù)邏輯

響應(yīng)式數(shù)據(jù)綁定的方式操作頁(yè)面，可以直接使用像下面代碼那樣的寫法就可以將數(shù)據(jù)填充到頁(yè)面中

<template><div id="app">{{ message }}</div> </template><script> export default {name: 'app',data () {return {message: 'Welcome to Your Vue.js App'}} } </script><style> </style>

?

?

vue.js的核心特點(diǎn)—可組合的視圖組件

一個(gè)頁(yè)面映射為組件樹。劃分組件可維護(hù)、可重用、可測(cè)試，也就是一個(gè)頁(yè)面由多個(gè)組件組合而成

vue中實(shí)現(xiàn)組件引入示例

第一步：import導(dǎo)入需要引入的組件文件；

第二步：注冊(cè)組件；

第三步：在需要引入組件的文件中加上組件標(biāo)簽（這個(gè)標(biāo)簽的標(biāo)簽名就是注冊(cè)的組件名字，多個(gè)單詞的和這里有xx-xx的形式）

需要注意的是：組件可以嵌套引入，也就是說組件可以引入其他組件

首先創(chuàng)建一個(gè)組件，用于被引入的組件，組件名字叫Hello.vue

<template><div class="hello"><h2>Essential Links</h2></div> </template><script> export default {name: 'hello' } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped></style>

然后在需要引入的組件中，先使用import導(dǎo)入組件

import Hello from './components/Hello'

然后使用components注冊(cè)這個(gè)組件

components: {Hello }

?在需要引入組件的文件中加上組件標(biāo)簽（這個(gè)標(biāo)簽的標(biāo)簽名就是注冊(cè)的組件名字，多個(gè)單詞的和這里有xx-xx的形式）

<hello></hello> <template><div id="app">{{ message }}<hello></hello></div> </template><script>import Hello from './components/Hello'export default {name: 'app',data () {return {message: 'Welcome to Your Vue.js App'}},components: {Hello}} </script><style> </style>

單文件組件：Js，css，html?存在一個(gè)文件中，是一個(gè)單文件組件，下面vue模板文件里的Hello.vue就是一個(gè)單文件組件

<template><div class="hello"><h2>{{ msg }}</h2></div> </template><script> export default {name: 'hello',data () {return {msg: 'Hello Vue'}} } </script><!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 {font-weight: normal; } </style>

?

?

vue.js的核心特點(diǎn)—虛擬DOM

虛擬DOM的概述

運(yùn)行的js速度是很快的，大量的操作DOM就會(huì)很慢，時(shí)常在更新數(shù)據(jù)后會(huì)重新渲染頁(yè)面，這樣造成在沒有改變數(shù)據(jù)的地方也重新渲染了DOM節(jié)點(diǎn)，這樣就造成了很大程度上的資源浪費(fèi)。

利用在內(nèi)存中生成與真實(shí)DOM與之對(duì)應(yīng)的數(shù)據(jù)結(jié)構(gòu)，這個(gè)在內(nèi)存中生成的結(jié)構(gòu)稱之為虛擬DOM

當(dāng)數(shù)據(jù)發(fā)生變化時(shí)，能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到DOM操作上

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App'Vue.config.productionTip = false/* eslint-disable no-new */ new Vue({el: '#app',template: '<App/>',components: { App } })console.dir(document)

?

?

vue.js的核心特點(diǎn)—MVVM模式

MVVM概述：M：Model數(shù)據(jù)模型 ，?V：view?視圖模板 ?，?vm：view-Model：視圖模型

vue的MVVM實(shí)例（雙向數(shù)據(jù)綁定）：當(dāng)輸入框輸入數(shù)據(jù)的時(shí)候，相應(yīng)的message也會(huì)改變

<template><div id="app"><input type="text" v-model="message"/>{{ message }}</div> </template><script>export default {name: 'app',data () {return {message: 'Welcome'}}} </script><style> </style>

vue是如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定的：當(dāng)數(shù)據(jù)發(fā)生改變—自動(dòng)更新視圖。利用Object.definedProperty中的setter/getter代理數(shù)據(jù)，監(jiān)控對(duì)數(shù)據(jù)的操作

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body><input type="text" id="username"><br /><span id="uName"></span> <script>var obj = {pwd: '123'}Object.defineProperty(obj, 'username', {set: function (val) {document.getElementById('uName').innerText = valdocument.getElementById('uNmae').value = valconsole.log('set')},get: function () {}})document.getElementById('username').addEventListener('keyup' ,function () {obj.username = event.target.value}) </script> </body> </html>

?

?

vue.js的核心特點(diǎn)—聲明式渲染

Vue.js?的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來聲明式的將數(shù)據(jù)渲染進(jìn)?DOM，初始化根實(shí)例，vue自動(dòng)將數(shù)據(jù)綁定在DOM模板上

聲明式渲染與命令式渲染區(qū)別

聲明式渲染：所謂聲明式渲染只需要聲明在哪里，做什么，而無需關(guān)心如何實(shí)現(xiàn)

命令式渲染：需要具體代碼表達(dá)在哪里，做什么，如何實(shí)踐

需求：求數(shù)組中每一項(xiàng)的倍數(shù)，放在另一個(gè)數(shù)組中實(shí)例

命令式渲染

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>var arr = [1, 2, 3, 4, 5]var newArr = []for (var i = 0; i < arr.length; i++) {newArr.push(arr[i] * 2)}console.log(newArr) </script> </body> </html>

聲明式渲染

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>var arr = [1, 2, 3, 4, 5]var newArr = arr.map(function (item) {return item * 2})console.log(newArr) </script> </body> </html>

?

總結(jié)

以上是生活随笔為你收集整理的vue框架简介的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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