Vue通过el属性与对应id的div模块进行对应的数据和属性进行绑定,data属性中就是定义需要绑定的属性,在下面的例子中主要是定义了一个修改用户个人信息的属性,其中显示的内容有用户名头像等等;methods中就是定义了一些方法函数,如查询、修改函数;mounted就是一个文加载事件,相当于就是一个页面加载事件,类似于
$(document).ready(function(){
alert("页面加载完成!");
});
这样相同的方法,当页面加载完成时,就开始执行mounted中的方法,这里举一个列子,通过用户名来查询对应用户的信息,单独的页面就将其写死过后再进行查询操作;
<div id="app">
</div>
<script>
new Vue({
el:"#app",
data:{
changeUserInfo1:{
/*主要是显示的用户的用户名,手机号,生日,年龄,性别,头像*/
userName:"",
userAge:"",
userGender:"",
userBirth:"",
userNum:"",
userImg:"",
},
},
methods:{
},
mounted(){
var __this = this;
/*需要一个域对象与其关联起来,只查询当前用户的信息 与用户名相关连*/
__this.changeUserInfo1.userName = "小马";
}
})
</script>
需要注意的是this这个指令,当this使用过后就会指向其他的属性,所以为了让它不发生指向的改变就将其存储在一个中间变量中,中间变量最好设置成一个局部变量,否则在使用的时候就会出现混乱,导致指向出现错误而导致绑定的属性无法进行对应的赋值和变化;
回显用户个人信息的html代码如下:(主要是显示用户的用户名、性别、年龄等等信息)
<div id="app">
<el-form-item label="用户名">
<el-input v-model="changeUserInfo1.userName" disabled></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="changeUserInfo1.userGender" placeholder="选择性别" >
<el-option label="男" value="男">男</el-option>
<el-option label="女" value="女">女</el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="changeUserInfo1.userAge" type="text" disabled></el-input>
</el-form-item>
<el-form-item label="出生日期">
<el-input v-model="changeUserInfo1.userBirth" type="date"></el-input>
</el-form-item>
<el-form-item label="联系方式">
<el-input v-model="changeUserInfo1.userNum" type="text"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateUserInfo">修改个人信息</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
我之前在显示用户个人信息的时候就直接显示不出来,但是的个人用户信息都能够查询到,并且封装好,主要是通过文档加载时间,在页面加载完成的时候就执行这个查询的函数,然后将对应的值添加到data的 changeUserInfo1 数据中,Vue就是当下面的属性值发生改变后输入框中的值也对应改变,数据的双向绑定;
如果这里的代码使用this进行赋值的话它对应数据就绑定不了,因为数据的格式对应不正确,
this.changeUserInfo1 = rs.data[0];
只有修改成为
_this.changeUserInfo1 = rs.data[0];
数据才会绑定,在输入框或者表单中才会显示出来,即实现双向绑定
如果将数据查询到后,无法进行前端页面的展示,那么就要检查一下是否是this的使用出现了问题!!!或者是查询到的数据的格式的问题,是否是一个数组,是否是其他格式还需要进一步处理!!
代码:
<div id="app">
<el-form-item label="用户名">
<el-input v-model="changeUserInfo1.userName" disabled></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select v-model="changeUserInfo1.userGender" placeholder="选择性别" >
<el-option label="男" value="男">男</el-option>
<el-option label="女" value="女">女</el-option>
</el-select>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="changeUserInfo1.userAge" type="text" disabled></el-input>
</el-form-item>
<el-form-item label="出生日期">
<el-input v-model="changeUserInfo1.userBirth" type="date"></el-input>
</el-form-item>
<el-form-item label="联系方式">
<el-input v-model="changeUserInfo1.userNum" type="text"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="updateUserInfo">修改个人信息</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</div>
<script>
new Vue({
el:"#app",
data:{
changeUserInfo1:{
/*主要是显示的用户的用户名,手机号,生日,年龄,性别,头像*/
userName:"",
userAge:"",
userGender:"",
userBirth:"",
userNum:"",
userImg:"",
},
},
methods:{
selectUserInfo(){
var _this = this;
$.ajax({
url:"http://localhost:8080/chenUserInfo/selectUserInfo",
dataType:"json",
type:"post",
data:_this.changeUserInfo1,
success:function (rs) {
if (rs.status == 200){
// _this.$message(rs.msg);
_this.changeUserInfo1 = rs.data[0];
}else {
_this.$message(rs.msg);
}
},error:function () {
_this.$message("修改用户地址服务器出错");
}
})
},
},
mounted(){
var _this = this;
/*需要一个域对象与其关联起来,只查询当前用户的信息 与用户名相关连*/
_this.changeUserInfo1.userName = "小马";
_this.selectUserInfo();
}
})
</script>