日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

小編給大家分享一下vuejs解決了哪些問(wèn)題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

為長(zhǎng)興等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及長(zhǎng)興網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、長(zhǎng)興網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

vuejs解決了MVC模式中control層過(guò)重，有太多針對(duì)View層交互操作的問(wèn)題。vue只關(guān)心視圖層，即把HTML中的DOM與其他的部分獨(dú)立開(kāi)來(lái)劃分出一個(gè)層次，來(lái)去處理他；Vue不去關(guān)心DOM元素的復(fù)雜結(jié)構(gòu)，而是考慮的是數(shù)據(jù)該如何儲(chǔ)存。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

一、目前整個(gè)前端技術(shù)棧的情況

Vue是一個(gè)前端技術(shù)，所以在學(xué)習(xí)Vue之前，我們先來(lái)了解一下整個(gè)前端技術(shù)棧的技術(shù)和層次：

1、Html5+Css3+Jquery

這是目前前端最基礎(chǔ)的技術(shù)棧，也就是我們要實(shí)現(xiàn)一個(gè)前端頁(yè)面，至少要掌握的基礎(chǔ)，Html和Css是前端頁(yè)面元素和樣式的基礎(chǔ)語(yǔ)言，而Jquery可以理解為使用JavaScript封裝起來(lái)的腳本函數(shù)庫(kù)，如果很精通JavaScript，使用Jquery自然很得心應(yīng)手。
目前純粹使用這種組合技術(shù)的公司很少，一般都會(huì)配合第三方框架來(lái)實(shí)現(xiàn)，主要是為了趕工期哈哈哈。

2、Augular、Vue、React

這三個(gè)框架都有很好的性能，都支持?jǐn)?shù)據(jù)綁定，組件等基本功能。這里所討論的框架都是基于組件的。一個(gè)組件得到一個(gè)輸入，并且在一些內(nèi)部的行為/計(jì)算之后，它返回一個(gè)渲染的 UI 模板（一個(gè)登錄/注銷區(qū)或一個(gè)待辦事項(xiàng)列表項(xiàng)）作為輸出。React 和 Vue比較擅長(zhǎng)處理組件，Angular提供了關(guān)于如何構(gòu)建應(yīng)用程序的強(qiáng)有力的約束，并且還提供了更多開(kāi)箱即用的功能。一般Vue、React經(jīng)常用于中小型，或一些大型項(xiàng)目，而Angular因?yàn)楸容^厚重,一般多用于大型項(xiàng)目。

目前大部分互聯(lián)網(wǎng)公司都會(huì)使用這三個(gè)框架中的其中一種，例如滴滴出行、餓了么、小米移動(dòng)商城等使用的是Vue，阿里和知乎的評(píng)論功能使用的是React和React-native，廣發(fā)證券，中興軟創(chuàng)，海爾日日順等公司使用的是Angular 2（2016年統(tǒng)計(jì)）。

3、Node.js

Node.js是一項(xiàng)服務(wù)器技術(shù)。我們都知道客戶端提出服務(wù)請(qǐng)求，而服務(wù)器端負(fù)責(zé)處理請(qǐng)求并提供服務(wù)。而對(duì)于互聯(lián)網(wǎng)來(lái)說(shuō)，在Node.js之前JavaScript是一項(xiàng)完全的客戶端技術(shù)，被用于瀏覽器中實(shí)現(xiàn)各種動(dòng)畫(huà)，對(duì)DOM的操作等等。而后端，即服務(wù)端則是由PHP、Python、Ruby、Java等等語(yǔ)言來(lái)實(shí)現(xiàn)。Node.js的出現(xiàn)，使得前后端使用同一種語(yǔ)言，統(tǒng)一模型的夢(mèng)想得以實(shí)現(xiàn)。

說(shuō)白了，就是Node.js可以實(shí)現(xiàn)服務(wù)器的功能。目前大搜車的主app后臺(tái)、淘寶數(shù)據(jù)魔方等產(chǎn)品都使用了Node.js作為服務(wù)后臺(tái)。
有一個(gè)共識(shí)就是，當(dāng)一個(gè)前端開(kāi)發(fā)人員學(xué)會(huì)了Node.js之后，就可以稱自己為“全棧工程師”（前端+后臺(tái)一人搞定）了，哈哈。
PS：我自己會(huì)Java后臺(tái)，我又懂一部分前端，我是不是也可以叫自己“偽全?！绷耍ɑ?？

4、混合app開(kāi)發(fā)（Ionic、ReactNative等）

混合app開(kāi)發(fā)即在原生的Android（安卓）、IOS（蘋(píng)果系統(tǒng)）智能手機(jī)系統(tǒng)的APP應(yīng)用上，嵌入HTML等網(wǎng)頁(yè)技術(shù)，實(shí)現(xiàn)原生與HTML的混合。因?yàn)樵鶤PP的開(kāi)發(fā)需要花費(fèi)大量的時(shí)間和開(kāi)發(fā)成本，所以一般都采用混合開(kāi)發(fā)的模式，來(lái)實(shí)現(xiàn)大的提高開(kāi)發(fā)效率和開(kāi)發(fā)成本，是APP目前的主流開(kāi)發(fā)方式。當(dāng)然也有一些純HTML5的移動(dòng)應(yīng)用，外面套了一個(gè)APP的殼子。

Ionic是基于Apache Cordova的混合移動(dòng)應(yīng)用開(kāi)發(fā)方案 。其優(yōu)勢(shì)在于可以用前端開(kāi)發(fā)的標(biāo)準(zhǔn)技術(shù)：HTML、JavaScript 和 CSS 來(lái)開(kāi)發(fā)移動(dòng)應(yīng)用。Ionic 也提供了豐富的組件來(lái)簡(jiǎn)化移動(dòng)應(yīng)用開(kāi)發(fā)。這些組件在不同的平臺(tái)上有類似原生組件的外觀。Ionic 也可以通過(guò) Apache Cordova 與底層系統(tǒng)進(jìn)行交互，調(diào)用電話簿和攝像頭等原生功能。

React Native實(shí)現(xiàn)了只使用JavaScript也能編寫(xiě)原生移動(dòng)應(yīng)用的效果，它在設(shè)計(jì)原理上和React一致，通過(guò)聲明式的組件機(jī)制來(lái)搭建豐富多彩的用戶界面。使用React Native，可以編寫(xiě)一次代碼并多次部署到Android和iOS操作系統(tǒng)。對(duì)于一些創(chuàng)業(yè)公司來(lái)說(shuō)，這樣可以節(jié)省成本，并為程序員騰出時(shí)間完成其他重要任務(wù)。

以上就是目前整個(gè)前端技術(shù)棧的情況，這可以讓我們對(duì)整個(gè)前端生態(tài)有一個(gè)大致的了解，讓我們清楚即將學(xué)習(xí)的Vue技術(shù)在前端技術(shù)棧的定位。

二、Vue介紹及其解決的痛點(diǎn)

Vue是一個(gè)基于JavaScript的前端框架，是一個(gè)國(guó)產(chǎn)框架，作者是尤雨溪（著名漸進(jìn)式 JavaScript 框架 vuejs.org 的創(chuàng)造者）。
Vue是一個(gè)單頁(yè)面框架，基于模塊化和組件化的開(kāi)發(fā)模式，其特點(diǎn)就是簡(jiǎn)單、靈活、高效，在國(guó)內(nèi)的很多中小企業(yè)使用的特別多。

說(shuō)了那么多大、空、虛的詞，可能大家還是不知道Vue到底是干啥的，這里我們就要先從Vue的兩個(gè)大特點(diǎn)說(shuō)起，分別是“基于視圖層的框架”和“MVVM模式”。

1、MVC模式以及其缺陷

很多童鞋可能不知道“MVVM模式”是啥，但是提到“MVC模式”一般都是知道的，“MVC”設(shè)計(jì)模式就是model，view，control，即數(shù)據(jù)模型、視圖層、控制層，像Jquery就是這種模式：

我們可以理解為網(wǎng)頁(yè)上的一個(gè)個(gè)諸如p的DOM元素為“View視圖”，而改變DOM元素屬性或值的數(shù)據(jù)來(lái)源方（如Ajax從服務(wù)器獲取數(shù)據(jù)），可以理解為“model數(shù)據(jù)模型”，而使用諸如Jquery之類的腳本去實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)交互，通過(guò)事件機(jī)制來(lái)響應(yīng)用戶的交互操作（例如用戶點(diǎn)擊按鈕之后彈出一個(gè)對(duì)話框，或修改了標(biāo)簽中的值），即為control層。

而傳統(tǒng)的“MVC模式”有什么缺點(diǎn)呢？其實(shí)最大的缺點(diǎn)就是control層承擔(dān)了太多的針對(duì)View層的交互操作邏輯。例如找某個(gè)被嵌套了很多層的p元素的父級(jí)元素，使用Jquery時(shí)可能會(huì)出現(xiàn)“$ (’#xxx’).parent().parent().parent()”這種寫(xiě)法，如果后期在中間層又多出了其它層的父級(jí)元素，這個(gè)代碼還要修改。相類似這種關(guān)聯(lián)和嵌套的DOM元素，會(huì)隨著頁(yè)面的復(fù)雜度提高而提高，到時(shí)候這些復(fù)雜元素的修改將會(huì)變得特別困難，甚至牽一發(fā)而動(dòng)全身。

2、MVVM模式以及解決的問(wèn)題

而Vue的最強(qiáng)大之處就在于解決了上面control層過(guò)重的問(wèn)題。對(duì)于Vue而言，它只關(guān)心的是視圖層，即把HTML中的DOM與其他的部分獨(dú)立開(kāi)來(lái)劃分出一個(gè)層次，來(lái)去處理他。Vue不去關(guān)心DOM元素的復(fù)雜結(jié)構(gòu)，而是考慮的是數(shù)據(jù)該如何儲(chǔ)存。這一點(diǎn)正是利用了“MVVM模式”的設(shè)計(jì)理念。

在“MVVM模式”中，control層被替換為了“ViewModel”層：

ViewModel是干嘛的？它實(shí)現(xiàn)了View和Model的自動(dòng)同步，也就是當(dāng)Model的屬性改變時(shí)，我們不用再自己手動(dòng)操作Dom元素，來(lái)改變View的顯示，而是改變屬性后該屬性對(duì)應(yīng)View層顯示會(huì)自動(dòng)改變。我們可以理解為我們只需要調(diào)整元素屬性，剩下的DOM操作由框架來(lái)幫我們搞。這不就解決了我們上面說(shuō)的問(wèn)題了？下面就說(shuō)說(shuō)Vue是怎么具體解決這些問(wèn)題的。

3、Vue的優(yōu)點(diǎn)

Vue有“聲明式、響應(yīng)式的數(shù)據(jù)綁定”、“組件化的開(kāi)發(fā)”和“Virtual DOM”三大優(yōu)點(diǎn)：

（1）聲明式、響應(yīng)式的數(shù)據(jù)綁定

使用傳統(tǒng)的JQuery或者原生的JavaScript操作一個(gè)DOM元素，需要先獲取該DOM元素對(duì)象，然后再對(duì)這個(gè)對(duì)象進(jìn)行相應(yīng)值的修改等操作。而Vue只需要先把要修改的值綁定到j(luò)s對(duì)象（例如一個(gè)包含多個(gè)子元素的大模塊只需要分配一個(gè)js對(duì)象）上，然后修改這個(gè)js對(duì)象的值，此時(shí)Vue框架就會(huì)自動(dòng)把DOM元素的值進(jìn)行更新，我們只需要關(guān)心js對(duì)象值的修改，不需要關(guān)心DOM操作。

例如下面這個(gè)例子：

    
    
    


    
        
        

        
{{ message }}