- This paper provides a technical summary for the beginners of Vue. All the codes need the support of vue.js or the introduction of cdn
1, Basic instructions in Vue framework
1,v-bind
v-bind is an instruction for dynamically binding data, such as
<a v-bind:href="url">...</a>
Then, I can change the value of the url through vue to switch between different href.
<script>
new vue({
el:(Your div Of id)，
data:function(){
return{
url:'www.csdn.com'
}
}
})
</script>2,v-for
The sum of v-for loops is approximately x in y, for example
1 <div id="box">
2 <ul>
3 <!--ng-repeat-->
4 <li v-for="item in arr"> //The item here is a parameter that can be modified
5 <span>{{item.name}}</span>
6 <span>{{item.age}}</span>
7 </li>
8 </ul>
9 </div>
10 <script type="text/javascript">
11 new Vue({
12 el:'#box',
13 data(){
14 return{
15 // arr:['module','views','controlle','aaaaa']
16 arr:[
17 {"name":"xiaohong1","age":12},
18 {"name":"xiaohong2","age":12},
19 {"name":"xiaohong3","age":12},
20 {"name":"xiaohong4","age":12}
21 ]
22 }
23 }
24 })
25 </script>3,v-if
The difference between v-if and v-show is that v-if determines whether to insert the element through the parameters in vue, and v-show indicates whether to display the element
< p V-IF = "seen" > now you see me</p>
< p v-show = "seen" > now you see me</p>
When seen is false, it does not exist in the source code
< p V-IF = "seen" > now you see me</p>
4,v-model
v-model is a very important instruction. It is similar to v-bind, but it is bidirectional, such as
<template>
<div class="PI">
<form id="personal_info">
<ul>
<li><span>Full name:</span><input v-model:value="perName"></li>
<li><span>Mail:</span><input v-model:value="perEmail"></li>
<li><span>Telephone:</span><input v-model:value="perPhone"></li>
<li><span>Instant messaging tools:</span><input v-model:value="perComun"></li>
<li><span>Website:</span><input v-model:value="perWeb"></li>
</ul>
<ul>
<li><span>Position:</span><input v-model:value="perJob"></li>
<li><span>Department:</span><input v-model:value="perDepatment"></li>
<li><span>Location:</span><input v-model:value="perPosition"></li>
</ul>
<button v-on:click="postPI" class="PIbutton"><p>Modify personal information</p></button>
</form>
</div>
</template>
<script>
export default{
name:'PI',
data:function(){
return{
perName:'aaa',
perEmail:"aaaaa@qq.com",
perPhone:'131aaaaaaaa7',
perComun:'5aaaaaaaaa8',
perWeb:'null',
perJob:'student',
perDepatment:'School of information',
perPosition:'aaaa',
}
},
methods:{
postPI:function(){
if(this.perName==''){
return alert("Name cannot be empty");
}
if(this.perEmail==''){
return alert("Mailbox cannot be empty");
}
if(this.perPhone==''){
return alert("Phone cannot be empty");
}
if(this.perComun==''){
return alert("IM tools cannot be empty");
}
if(this.perWeb==''){
return alert("Website cannot be empty");
}
if(this.perJob==''){
return alert("Position cannot be empty");
}
if(this.perDepatment==''){
return alert("Department cannot be empty");
}
if(this.perPosition==''){
return alert("Position must not be empty");
}
var data = new FormData(document.getElementById('personal_info'));
}
}
}
</script> When I change the value of input in the web page, the value of vue will also change, so that I can judge the value of input in real time to achieve some effects
5,v-on
V-on is the instruction defined for the event. In the above example, v-on:click="postPI" is defined. Then I can define the specific method of postPI in vue.
Of course, it can also be v-on:mouseover and so on.