Vue basic grammar
1 Introduction
The vue grammar is basically based on the official website, and some have watched a video of a certain kuang at station b and were inspired by it.
<div id="app">
// 取data 中show标签的值
<label>{
{ show }}</label>
</div>
new Vue({
// 根据id获取对应的元素
el: "#app1",
data: {
// 数据存放的地方，show为自定义标签
show: "bitQian adorable.."
}
})
2. Data binding v-bind
You can dynamically bind data to page elements, and the data is written in the data custom tag.
Page elements use v-bind syntax to bind html attributes.
<!-- 给label标签设置标题 -->
<div id="app1">
<label v-bind:title="show">hello vue.js</label>
</div>
new Vue({
el: "#app1",
data: {
show: "bitQian adorable.."
}
})
In production, you can also bind values in the component loop, bind the href attribute of the a tag, etc.
3. v-if || v-else-if || v-else conditional judgment
if-else
<div id="app">
<span v-if="ok">ok</span>
<span v-else>bad</span>
</div>
new Vue({
el: "#app",
data: {
ok: 1==1
}
});
if else if else combination, the bool of type is judged by three equal signs
<div id="app1">
<span v-if="type==='A'">A</span>
<span v-else-if="type==='B'">B</span>
<span v-else>C</span>
</div>
new Vue({
el: "#app1",
data: {
type: "A"
}
});
4. v-for loop
item is each item, items corresponds to the items in data
<div id="app3">
<span v-for="item in items">
item: {
{ item }}, id: {
{ item.id }}, name: {
{ item.name }} <br/>
</span>
</div>
let app3 = new Vue({
el: "#app3",
data: {
// items表示一个数组，里面装了两个人
items: [{
"id": 1, "name": "jack"},
{
'id': 2, "name": "rose"}]
}
});
5. v-on element listens to events
Simply put, it is to bind js events to the element, such as click, mouse hover, keyboard trigger events, etc.
Here we use click event binding to display, reverse the message
<!-- v-on 绑定方法 -->
<div id="app3">
<p>{
{ message }}</p>
<!-- click为点击事件，也可根据场景换成其它事件 -->
<input type="button" v-on:click="reverseMessage" value="reverse">
</div>
new Vue({
el: "#app3",
data: {
message: "hello world!"
},
methods: {
reverseMessage: function () {
// 当我点击按钮时，显示在p标签里面的hello world!反转
this.message = this.message.split("").reverse().join("")
}
}
});
