武道至尊帝临小说,大主宰天蚕土豆小说

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

一篇看完就把Vue.js融會(huì)貫通

Vue是一個(gè)專注于前端UI的框架。它的主要能力是：

本篇文字會(huì)講解聲明式綁定，并且會(huì)談及Vue的引入、數(shù)據(jù)綁定、事件綁定、Vue實(shí)例、指令。特別的，同樣的案例，我也用來講解Vue最為引以為傲的組件技術(shù)。案例是一個(gè)微小的叫做counter的應(yīng)用，看起來是這樣的：

有一個(gè)標(biāo)簽顯示數(shù)字0，當(dāng)點(diǎn)擊按鈕“+”，數(shù)字會(huì)每次加1。代碼如下。你可以直接保存代碼到html文件中，然后用瀏覽器打開，如果是IE的話必須是IE8或者或以上版本：

 
 
  
  
  
  
  
      {{count}}
  
      +

你可以實(shí)際的操作，看到按鈕和數(shù)字的互動(dòng)變化。然后我們來看Vue如何做到的。

首先，必須引入Vue.js庫(kù)。我們使用

這一次，我們見到了新的內(nèi)容:

Vue的新屬性template。它的值用來加載html模板代碼。本案例中，就是放置本來在主HTML內(nèi)的兩個(gè)標(biāo)簽。需要注意的是，它們之外包括了一個(gè)div標(biāo)簽。因?yàn)閂ue2.0版本要求作為模板的html必須是單根的。
Vue的新屬性components，用來注冊(cè)一個(gè)局部組件。正是在此處，組件counter被注冊(cè)，從而在html標(biāo)簽內(nè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，還是比較煩人：

此時(shí)，可以使用的替代方法：

當(dāng)然，后兩種方法就需要轉(zhuǎn)譯器和打包工具的配合。比如Babel和webpack的。這些內(nèi)容，請(qǐng)搜索參考

暫時(shí)不在討論之列。

標(biāo)題名稱：一篇看完就把Vue.js融會(huì)貫通
URL地址：http://fisionsoft.com.cn/article/coechsh.html