Vue.js基礎(chǔ)學(xué)習(xí)

Vue.js的基本介紹

??? 輕量級的前端界面框架，是一套構(gòu)建用戶界面的漸進(jìn)式框架擅这，與其他重量級框架不同齐板，Vue是采用白底向上增量開發(fā)的設(shè)計(jì)。Vue的核心層只關(guān)注視圖惧笛。

Vue.js的功能

1.數(shù)據(jù)渲染/數(shù)據(jù)同步 （實(shí)現(xiàn)了將js的文件从媚、數(shù)據(jù)如何同步，渲染到html文件中）

HTML文件

患整、

?? JS文件

將JS中的數(shù)據(jù)同步渲染到html文件上面拜效，可以稱為聲明式渲染

渲染結(jié)果

2.條件與循環(huán)

渲染條件：可以根據(jù)標(biāo)簽的屬性來進(jìn)行設(shè)置喷众，然后確定內(nèi)容的樣式。

HTML文件

JS文件

效果圖

渲染循環(huán)：主要用于展示列表紧憾。

HTML文件

JS文件

效果圖

3.組件化/模塊化 （一個項(xiàng)目可以以組件為單位進(jìn)行模塊化的開發(fā)）

這里我們引入一個組件模塊化到千，如果我們按照上述效果渲染一個能夠隨著點(diǎn)擊變化的按鈕。

JS文件

HTML文件

效果圖

如果要實(shí)現(xiàn)這個按鈕的復(fù)用赴穗，就會出現(xiàn)html文件里面需要寫多個button的標(biāo)簽憔四，還會使得message的值沒點(diǎn)一次多個按鈕都會變化

效果圖

這個時候引入組件，每一個組件定義一個標(biāo)簽使他相互獨(dú)立般眉。

當(dāng)一個組件被定義了赵，data必須聲明為返回一個初始數(shù)據(jù)對象的函數(shù)，因?yàn)榻M件可能被用來創(chuàng)建多個實(shí)例煤篙。如果data仍然是一個純粹的對象斟览，則所有的實(shí)例將共享引用同一個數(shù)據(jù)對象！通過提供data函數(shù)辑奈，每次創(chuàng)建一個新實(shí)例后苛茂，我們能夠調(diào)用data函數(shù)，從而返回初始數(shù)據(jù)的一個全新副本數(shù)據(jù)對象鸠窗。

JS文件

HTML文件

初始化插件

隨點(diǎn)擊數(shù)變化變化

多個組件的使用只需要在div多加入幾個插件所定義的標(biāo)簽

JS文件

初始化

點(diǎn)擊后

點(diǎn)擊事件

組件中的數(shù)字我們用message變量妓羊，用函數(shù)去維護(hù)message，說到底還是一個message的值稍计，只不過函數(shù)將他們復(fù)制了一份躁绸，如果我們要將變量變?yōu)椴煌闹担缫粋€列表里獲得數(shù)據(jù)填入到組件中臣嚣。則需要引入一個prop净刮。

注意：如果按照下圖的JS文件會出現(xiàn)報(bào)錯信息，即插件的標(biāo)簽無法被正確的實(shí)例化硅则，因?yàn)榫幾g時先加載了New Vue的類淹父，類中在尋找到demo的div時里面的button-counter的標(biāo)簽還沒有被加載，所以報(bào)錯怎虫。所以正確的應(yīng)該如上圖的先寫組件的代碼暑认，再寫Vue的實(shí)例類

JS文件

報(bào)錯信息

3.擴(kuò)展功能

?? ①路由

?? 在前端的地址欄了可以通過地址的不同來切換不同的頁面

?? ②Ajax

?? ③數(shù)據(jù)流管理

Vue.js的特點(diǎn)

1.響應(yīng)式-雙向綁定

數(shù)據(jù)與展示的雙向綁定，傳統(tǒng)的js和html文件中由很多交互大审，可能時html想js傳遞數(shù)據(jù)蘸际，也有可有時js獲取html文件的字段，但是如果這些交互復(fù)雜起來的時候徒扶，就會出現(xiàn)混論筒饰，Vue.js就可以很好的解決這個問題锅铅。

JS文件

HTML文件

顯示結(jié)果

變化結(jié)果

當(dāng)你在input的框內(nèi)輸入文本時，上面的文本<p>內(nèi)的內(nèi)容一起變化。

2.組件化

已經(jīng)演示

有待補(bǔ)充

Vue.js的實(shí)例

1.數(shù)據(jù)與方法

當(dāng)一個Vue實(shí)例被創(chuàng)建時囚巴，其中所擁有的選項(xiàng)中的data項(xiàng)時存放相應(yīng)數(shù)據(jù)的，再data中的參數(shù)時響應(yīng)式案铺，也就是說修改data中的參數(shù)能夠使頁面中用到這個參數(shù)的位置被重新渲染弧呐，如果參數(shù)沒有再data中則不會被重新渲染。

示例圖

但是可以在參數(shù)的后面添加方法Object.freeze()使得在data中的參數(shù)不再被追蹤響應(yīng)士败。

表示的是點(diǎn)擊之前我們的tode的值是before闯两，點(diǎn)擊按鈕后變?yōu)閍fter

? HTML文件

JS文件

點(diǎn)擊前

點(diǎn)擊后

這樣就顯示動態(tài)綁定，現(xiàn)在我們加入一個object.freeze(參數(shù))的方法谅将。

就會一直不變漾狼。

Vue.js的打包輸出問題

在ideal中將寫好的組件輸出則需要執(zhí)行npm run build的命令

在當(dāng)前項(xiàng)目的文件夾下會輸出一個dist文件夾，存在一個資源static的文件夾饥臂，和可打開的html文件

效果圖

注意：如果你直接打開index.html文件會發(fā)生只加載了頁面逊躁，沒有加載vue資源，你需要在index里面修改資源路徑隅熙。添加這個點(diǎn)返回上級菜單再訪問才可以可以實(shí)現(xiàn)效果

示例圖