資訊專欄INFORMATION COLUMN
摘要：二還有一點(diǎn)也是思想不容易轉(zhuǎn)過彎的一點(diǎn)，就是我在學(xué)習(xí)前端時，接觸的思想都是需要我們將者分開，方便維護(hù)。但是在學(xué)習(xí)了接觸了單文件組件之后，世界又變了，又讓我們將同一個組件的放到一個文件中，這樣又便于維護(hù)和復(fù)用，這一臉的懵那啥。
Vue.js 介紹
官方介紹：
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫結(jié)合使用時，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動。
以上為Vue.js官網(wǎng)的介紹。
一、其實(shí)在接觸了Vue.js后給我最大的沖擊就是雙向數(shù)據(jù)綁定功能，以前我們需要讓頁面和用戶產(chǎn)生交互時，通常我們會這樣：
1、獲取DOM節(jié)點(diǎn)，然后獲取到用戶的輸入內(nèi)容。
2、獲取展示的DOM節(jié)點(diǎn)，然后將獲取的內(nèi)容插入到節(jié)點(diǎn)中。
可以看出這么簡單的功能我們卻需要比較多的代碼去實(shí)現(xiàn)，但是在Vue.js中只需要幾行代碼就搞定，看起來也更優(yōu)雅一些。
二、還有一點(diǎn)也是思想不容易轉(zhuǎn)過彎的一點(diǎn)，就是我在學(xué)習(xí)前端時，接觸的思想都是需要我們將HTML CSS JavaScript 3者分開，方便維護(hù)。但是在學(xué)習(xí)了Vue.js接觸了單文件組件之后，世界又變了，又讓我們將同一個組件的HTML CSS JavaScript放到一個文件中，這樣又便于維護(hù)和復(fù)用，這一臉的懵那啥。
說起來組件的思想到不難理解，其實(shí)不管之前的分開文件還是現(xiàn)在的合在一個文件里，都是模塊化的思想，只不過應(yīng)對的時代不同。
早期的時代web還只是web，頁面也并不復(fù)雜，所以提倡的時HTML CSS JavaScript分離，這樣出問題可以很快定位。但是現(xiàn)在的web變成了web應(yīng)用，它不在只是網(wǎng)頁而變成了網(wǎng)頁應(yīng)用，上升到應(yīng)用這以層級，代碼量也是漲了很多倍，如果在沿用之前的思想，那動輒一個文件上萬行，別說解決bug就是找到bug都困難。但是如果切換到單文件組件這個思想時，就容易了。單文件組件思想是指將web中的獨(dú)立的頁面結(jié)構(gòu)部分或者是功能部分抽離出來做一個最小的組件，然后將一地組件像搭積木一樣拼接起來形成一個web應(yīng)用，這樣的做的好處不言而喻：
1、組件與組件之前關(guān)聯(lián)不大，可以最大限度避免組件之前的侵入。
2、最小功能組件，單一的組件文件并不大，如果有問題可以很快找到，并且別人理解起來也容易。
3、因?yàn)槭墙M件與組件搭建的應(yīng)用，所以發(fā)現(xiàn)問題可以很快定位問題。
4、組件也可以復(fù)用，提高代碼的可利用度，提升工作效率。
當(dāng)然有優(yōu)點(diǎn)就有缺點(diǎn)：
1、組件與組件之間做到很好的分離，避免侵入的同時也阻止了它們之間的通信。
2、對于項(xiàng)目初期組件的合理劃分也有一定要求，如果劃分的不好可能還不如之前的方案。
三、最后還有一點(diǎn)，就是數(shù)據(jù)與視圖層的分離。
在之前我們的html和數(shù)據(jù)是摻和到一起的。現(xiàn)在是將數(shù)據(jù)從view中抽離出來，經(jīng)過運(yùn)算再渲染到視圖層。我覺得這也是為什么Vue.js能幫我們省掉了操作DOM的代碼，只要我們將數(shù)據(jù)和view綁定正確，之后數(shù)據(jù)有什么處理都不用管view層，只需要在js中處理數(shù)據(jù)就好，Vue.js會幫你將結(jié)果渲染到view層。這是Vue.js帶給我們的便利。
最后總結(jié)一下：我用自己的話總結(jié)Vue.js，Vue.js是一個擁有數(shù)據(jù)與視圖分離、單文件組件思想和雙向數(shù)據(jù)綁定功能的前端框架。
最近一直在學(xué)習(xí)Vue.js，看過一遍官方文檔之后以為自己會了，但是隔了1天之后再來看，又覺的好陌生，仿佛之前從來沒接觸過，感覺自己的記憶力這么差。
想通過記筆記的形式記住這些東西也不是很成功，是不是自己太笨總記不住知識點(diǎn)，總不能每隔幾天我就過一遍官方文檔吧，這樣學(xué)習(xí)效率太低了。
之前聽人說，你讀完了一本書，并不意味著你真的能懂了，檢驗(yàn)自己是否學(xué)會的好辦法就是用自己的話將內(nèi)容轉(zhuǎn)述出來，這樣才能讓新的知識在腦子里走一圈，和已有的知識縫合在一起。所以我就想將Vue.js中自己選到的知識點(diǎn)轉(zhuǎn)述出來，變成文字，希望這樣有助于將這些知識牢牢的縫合到自己的知識體系中。這是第一篇的內(nèi)容，之后還會有學(xué)習(xí)的體會。
最后，這篇文章只是個人的學(xué)習(xí)筆記，水平有限，如有問題，請聯(lián)系我。謝謝
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88295.html
摘要：是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，采用自底向上增量開發(fā)的設(shè)計(jì)。的核心庫只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。另一方面，完全有能力驅(qū)動采用單文件組件和生態(tài)系統(tǒng)支持的庫開發(fā)的復(fù)雜單頁應(yīng)用。 vue.js ue.js 是一套構(gòu)建用戶界面的漸進(jìn)式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫只關(guān)注視圖層，它不...
摘要：已經(jīng)建立了和數(shù)據(jù)之間的連接，此時任何對的改動，都會觸發(fā)的更新。是一個雙向綁定，意味著當(dāng)在當(dāng)前上所對應(yīng)的數(shù)據(jù)發(fā)生改變時，更新的值當(dāng)用戶在中修改或輸入內(nèi)容的時候，同步上對應(yīng)的數(shù)據(jù)。 Vue.js vue.js不是一個框架，他只是一個提供MVVM風(fēng)格的雙向綁定的庫，專注于UI層面。 在 Vue.js 的定義中，View 就是用戶實(shí)際看到的 DOM 元素，而 Model 就是原生的JavaSc...
摘要：在有時候，組建也可以是原生的元素。簡單的說，就是組件是有結(jié)構(gòu)的有樣式的，有交互效果，有行為，信號量可以存數(shù)據(jù)。組件可以通過屬性開設(shè)置。 一、什么是組件？ 組件是vue.js最強(qiáng)大的功能之一，它可以擴(kuò)展HTML元素，封裝可以重用的代碼. 當(dāng)然，在更高的層面上，組件是自定義元素，vue.js的編譯器為它添加了特殊功能。 在有時候，組建也可以是原生的HTML元素。 簡單的說，就是組件是有結(jié)構(gòu)...
閱讀 2901·2019-08-30 15:55
閱讀 2011·2019-08-30 14:02
閱讀 1248·2019-08-29 15:23
閱讀 1014·2019-08-29 11:27
閱讀 468·2019-08-26 11:43
閱讀 3197·2019-08-26 10:32
閱讀 1261·2019-08-23 14:41
閱讀 3307·2019-08-23 14:41
