怎么把Vue.js融會(huì)貫通
這篇文章給大家介紹怎么把Vue.js融會(huì)貫通，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。
創(chuàng)新互聯(lián)建站堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的石泉網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
Vue是一個(gè)專注于前端UI的框架。它的主要能力是：
聲明式綁定。包括數(shù)據(jù)綁定、事件綁定
基于組件的編程。讓開(kāi)發(fā)者可以把整個(gè)應(yīng)用分為若干組件，分而治之
本篇文字會(huì)講解聲明式綁定，并且會(huì)談及Vue的引入、數(shù)據(jù)綁定、事件綁定、Vue實(shí)例、指令。特別的，同樣的案例，我也用來(lái)講解Vue最為引以為傲的組件技術(shù)。案例是一個(gè)微小的叫做counter的應(yīng)用，看起來(lái)是這樣的：
有一個(gè)標(biāo)簽顯示數(shù)字0，當(dāng)點(diǎn)擊按鈕“+”，數(shù)字會(huì)每次加1。代碼如下。你可以直接保存代碼到html文件中，然后用瀏覽器打開(kāi)，如果是IE的話必須是IE8或者或以上版本：
{{count}} +
你可以實(shí)際的操作，看到按鈕和數(shù)字的互動(dòng)變化。然后我們來(lái)看Vue如何做到的。
首先，必須引入Vue.js庫(kù)。我們使用
這一次，我們見(jiàn)到了新的內(nèi)容:
Vue的新屬性template。它的值用來(lái)加載html模板代碼。本案例中，就是放置本來(lái)在主HTML內(nèi)的兩個(gè)標(biāo)簽。需要注意的是，它們之外包括了一個(gè)div標(biāo)簽。因?yàn)閂ue2.0版本要求作為模板的html必須是單根的。
Vue的新屬性components，用來(lái)注冊(cè)一個(gè)局部組件。正是在此處，組件counter被注冊(cè)，從而在html標(biāo)簽內(nèi)可以直接使用來(lái)引用組件counter的。
盡管這個(gè)案例太小了，還看不出太大的好處。但是這樣的組件引入，讓相關(guān)性強(qiáng)的html元素和對(duì)應(yīng)的數(shù)據(jù)、代碼內(nèi)聚到了一起，這是符合軟件工程原則的、因此是值得鼓勵(lì)的行為。
新組件完全可以分離到另外一個(gè)script文件內(nèi)，從而達(dá)到不僅僅是邏輯上的代碼和主html分離，也做到了物理上的分離。
另外，使用template在代碼內(nèi)些html，還是比較煩人：
你得小心的在外層使用單引號(hào)，在內(nèi)部使用雙引號(hào)
混雜js和html觀感不佳
此時(shí)，可以使用的替代方法：
render函數(shù)。實(shí)際上所有的template字符串本來(lái)在內(nèi)部就被編譯為render函數(shù)的
單文件組件技術(shù)
或者vue支持的JSX。
當(dāng)然，后兩種方法就需要轉(zhuǎn)譯器和打包工具的配合。比如Babel和webpack的。
關(guān)于怎么把Vue.js融會(huì)貫通就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。
網(wǎng)站題目：怎么把Vue.js融會(huì)貫通
文章轉(zhuǎn)載：
http://weahome.cn/article/piephj.html
重慶分公司
重慶分公司
