IT技術

當前位置 /首頁/遊戲數碼/IT技術/列表

怎樣使用vue.js

的特點就是雙向數據綁定以及它的mvvm(model-view-viewmodel)思想,今天咪咪我就來分享一下的使用方法。

操作方法

(01)開啟Hbuilder,新建一個web項目,然後把插件放入自己指定的檔案夾。

怎樣使用

(02)之後,在html介面中引入插件。

怎樣使用 第2張

(03)然後,定義一個div,把這個div作爲的範圍。div可以展示內容,所以可以理解爲視圖(view)層面。

怎樣使用 第3張

(04)然後定義一個對象model,model裏面包含有屬性ms。對象名和屬性名可以自訂。因爲待會我們可以一直使用這個對象,所以這個對象可以理解成模型(model)。

怎樣使用 第4張

(05)接着我們創建一個Vue實例,透過Vue(),我們就可以把之前的視圖,模型連接起來,所以可以把Vue實例看做是一個viewmodel。在Vue實例中用到了兩個屬性el和data,後面的參數表示的視圖和模型,這裏我就連接到div視圖和model模型,也就達到了雙向綁定。

怎樣使用 第5張

(06)接着看看雙向綁定的效果。如圖,在div裏面書寫表達式{{ms}},然後儲存。

怎樣使用 第6張

(07)這時候瀏覽器就會把表達式解析成對應的數據。因爲我們在model中定義了ms屬性,並且視圖和模型連接成功,所以可以解析出結果。

怎樣使用 第7張

(08)當然,也可以用v-html指令來把屬性綁定到標籤。

怎樣使用 第8張

(09)這樣,瀏覽器也可以把它解析成對應的數據喔。並且此時可以看到我在多個地方用到了ms。

怎樣使用 第9張

(10)而如果我們修改了model裏面的ms的值,然後儲存。

怎樣使用 第10張

(11)這時候,所有的ms的值就會自動更新喲,這時候雙向數據綁定的效果就體現出來了。

怎樣使用 第11張
TAG標籤:vuejs #