Vue基礎(chǔ)知識(shí)快速入門教程
一、Vue程序初體驗(yàn)
可以先不去了解Vue框架的發(fā)展歷史、Vue框架有什么特點(diǎn)、Vue是誰(shuí)開發(fā)的,對(duì)我們編寫Vue程序起不到太大的作用,更何況現(xiàn)在說(shuō)了一些特點(diǎn)之后,我們也沒(méi)有辦法徹底理解它,因此我們可以先學(xué)會(huì)用,使用一段時(shí)間之后,回頭來(lái)熟悉一下Vue框架以及它的特點(diǎn)。只需要知道Vue是一個(gè)基于JavaScript(JS)實(shí)現(xiàn)的框架。要使用它就需要先拿到Vue的js文件。
1.1 下載并安裝vue.js
第一步:打開Vue2官網(wǎng),點(diǎn)擊下圖所示的“起步”:
第二步:繼續(xù)點(diǎn)擊下圖所示的“安裝”
第三步:在“安裝”頁(yè)面向下滾動(dòng),直到看到下圖所示位置:
第四步:點(diǎn)擊開發(fā)版本,并下載,如下圖所示:
第五步:安裝Vue:
使用script標(biāo)簽引入vue.js文件。就像這樣:<script src=”xx/vue.js”></script>
1.2 第一個(gè)Vue程序
集成開發(fā)環(huán)境使用VSCode,沒(méi)有的可以安裝一個(gè)
第一個(gè)Vue程序如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>第一個(gè)Vue程序</title> <!-- 安裝vue.js --> <script src="../js/vue.js"></script> </head> <body> <!-- 指定掛載位置 --> <div id="app"></div> <!-- vue程序 --> <script> // 第一步:創(chuàng)建Vue實(shí)例 const vm = new Vue({ template : '<h1>Hello Vue!</h1>' }) // 第二步:將Vue實(shí)例掛載到指定位置 vm.$mount('#app') </script> </body> </html>
運(yùn)行效果:
對(duì)第一個(gè)程序進(jìn)行解釋說(shuō)明:
當(dāng)使用script引入vue.js之后,Vue會(huì)被注冊(cè)為一個(gè)全局變量。就像引入jQuery之后,jQuery也會(huì)被注冊(cè)為一個(gè)全局變量一樣。我們必須new一個(gè)Vue實(shí)例,因?yàn)橥ㄟ^(guò)源碼可以看到this的存在。
Vue的構(gòu)造方法參數(shù)是一個(gè)options配置對(duì)象。配置對(duì)象中有大量Vue預(yù)定義的配置。每一個(gè)配置項(xiàng)都是key:value結(jié)構(gòu)。一個(gè)key:value就是一個(gè)Vue的配置項(xiàng)。template配置項(xiàng):value是一個(gè)模板字符串。在這里編寫符合Vue語(yǔ)法規(guī)則的代碼(Vue有一套自己規(guī)定的語(yǔ)法規(guī)則)。寫在這里的字符串會(huì)被Vue編譯器進(jìn)行編譯,將其轉(zhuǎn)換成瀏覽器能夠識(shí)別的HTML代碼。template稱之為模板。Vue實(shí)例的$mount方法:這個(gè)方法完成掛載動(dòng)作,將Vue實(shí)例掛載到指定位置。也就是說(shuō)將Vue編譯后的HTML代碼渲染到頁(yè)面的指定位置。注意:指定位置的元素被替換。‘#app’的語(yǔ)法類似于CSS中的id選擇器語(yǔ)法。表示將Vue實(shí)例掛載到id=’app’的元素位置。當(dāng)然,如果編寫原生JS也是可以的:vm.$mount(document.getElementById(‘app’))‘#app’是id選擇器,也可以使用其它選擇器,例如類選擇器:’.app’。類選擇器可以匹配多個(gè)元素(位置),這個(gè)時(shí)候Vue只會(huì)選擇第一個(gè)位置進(jìn)行掛載(從上到下第一個(gè))。
1.3 Vue的data配置項(xiàng)
觀察第一個(gè)Vue程序,你會(huì)發(fā)現(xiàn)要完成這種功能,我們完全沒(méi)有必要使用Vue,直接在body標(biāo)簽中編寫以下代碼即可:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>沒(méi)必要使用Vue呀</title> </head> <body> <h1>Hello Vue!</h1> </body> </html>
在Vue中有一個(gè)data配置項(xiàng),可以幫助動(dòng)態(tài)的渲染頁(yè)面代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue選項(xiàng)data</title> <!-- 安裝vue --> <script src="../js/vue.js"></script> </head> <body> <!-- 指定掛載位置 --> <div id="app"></div> <!-- vue代碼 --> <script> new Vue({ data : { message : 'Hello Vue!' }, template : '<h1>{{message}}</h1>' }).$mount('#app') </script> </body> </html>
運(yùn)行結(jié)果如下:
對(duì)以上程序進(jìn)行解釋說(shuō)明:
1.data是Vue 實(shí)例的數(shù)據(jù)對(duì)象。并且這個(gè)對(duì)象必須是純粹的對(duì)象 (含有零個(gè)或多個(gè)的 key/value 對(duì))。
2.{{message}}是Vue框架自己搞的一個(gè)語(yǔ)法,叫做插值語(yǔ)法(或者叫做胡子語(yǔ)法),可以從data中根據(jù)key來(lái)獲取value,并且將value插入到對(duì)應(yīng)的位置。
3.data可以是以下幾種情況,但不限于這幾種情況:
data : { name : '老杜', age : 18 } //取值: {{name}} {{age}} data : { user : { name : '老杜', age : 18 } } //取值: {{user.name}} {{user.age}} data : { colors : ['紅色', '黃色', '藍(lán)色'] } //取值: {{colors[0]}} {{colors[1]}} {{colors[2]}}
4.以上程序執(zhí)行原理:Vue編譯器對(duì)template進(jìn)行編譯,遇到胡子{{}}時(shí)從data中取數(shù)據(jù),然后將取到的數(shù)據(jù)插到對(duì)應(yīng)的位置。生成一段HTML代碼,最終將HTML渲染到掛載位置,呈現(xiàn)。
5.當(dāng)data發(fā)生改變時(shí),template模板會(huì)被重新編譯,重新渲染。
1.4 Vue的template配置項(xiàng)
template只能有一個(gè)根元素。 請(qǐng)看如下代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue選項(xiàng)template</title> <!-- 安裝vue --> <script src="../js/vue.js"></script> </head> <body> <!-- 指定掛載位置 --> <div id="app"></div> <!-- vue程序 --> <script> new Vue({ template : '<h1>{{message}}</h1><h1>{{name}}</h1>', data : { message : 'Hello Vue!', name : '動(dòng)力節(jié)點(diǎn)老杜' } }).$mount('#app') </script> </body> </html>
執(zhí)行結(jié)果
控制臺(tái)錯(cuò)誤信息:組件模板應(yīng)該只能包括一個(gè)根元素。 所以如果使用template的話,根元素只能有一個(gè)。 代碼修改如下:
new Vue({ template : '<div><h1>{{message}}</h1><h1>{{name}}</h1></div>', data : { message : 'Hello Vue!', name : '動(dòng)力節(jié)點(diǎn)老杜' } }).$mount('#app')
運(yùn)行結(jié)果
template編譯后進(jìn)行渲染時(shí)會(huì)將掛載位置的元素替換。
template后面的代碼如果需要換行的話,建議將代碼寫到``符號(hào)當(dāng)中,不建議使用 + 進(jìn)行字符串的拼接。 代碼修改如下:
new Vue({ template : ` <div> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> `, data : { message : 'Hello Vue!', name : '動(dòng)力節(jié)點(diǎn)老杜' } }).$mount('#app')
運(yùn)行結(jié)果
template配置項(xiàng)可以省略,將其直接編寫到HTML代碼當(dāng)中。 代碼如下:
<!-- 指定掛載位置 --> <div id="app"> <div> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> </div> <!-- vue程序 --> <script> new Vue({ data : { message : 'Hello Vue!', name : '動(dòng)力節(jié)點(diǎn)老杜' } }).$mount('#app') </script>
運(yùn)行結(jié)果
需要注意兩點(diǎn): 第一:這種方式不會(huì)產(chǎn)生像template那種的元素替換。
第二:雖然是直接寫到HTML代碼當(dāng)中的,但以上程序中第3~6行已經(jīng)不是HTML代碼了,它是具有Vue語(yǔ)法特色的模板語(yǔ)句。這段內(nèi)容在data發(fā)生改變后都是要重新編譯的。
將Vue實(shí)例掛載時(shí),也可以不用$mount方法,可以使用Vue的el配置項(xiàng)。 代碼如下:
<!-- 指定掛載位置 --> <div id="app"> <div> <h1>{{message}}</h1> <h1>{{name}}</h1> </div> </div> <!-- vue程序 --> <script> new Vue({ data : { message : 'Hello Vue!', name : '動(dòng)力節(jié)點(diǎn)老杜' }, el : '#app' }) </script>
執(zhí)行結(jié)果
el是element單詞的縮寫,翻譯為“元素”,el配置項(xiàng)主要是用來(lái)指定Vue實(shí)例關(guān)聯(lián)的容器。也就是說(shuō)Vue所管理的容器是哪個(gè)。
到此這篇關(guān)于Vue基礎(chǔ)知識(shí)快速入門教程的文章就介紹到這了,更多相關(guān)Vue基礎(chǔ)知識(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題
這篇文章主要介紹了解決vue自定義指令導(dǎo)致的內(nèi)存泄漏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08利用nginx部署vue項(xiàng)目的全過(guò)程
今天要用到服務(wù)器nginx,還需要把自己的vue的項(xiàng)目部署到服務(wù)器上去所以就寫一下記錄下來(lái),下面這篇文章主要給大家介紹了關(guān)于利用nginx部署vue項(xiàng)目的相關(guān)資料,需要的朋友可以參考下2022-03-03vue組件從開發(fā)到發(fā)布的實(shí)現(xiàn)步驟
這篇文章主要介紹了vue組件從開發(fā)到發(fā)布的實(shí)現(xiàn)步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果
本文主要介紹了vue項(xiàng)目中實(shí)現(xiàn)el-dialog組件可拖拽效果,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率
這篇文章主要為大家詳細(xì)介紹了Vue2.0實(shí)現(xiàn)自適應(yīng)分辨率,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue展示dicom文件醫(yī)療系統(tǒng)的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒加載,需要的朋友可以參考下2018-08-08