- 前言,此文为vue初学者提供技术总结,所有代码都需要vue.js支持,或者通过cdn方法引入
一、Vue框架中的基本指令
1、v-bind
v-bind是动态绑定数据的指令,例如
<a v-bind:href="url">...</a>
那么,我就可以通过vue修改url的值从而达到切换不同href的目的。
<script>
new vue({
el:(你的div的id),
data:function(){
return{
url:'www.csdn.com'
}
}
})
</script>
2、v-for
v-for循环的与大致为 x in y,例如
<div id="box">
<ul>
<!--ng-repeat-->
<li v-for="item in arr"> //这里的item是形参可以进行修改
<span>{{item.name}}</span>
<span>{{item.age}}</span>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:'#box',
data(){
return{
// arr:['module','views','controlle','aaaaa']
arr:[
{"name":"xiaohong1","age":12},
{"name":"xiaohong2","age":12},
{"name":"xiaohong3","age":12},
{"name":"xiaohong4","age":12}
]
}
}
})
</script>
3、v-if
v-if与v-show的不同之处就是v-if是通过vue中的参数觉得是否插入该元素,二v-show则为是否展示该元素
<p v-if="seen">现在你看到我了</p>
<p v-show="seen">现在你看到我了</p>
在seen为false时,源代码中不存在
<p v-if="seen">现在你看到我了</p>
4、v-model
v-model是极为重要的指令,他与v-bind有些相似,但他是双向的,例如
<template>
<div class="PI">
<form id="personal_info">
<ul>
<li><span>姓名:</span><input v-model:value="perName"></li>
<li><span>邮件:</span><input v-model:value="perEmail"></li>
<li><span>电话:</span><input v-model:value="perPhone"></li>
<li><span>即时通讯工具:</span><input v-model:value="perComun"></li>
<li><span>网站:</span><input v-model:value="perWeb"></li>
</ul>
<ul>
<li><span>职位:</span><input v-model:value="perJob"></li>
<li><span>部门:</span><input v-model:value="perDepatment"></li>
<li><span>位置:</span><input v-model:value="perPosition"></li>
</ul>
<button v-on:click="postPI" class="PIbutton"><p>修改个人信息</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:'信息学院',
perPosition:'aaaa',
}
},
methods:{
postPI:function(){
if(this.perName==''){
return alert("姓名不得为空");
}
if(this.perEmail==''){
return alert("邮箱不得为空");
}
if(this.perPhone==''){
return alert("电话不得为空");
}
if(this.perComun==''){
return alert("即时通讯工具不得为空");
}
if(this.perWeb==''){
return alert("网站不得为空");
}
if(this.perJob==''){
return alert("职位不得为空");
}
if(this.perDepatment==''){
return alert("部门不得为空");
}
if(this.perPosition==''){
return alert("位置不得为空");
}
var data = new FormData(document.getElementById('personal_info'));
}
}
}
</script>
我在网页中改变input中的值,vue中的值也会改变,从而可以实现实时判断input中的值来达到某些效果
5、v-on
v-on为事件定义的指令,在上面的例子中定义了v-on:click="postPI',那我就可以在vue中定义postPI的具体方法。
当然也可以是v-on:mouseover等等。