Good programmers web front-end share the rookie Vue study notes (2), today the weather is good, and the mood is also good. Recently, learning Vue has become more and more smooth. I will continue to study today and record.
First of all, let's learn about the commonly used v-bind attribute. Its function is to use the value of the variable defined in vue in the attribute.
<div id="div1">
<a v-bind:href="href">Baidu it</a><br/>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var v = new Vue({
el: "#div1",//valid range of vue, body cannot be used directly
data: {//vue data required by the page
href: "https://www.baidu.com"
}
});
</script>
Well, it's very simple, so what if you need to display text and variables together?
<div id="div1">
<a v-bind:href="'check.do?id='+id">View</a>
</div>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
var v = new Vue({
el: "#div1",//valid range of vue, body cannot be used directly
data: {//vue data required by the page
id: 3
}
});
</script>
It turns out that you need to splice strings. It seems that v-bind: can be abbreviated as:, I will try it in the next example.
Next I try to bind the style.
<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",//valid range of vue, body cannot be used directly
data: {//vue data required by the page
showStyle: false
}
});
</script>
Yes, it can really be abbreviated, and the style binding seems to be a bit different from the others.
So, what about the binding of events?
It turns out that v-on is used to bind event operations, and you can also use @ instead of 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",//valid range of vue, body cannot be used directly
data: {//vue data required by the page
btnValue: "click"
},
methods:{//Vue functions that can be used on the page
fn1: function(){
alrt(this.msg);
},
fn2: function(){
this.btnValue = "Click once";
}
}
});
</script>
Okay, let's stop here today, next time I will try the two-way binding of form elements.