好程序员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: "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>

好吧，今天就到这里吧，下次我再试试表单元素的双向绑定。