- Vue.js 3.x從入門到精通(視頻教學(xué)版)
- 李小威
- 993字
- 2023-07-17 19:58:49
1.3 Vue.js概述
Vue.js是一套構(gòu)建前端的MVVM框架,它集合了眾多優(yōu)秀主流框架設(shè)計(jì)的思想,輕量、數(shù)據(jù)驅(qū)動(dòng)(默認(rèn)單向數(shù)據(jù)綁定,但也支持雙向數(shù)據(jù)綁定)、學(xué)習(xí)成本低,且可與Webpack/Gulp構(gòu)建工具結(jié)合,以實(shí)現(xiàn)Web組件化開發(fā)、構(gòu)建和部署等。
Vue.js本身就擁有一套較為成熟的生態(tài)系統(tǒng):Vue+vue-router+Vuex+Webpack+Sass/Less,不僅可以滿足小的前端項(xiàng)目開發(fā),也能完全勝任大型的前端應(yīng)用開發(fā),包括單頁面應(yīng)用和多頁面應(yīng)用等。Vue.js可實(shí)現(xiàn)前端頁面和后端業(yè)務(wù)分離、快速開發(fā)、單元測試、構(gòu)建優(yōu)化、部署等。
提到前端框架,當(dāng)下比較流行的有Vue.js、React.js和Angular.js。Vue.js以容易上手的API、不俗的性能、漸進(jìn)式的特性和活躍的社區(qū)從中脫穎而出。截至目前,Vue.js在GitHub上的star數(shù)已經(jīng)超過了其他兩個(gè)框架,成為最熱門的框架。
Vue.js的核心庫只關(guān)注視圖層,不僅易于上手,還便于與第三方庫或既有項(xiàng)目整合。另一方面,當(dāng)與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時(shí),Vue.js完全能夠?yàn)閺?fù)雜的單頁應(yīng)用提供驅(qū)動(dòng)。
Vue.js的目標(biāo)就是通過盡可能簡單的API實(shí)現(xiàn)響應(yīng)、數(shù)據(jù)綁定和組合的視圖組件,核心是一個(gè)響應(yīng)的數(shù)據(jù)綁定系統(tǒng)。Vue.js被定義成一個(gè)用來開發(fā)Web界面的前端框架,是一個(gè)非常輕量級(jí)的工具。使用Vue.js可以讓W(xué)eb開發(fā)變得簡單,同時(shí)也顛覆了傳統(tǒng)前端開發(fā)的模式。
Vue.js是漸進(jìn)式的JavaScript框架,如果已經(jīng)有一個(gè)現(xiàn)成的服務(wù)端應(yīng)用,可以將Vue.js作為該應(yīng)用的一部分嵌入其中,帶來更加豐富的交互體驗(yàn)。或者,如果希望將更多的業(yè)務(wù)邏輯放到前端來實(shí)現(xiàn),那么Vue.js的核心庫及其生態(tài)系統(tǒng)也可以滿足用戶的各種需求。
和其他前端框架一樣,Vue.js允許將一個(gè)網(wǎng)頁分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS和JavaScript,如圖1-3所示,以用來渲染網(wǎng)頁中相應(yīng)的地方。
這種把網(wǎng)頁分割成可復(fù)用組件的方式就是框架“組件化”的思想。

圖1-3 組件化
Vue.js組件化的理念和React異曲同工—一切皆組件。Vue.js可以將任意封裝好的代碼注冊(cè)成組件,例如Vue.component('example', Example),可以在模板中以標(biāo)簽的形式調(diào)用。
Example是一個(gè)對(duì)象,組件的參數(shù)配置經(jīng)常使用到的是template,它是組件將要渲染的HTML內(nèi)容。
例如,example組件的調(diào)用方式如下:
<body> <hi>我是主頁</hi> <!-- 在模板中調(diào)用example組件 -->s <example></example> <p>歡迎訪問我們的網(wǎng)站</p> </body>
如果組件設(shè)計(jì)合理,在很大程度上可以減少重復(fù)開發(fā),而且配合Vue.js的單文件組件(vue-loader),可以將一個(gè)組件的CSS、HTML和JavaScript都寫在一個(gè)文件里,做到模塊化的開發(fā)。此外,Vue.js也可以與vue-router和vue-resource插件配合起來,以支持路由和異步請(qǐng)求,這樣就滿足了開發(fā)SPA的基本條件。
在Vue.js中,單文件組件是指一個(gè)后綴名為.vue的文件,它可以由各種各樣的組件組成,大至一個(gè)頁面組件,小至一個(gè)按鈕組件。在后面的章節(jié)將詳細(xì)介紹單文件組件的實(shí)現(xiàn)。
- Spring 5.0 Microservices(Second Edition)
- 潮流:UI設(shè)計(jì)必修課
- CockroachDB權(quán)威指南
- YARN Essentials
- 手把手教你學(xué)C語言
- Java:High-Performance Apps with Java 9
- Android應(yīng)用案例開發(fā)大全(第二版)
- Learning Unreal Engine Android Game Development
- 智能手機(jī)APP UI設(shè)計(jì)與應(yīng)用任務(wù)教程
- 零基礎(chǔ)學(xué)C語言(升級(jí)版)
- 跟戴銘學(xué)iOS編程:理順核心知識(shí)點(diǎn)
- SignalR:Real-time Application Development(Second Edition)
- PhoneGap 4 Mobile Application Development Cookbook
- 利用Python駕馭Stable Diffusion:原理解析、擴(kuò)展開發(fā)與高級(jí)應(yīng)用(智能系統(tǒng)與技術(shù)叢書)
- JavaScript全棧開發(fā)