1. 程式人生 > >Vue.js 第一篇學習筆記

Vue.js 第一篇學習筆記

lock prev 自動 筆記 避免 his 方便 code span

最近開始學習Vue, 比預計的難度要低太多了,大概是了解了一些JAVA和設計模式的結果吧。haha ...下文都是個人理解,不確定是否是事實。

模模糊糊地覺得 Vue的確比jQuery要方便。

Vue ,貌似是這樣的。
先初始化,new Vue()
內部是一個對象,
new Vue({})
對象可以有3種或者更多子對象。————表示目前我只看到3種。
分別為
1、el:{}, ——————用ID等?綁定HTML上的元素,貌似也是用CSS選擇器?

2、data:{}, ——————似乎是需要裝靜態變量,string之類的樣子格式例如 :myString:"String",

3、methods:{} ——————大概內部裝各種function。格式例如 :myFunc:function(){} // 還是對象內的函數的格式的哦。

值得註意的是,使用this可以獲取Vue內部的任何變量 varible。但是如果在function 內部對this.varible有定義的話,會覆蓋data裏面的。可以用v-once 避免覆蓋。

定義靜態變量是在data裏面,比如:


data:{ xx
= 0, yy=0 }, methods:{ updataX:function(){ this.xx++; }, updataY:function(){ this.yy++; } }

流程貌似是 functionupdataX,Y 操作 xx,yy 這類靜態變量,然後結果就自動更新到HTML頁面上————大概就是這樣所以不需要操作DOM。

HTML:


  <p>
  {{xx}}{{yy}}
  </p>



<!--HTML上使用的Vue自帶的方法:

v-html Vue的內容作為HTML使用。

v-bind 綁定屬性到Vue的內容

v-once 保持data裏面的內容不被覆蓋。

v-on:click="function" , 為這個元素綁定onclick 等等

Vue 自帶的變量$event 也可以作為參數傳遞給函數的。只要在綁定的時候加($event )就可以用諸如 e.clientX ; e.stopPropagation 之類的了。

Vue 自帶stopPropagation的功能,一個栗子: v-on:click="updataX(arg,$event).stop"

還有preventDefault, v-on:mouseover="function($event).prevent"

-->

Vue.js 第一篇學習筆記