好程序員web前端分享菜鳥Vue學習筆記(二),今每天氣不錯,心情也不錯,最近學習Vue愈來愈順利了,今天接着學習,接着記錄。javascript
首先,來學習下經常使用的v-bind屬性,它的做用是在屬性中使用vue中定義的變量的值。前端
<div id="div1">vue
<a v-bind:href="href">百度一下</a><br />java
</div>程序員
<script type="text/javascript" src="js/vue.min.js"></script>web
<script type="text/javascript">函數
var v = new Vue({學習
el: "#div1", // vue的有效範圍,不能直接使用bodythis
data: { // 頁面須要的vue數據雙向綁定
href: "https://www.baidu.com"
}
});
</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>
好吧,今天就到這裏吧,下次我再試試表單元素的雙向綁定。