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

好程式設計師 web前端分享 菜鳥 Vue學習筆記（二） ， 今天天氣不錯，心情也不錯，最近學習 Vue越來越順利了，今天接著學習，接著記錄。

首先，來學習下常用的 v-bind屬性，它的作用是在屬性中使用vue中定義的變數的值。

<div id="div1">

<a v-bind:href="href">百度一下</a><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資料

href: "

}

});

</script>

恩，很簡單嘛，那麼如果需要顯示文字和變數一起怎麼辦呢？

<div id="div1">

<a v-bind:href="'check.do?id='+id">檢視</a>

</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資料

id: 3

}

});

</script>

原來如此，需要拼接字串啊，好像 v-bind:可以簡寫為:，我在下個例子中試試。

接下來我試試樣式的繫結。

<div id="div1">

<img v-show="checked" :class="{img1:showStyle}" src="img/3.jpg" /><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資料

showStyle: false

}

});

</script>

不錯，真的可以簡寫，而且樣式的繫結好像跟其他的有點不一樣。

那麼，事件的繫結呢？

原來是使用 v-on來繫結事件操作，而且還可以使用@代替v-on。

<div id="div1">

<input type="button" :value="btnValue" v-on:click="fn1()" @mouseover="fn2()"/>

</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資料

btnValue: "點選"

},

methods:{ // 頁面可使用的vue的函式

fn1: function(){

alert(this.msg);

},

fn2: function(){

this.btnValue = "點選一下";

}

}

});

</script>

好吧，今天就到這裡吧，下次我再試試表單元素的雙向繫結。