Good programmers web front-end share rookie Vue study notes (2)

Good programmers web front-end share rookie Vue study notes (2)

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.