小小千想和您聊一聊

当前位置: 首页> 技术分享> 菜鸟Vue学习笔记(二)

菜鸟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>


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

上一篇:HTML5工具初识之网页编辑器

下一篇:小白学Java之Java简介及应用场景

QQ技术交流群

千锋HTML5官方①群
791201477

加入群聊