從零開始學習vue.js.

編程語言 HTML JavaScript CSS JAVASHOP JAVASHOP 2017-11-03

Vue.js是什麼?

  • Vue是一個”MVVM框架(庫)”,和angular類似,相比angular小巧,比較容易上手。

  • Vue是一個構建用戶界面點的漸進式框架,與其他重量級框架不同的是,vue採用自底向上增量開發的設計。

  • Vue.js的核心是一個響應的數據綁定系統,它讓數據與DOM保持同步非常簡單。


下面是javashop小侯同學在學習過程中,寫的幾個小例子。


雙向數據綁定

  • 通過v-model指令可以實現數據的雙向綁定,即View層的數據變化可以直接改變Model層的數據,而Model層的數據改變也可以直接反映在View層;

HTML:

從零開始學習vue.js.

JS:

從零開始學習vue.js.

渲染列表

  • 利用v-for 指令根據一組數組的選項列表進行渲染。V-for 指令需要使用 item in item形式的特殊語法。

Html:

從零開始學習vue.js.

JS:

從零開始學習vue.js.

運行的結果如下:

從零開始學習vue.js.

監聽事件

  • 利用v-on 指令監聽DOM事件觸發一些javascript代碼。(其中v-on:click 和@click是一樣的事件綁定)

Html:

從零開始學習vue.js.

Js:

從零開始學習vue.js.

這樣點擊按鈕就會alert一個1出來。

v-if 與 v-show

  • v-if 是真實的條件渲染,因為它會確保條件快在切換當中適當地銷燬與重建條件快內的事件監聽器和子組件。它也是惰性的:如果在初始渲染時條件為假,則什麼也不做-在條件第一次變為真時才開始局部編譯,相比之下,v-show簡單的多—元素始終被編譯保留,只是簡單地基於css切換。一般來說 ,v-if有更高的切換消耗而v-show有更高的初始渲染消耗。因此,如果需要頻繁切換使用v-show,如果在運行時條件不大可能改變則使用v-if.

Html:

從零開始學習vue.js.

Js:

從零開始學習vue.js.

IsShow 只有為true時,你好啊!~ 才會在瀏覽器中顯示出來。

通過綁定class類名來實現tab選項卡切換

Html:

從零開始學習vue.js.

Js:

從零開始學習vue.js.

根據id的值來顯示div,id=0。


現在處於學習階段,對於vue瞭解不是很透徹,這只是幾個簡單的小案例,比較容易理解,用到的地方也較多。

從零開始學習vue.js.

相關推薦

推薦中...