好程式設計師web前端分享Vue學習筆記（一）

好程式設計師 web前端分享 Vue學習筆記（一） Vue框架是JS的封裝框架，使用了MVVM模式，即model—view—viewmodel模式, 簡而言之，就是資料與檢視的繫結。

我準備開始學習一些最基礎的 Vue使用，以此入門。

首先在網上下載了 vue.min.js的檔案。

我選擇了 v-html這個標記作為入門，它的作用是能夠將變數中字串型別的html文字以html標記的形式顯示在頁面上。例如：

<div id="div1">

<div v-html="h"></div>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效範圍，不能直接使用body

data: { // 頁面需要的vue資料

h: "<h1>Hello ,world</h1>"

}

});

</script>

哇，不錯，頁面終於出現了 Hello, world，不錯，接下來看看其他的簡單的標籤。

v-if 和v-show ，表示是否顯示頁面內容。

當 if或者show中變數的值為true時，當前控制元件顯示，false則不顯示

<div id="div1">

<img v-show="checked" src="img/3.jpg" width="200" /><br />

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效範圍，不能直接使用body

data: { // 頁面需要的vue資料

checked: false

}

});

</script>

然後，把 v-show換成v-if，原來一樣的。

接下來看看 v-for標籤吧，看起來作用應該是迴圈。

<div id="div1">

<ul>

<li v-for="(f, index) in arr">{{index}} {{f}}</li>

<li v-for="n in 10">{{n}}</li>

<li v-for="(v,k,index) in obj">{{index}}=={{k}}:{{v}}</li>

</ul>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效範圍，不能直接使用body

data: { // 頁面需要的vue資料

arr: ["蘋果", "香蕉", "梨子", "橘子"],

obj: {"name":"mary", "age":20, "sex":"女"}

}

});

</script>

原來，在 vue中的迴圈居然可以這樣用，嗯，今天就到這裡，下次再繼續吧。