Vue的绑定和使用this使用的一些注意事项

        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>