A. Rendering
1. bis {} syntax interpolation braces
2. v-text
3. v-html
<body>
<div ID = "App">
<P>
{{Message}}
</ P>
<P V-text = "text">
</ P>
<P V-HTML = "title">
</ P >
</ div>
</ body>
</ HTML>
<Script the src = "./ JS / vue.js"> </ Script>
<Script>
new new Vue ({
EL: "App #",
Data: {
Message: "I data 1, using {{}} rendered",
text: "I data 2, rendered by V-text",
title: `<H4> I data 3, rendering with v-html, tags can also parses </ h4>`
}
})
</script>
Second, the conditions rendering
1. v-if
2. v-if v-else
3. v-show
Difference 4.v-if and v-show of: v-if this element is false does not exist v-show when this element is false to display: none
<div the above mentioned id = "App">
<the p-v-IF = "BOL">
I can show, because I was to true
</ the p->
<the p-v-IF = "boolean">
</ the p->
<the p-v-the else>
and v-if I can only display one, because it is false so I show
</ the p->
<the p-v-show = "boolean">
Although I do not show, but I just display: none, so I told the v-if little difference
</ P>
</ div>
</ body>
</ HTML>
<Script the src = "./ JS / vue.js"> </ Script>
<Script>
new new Vue ({
EL: "App #",
Data: {
BOL: to true,
Boolean:false
}
})
</script>
Third, loop
1. array cycle
2. Object circulation
<body>
<div id="app">
<ul>
<li v-for = "(item,index) in obj">
{{index}} - {{item}}
</li>
</ul>
<ul>
<li v-for = "(item,index) in arr">
{{index}} - {{item}}
</li>
</ul>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
obj : {
name : "王思聪" ,
})
}
}
talk: "I am super rich"
arr: [ "Louis Koo", "My super handsome"]
</script>
Fourth, the binding properties
<body>
<div the above mentioned id = "App">
<the p-v-the bind: title = "TIT">
This is a dynamic binding properties
</ the p->
<the p-: title = "TIT"> I am a shorthand </ the p->
< / div>
</ body>
</ HTML>
<Script the src = "./ JS / vue.js"> </ Script>
<Script>
new new Vue ({
EL: "App #",
Data: {
TIT: "I active binding properties "
}
})
</ Script>
Fifth, add an event
<body>
<div id="app">
<p>
{{a}}
</p>
<p>
<button v-on:click="add">+1</button>
</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
a : 100
},
methods : {
add(){
this.a++
}
}
})
</script>
Six, input two-way binding
<body>
<div id="app">
<p>
<input type="text" placeholder="请输入..." v-model="a">
</p>
<p>
{{a}}
</p>
</div>
</body>
</html>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#app",
data : {
a :""
},
methods : {
}
})
</script>