怎樣使用vue.js
vue.js的特點就是雙向數據綁定以及它的mvvm（model-view-viewmodel）思想，今天咪咪我就來分享一下vue.js的使用方法。
工具/材料
電腦
Hbuilder
vue.js
操作方法
-
01
打開Hbuilder，新建一個web項目，然后把vue.js插件放入自己指定的文件夾。
-
02
之后，在html界面中引入vue.js插件。
-
03
然后，定義一個div，把這個div作為vue.js的范圍。div可以展示內容，所以可以理解為視圖（view）層面。
-
04
然后定義一個對象model，model里面包含有屬性ms。對象名和屬性名可以自定義。因為待會我們可以一直使用這個對象，所以這個對象可以理解成模型（model）。
-
05
接著我們創建一個Vue實例，通過Vue(),我們就可以把之前的視圖，模型連接起來，所以可以把Vue實例看做是一個viewmodel。在Vue實例中用到了兩個屬性el和data，后面的參數表示的視圖和模型，這里我就連接到div視圖和model模型，也就達到了雙向綁定。
-
06
接著看看雙向綁定的效果。如圖，在div里面書寫表達式{{ms}}，然后保存。
-
07
這時候瀏覽器就會把表達式解析成對應的數據。因為我們在model中定義了ms屬性，并且視圖和模型連接成功，所以可以解析出結果。
-
08
當然，也可以用v-html指令來把屬性綁定到標簽。
-
09
這樣，瀏覽器也可以把它解析成對應的數據喔。并且此時可以看到我在多個地方用到了ms。
-
10
而如果我們修改了model里面的ms的值，然后保存。
-
11
這時候，所有的ms的值就會自動更新喲，這時候雙向數據綁定的效果就體現出來了。
- End
- 發表于 2017-10-09 00:00
- 閱讀 ( 872 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章