vue2.0實(shí)戰(zhàn)之基礎(chǔ)入門(1)
最近公司的H5項(xiàng)目準(zhǔn)備重構(gòu),部門老大說前端使用vue2.0來開發(fā),所以就準(zhǔn)備把整個(gè)項(xiàng)目的開發(fā)過程記錄下來,一方面是為了記錄開發(fā)過程中遇到的坑,另一方面也加強(qiáng)自己寫作的能力。
什么是 Vue?
簡要介紹一下vue,vue就是一個(gè)前端框架,特點(diǎn)是 數(shù)據(jù)雙向綁定,比如說改變input輸入框里的內(nèi)容,就會(huì)自動(dòng)同步更新到頁面上綁定該輸入框的組件的值。
看一下官方對(duì)vue的介紹:
Vue.js,讀音 /vjuː/,和view發(fā)音幾乎一樣,可見重心是在視圖(view)層上的。Vue.js 的目標(biāo)是通過盡可能簡單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
其和jQuery最大的不同點(diǎn)在于jQuery通過操作DOM來改變頁面的顯示,而Vue通過操作數(shù)據(jù)來實(shí)現(xiàn)頁面的更新與展示。下面便是Vue數(shù)據(jù)驅(qū)動(dòng)的概念模型:
Vue.js主要負(fù)責(zé)的是上圖綠色正方體ViewModel的部分,其在View層(即DOM層)與Model層(即JS邏輯層)之間通過ViewModel綁定了DOM Listeners與Data Bingings兩個(gè)相當(dāng)于監(jiān)聽器的東西。
當(dāng)View層的視圖發(fā)生改變時(shí),Vue會(huì)通過DOM Listeners來監(jiān)聽并改變Model層的數(shù)據(jù)。相反,當(dāng)Model層的數(shù)據(jù)發(fā)生改變時(shí),其也會(huì)通過Data Bingings來監(jiān)聽并改變View層的展示。這樣便實(shí)現(xiàn)了一個(gè)雙向數(shù)據(jù)綁定的功能,也是Vue.js數(shù)據(jù)驅(qū)動(dòng)的原理所在。
首先我們來寫一個(gè)hello word!
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue</title> <script src="vue.js"></script> </head> <body> <div id="app"> {{message}} </div> </body> <script> var app = new Vue({ el: '#app', data: { message:'Hello world!' } }) </script> </html>
看似很簡單的實(shí)現(xiàn)一個(gè)字符串的渲染,其實(shí)vue在背后做了很多的操作,通過vue,現(xiàn)在數(shù)據(jù)和DOM已經(jīng)被綁定到了一塊,我們可以通過app.message來修改內(nèi)容,我們可以看到頁面的內(nèi)容也相應(yīng)進(jìn)行了更新。
構(gòu)造器
我們會(huì)發(fā)現(xiàn)每個(gè)頁面都會(huì)new一個(gè)Vue,因?yàn)槊總€(gè)vue.js應(yīng)用都是通過構(gòu)造函數(shù)Vue創(chuàng)建一個(gè)Vue的根實(shí)例也就是這里所說的構(gòu)造器。在實(shí)例化Vue時(shí),需要傳入一個(gè)選項(xiàng)對(duì)象,它可以包含數(shù)據(jù)、模板、掛載元素、方法、生命周期鉤子等選項(xiàng)。全部的選項(xiàng)可以在API 文檔中查看。
vue指令
在Vue項(xiàng)目的開發(fā)中,我們使用的最多的應(yīng)該就屬Vue的指令了。通過Vue提供的常用指令,我們可以淋漓盡致地發(fā)揮Vue數(shù)據(jù)驅(qū)動(dòng)的強(qiáng)大功能。以下便是常用指令的簡單介紹:
(1)v-text: 用于更新綁定元素中的內(nèi)容,類似于jQuery的text()方法
(2)v-html: 用于更新綁定元素中的html內(nèi)容,類似于jQuery的html()方法
(3)v-if: 用于根據(jù)表達(dá)式的值的真假條件渲染元素,如果上圖P3為false則不會(huì)渲染P標(biāo)簽
(4)v-show: 用于根據(jù)表達(dá)式的值的真假條件顯示隱藏元素,切換元素的 display CSS 屬性
(5)v-for: 用于遍歷數(shù)據(jù)渲染元素或模板,如圖中P6為[1,2,3]則會(huì)渲染3個(gè)P標(biāo)簽,內(nèi)容依次為1,2,3
(6)v-on: 用于在元素上綁定事件,圖中在P標(biāo)簽上綁定了showP3的點(diǎn)擊事件
關(guān)于更多的Vue指令可以查看Vue2.0文檔,地址:https://vuefe.cn/api/#指令
屬性與方法
在每個(gè) Vue 實(shí)例中都會(huì)代理其 data 對(duì)象里所有的屬性。
var data = { a: 1 } var vm = new Vue({ data: data }) vm.a === data.a // -> true // 設(shè)置屬性也會(huì)影響到原始數(shù)據(jù) vm.a = 2 data.a // -> 2 // ... 反之亦然 data.a = 3 vm.a // -> 3
除了 data 屬性,Vue實(shí)例暴露了一些有用的實(shí)例屬性與方法。這些屬性與方法都有前綴 $,以便與代理的 data 屬性區(qū)分。具體請(qǐng)查閱API文檔中的實(shí)例屬性一節(jié)。
MVC & MVVM
MVC是一種在后端開發(fā)中廣泛采用的架構(gòu)模式,幾乎所有的知名后端框架都是傳統(tǒng) MVC 的實(shí)現(xiàn),由于其中的 一些小差異,也可以被叫做 MV*
MVC模式的意思是,軟件可以分成三個(gè)部分。
視圖(View):用戶界面。
控制器(Controller):業(yè)務(wù)邏輯
模型(Model):數(shù)據(jù)保存
各部分之間的通信方式如下:
- View 傳送指令到 Controller
- Controller 完成業(yè)務(wù)邏輯后,要求 Model 改變狀態(tài)
- Model 將新的數(shù)據(jù)發(fā)送到 View,用戶得到反饋所有通信都是單向的
MVVM,它采用雙向綁定(data-binding):View的變動(dòng),自動(dòng)反映在 ViewModel,反之亦然。Angular 和 Ember 都采用這種模式。
我們可以直接在一個(gè)html頁面里通過引入Vue.js來直接寫Vue代碼,但是這樣的方式并不常用。因?yàn)槿绻覀兊捻?xiàng)目比較大,項(xiàng)目中會(huì)存在很多頁面,一旦每個(gè)頁面都引入一個(gè)Vue.js或者聲明一個(gè)Vue實(shí)例,這樣非常不利于后期的維護(hù)和代碼的公用,也會(huì)存在實(shí)例名沖突的情況,所以我們需要用到Vue提供的技術(shù)棧來構(gòu)建強(qiáng)大的前端項(xiàng)目。
1.vue-cli:Vue的腳手架工具,用于自動(dòng)生成Vue項(xiàng)目的目錄及文件。
2.vue-router: Vue提供的前端路由工具,利用其我們實(shí)現(xiàn)頁面的路由控制,局部刷新及按需加載,構(gòu)建單頁應(yīng)用,實(shí)現(xiàn)前后端分離。
3.vuex:Vue提供的狀態(tài)管理工具,用于同一管理我們項(xiàng)目中各種數(shù)據(jù)的交互和重用,存儲(chǔ)我們需要用到數(shù)據(jù)對(duì)象。
4.ES6:Javascript的新版本,ECMAScript6的簡稱。利用ES6我們可以簡化我們的JS代碼,同時(shí)利用其提供的強(qiáng)大功能來快速實(shí)現(xiàn)JS邏輯。
5.NPM:node.js的包管理工具,用于同一管理我們前端項(xiàng)目中需要用到的包、插件、工具、命令等,便于開發(fā)和維護(hù)。
6.webpack:一款強(qiáng)大的文件打包工具,可以將我們的前端項(xiàng)目文件同一打包壓縮至js中,并且可以通過vue-loader等加載器實(shí)現(xiàn)語法轉(zhuǎn)化與加載。
7.Babel:一款將ES6代碼轉(zhuǎn)化為瀏覽器兼容的ES5代碼的插件
利用以上等技術(shù),我們便可以開始構(gòu)建我們的Vue項(xiàng)目了。具體內(nèi)容請(qǐng)關(guān)注下期!
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法【基于ES6語法】
這篇文章主要介紹了JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法,通過事件監(jiān)聽結(jié)合定時(shí)器實(shí)現(xiàn)針對(duì)高頻率點(diǎn)擊的限制操作,該功能基于ES6語法實(shí)現(xiàn),需要的朋友可以參考下2017-04-04javascript中l(wèi)ocalStorage本地存儲(chǔ)(新增、刪除、修改)使用詳細(xì)教程
本地存儲(chǔ)localstorage是一種在瀏覽器中存儲(chǔ)數(shù)據(jù)的方式,可以將數(shù)據(jù)保存在用戶的本地計(jì)算機(jī)上,以便在下一次訪問網(wǎng)站時(shí)使用,下面這篇文章主要給大家介紹了關(guān)于javascript中l(wèi)ocalStorage本地存儲(chǔ)(新增、刪除、修改)使用詳細(xì)教程,需要的朋友可以參考下2023-05-05實(shí)現(xiàn)png圖片和png背景透明(支持多瀏覽器)的方法
Firefox和Opera對(duì)PNG的支持非常的好,都是IE卻無視PNG圖片這一特性的“存在”,雖然IE7已經(jīng)支持都是IE6還是不行。2009-09-09JavaScript實(shí)現(xiàn)微信號(hào)隨機(jī)切換代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)微信號(hào)隨機(jī)切換代碼,需要的朋友可以參考下2018-03-03js獲取當(dāng)前日期昨天、今天、明天日期的不同方法總結(jié)
JS中處理日期時(shí)間常用Date對(duì)象,下面這篇文章主要給大家介紹了關(guān)于利用js獲取當(dāng)前日期昨天、今天、明天日期的不同方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11JavaScript 學(xué)習(xí)小結(jié)(適合新手參考)
JavaScript常量又稱字面常量,是固化在程序代碼中的信息。變量的主要作用是存取數(shù)據(jù),提供一個(gè)存取信息的容器。2009-07-07