Good Programmer Web front-end sharing Vue learning notes (a)

Vue framework is JS packaging framework, the use of MVVM mode, that is, model – view – viewModel mode, in short, is the binding of data and view.

I’m ready to get started by learning some basic Vue usage.

First of all, I downloaded the file of vue.min.js on the Internet.

I chose the V-HTML tag to get started, which is the ability to display HTML text in a variable as a string on the page as an HTML tag. Such as:

</div>

var v = new Vue({

El: “#div1”, // the valid scope of vue, cannot use body directly

Data: {// VUE data required by the page

h: “<h1>Hello ,world</h1>”

}

});

</script>

Wow, nice. Hello World, nice. Now let’s look at some other simple tags.

V-if and v-show: indicates whether to display the page content.

When the value of the variable in if or show is true, the current control is displayed, false is not displayed

</div>

var v = new Vue({

El: “#div1”, // the valid scope of vue, cannot use body directly

Data: {// VUE data required by the page

checked: false

}

});

</script>

Then, replace v-show with V-if, the same thing.

Let’s take a look at the V-for tag, which seems to loop.

<ul>

<li v-for=”(f, index) in arr”>{{index}} {{f}}</li>

<li v-for=”(v,k,index) in obj”>{{index}}=={{k}}:{{v}}</li>

</ul>

</div>

var v = new Vue({

El: “#div1”, // the valid scope of vue, cannot use body directly

Data: {// VUE data required by the page

Arr: [” apple “, “banana “,” pear “, “orange “],

Obj: {“name”:” Mary “, “age”:20, “sex”:” female “}

}

});

</script>

It turns out that loops in VUE can be used like this, well, that’s all for today, and I’ll continue next time.