好程序員web前端分享菜鳥Vue學習筆記(二)

好程序員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>

好吧,今天就到這裏吧,下次我再試試表單元素的雙向綁定。

相關文章
相關標籤/搜索