vue example of the entry
1, statement shown render {{message}}
2, binding events v-bind
3, the control program whether a handover v-if
4, v-for rendering cycle
5, v-on click event
6, two-way data binding v-model
A statement illustrating rendering {{message}} Example:
1 <template>
2 <div id="app">
3 <h1>
4 <p>{{message}}</p>
5 </h1>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 name: 'app',
12 data(){
13 return{
14 message:'素素最棒！'
15 }
16 },
17 }
18 </script>
19
20 <style scoped>
21 #app {
22 text-align: center;
23 color: red;
24 margin-top: 60px;
25 font-size: 60px;
26 }
27 </style>
Results are as follows:
Second, the binding events v-bind cases:
<Template>
<div the above mentioned id = "App">
<h1>
<the p-v-the bind: title = "msg">
prompt hover for a few seconds to view the dynamic binding!
</ the p->
</ h1>
</ div>
</ Template>
<Script>
Export default {
name: 'App' ,
the Data () {
return {
msg: 'Today you eat breakfast yet' + new new a Date (). toLocaleString ()
}
},
}
</ Script>
<style scoped>
#app {
text - align = left: Center;
Color: Red;
margin - Top:size: 60px;
}
</style>
Display as follows:
Please hover for a few seconds, there will be prompt.
Third, the control program whether a handover v- for Example:
1 <template>
2 <div id="app">
3 <h1>
4 <p v-if="showMsg">大家好！</p>
5 </h1>
6 </div>
7 </template>
8
9 <script>
10 export default {
11 name: 'app',
12 data(){
13 return{
14 showMsg:true
15 }
16 },
17 }
18 </script>
19
20 <style scoped>
21 #app {
22 text-align: center;
23 color: red;
24 margin-top: 60px;
25 font-size: 60px;
26 }
27 </style>
Results are as follows:
Four, rendering circulation v-for Example:
1 <template>
2 <div id="app">
3 <h3>
4 <ol>
5 <li v-for="list in lists">{{list.text}}</li>
6 </ol>
7 </h3>
8 </div>
9 </template>
10
11 <script>
12 export default {
13 name: "app",
14 data() {
15 return {
16 lists: [
17 { text: "天气晴朗，阳光明媚" },
18 {Text: "for a date!" },
. 19 {text: "? Is not it" }
20 is ]
21 is };
22 is }
23 is };
24 </ Script>
25
26 is <style scoped>
27 #app {
28 TEXT- align = left: Center;
29 Color: Red;
30 margin- Top: 60px;
31 is font- size: 60px;
32 }
33 is </ style>
Results are as follows:
Fifth, the click event v-on: For example:
1 <template>
2 <div id="app">
3 <h1>
4 <p>{{message}}</p>
5 </h1>
6 <button v-on:click='msg'>素素最美！</button>
7 </div>
8 </template>
9
10 <script>
11 export default {
12 name: 'app',
13 data(){
14 return{
15 message:'素素最棒！'
16 }
17 },
18 methods:{
19 msg:function(){
20 this.message = this.message.split('').reverse().join('')
21 }
22 }
23 }
24 </script>
25
26 <style scoped>
27 #app {
28 text-align: center;
29 color: red;
30 margin-top: 60px;
31 font-size: 60px;
32 }
33 </style>
After clicking the button, the letters can be reversed, changed
Six, two-way data binding v-model Example:
1 <template>
2 <div id="app">
3 <h1>{{msg}}</h1>
4 <input v-model="msg">
5 </div>
6 </template>
7
8 <script>
9 export default {
10 name: "app",
11 data() {
12 return {
13 msg:'海阔天空！'
14 };
15 }
16 };
17 </script>
18
19 <style scoped>
20 #app {
21 text-align: center;
22 color: red;
23 margin-top: 60px;
24 font-size: 60px;
25 }
26 </style>
Results are as follows:
Try to enter something in the input box to see the effect, for example:
