v-bind如何绑定，以及v-bind与v-model的区别

v-bind如何绑定，以及v-bind与v-model的区别

今天做一个Demo，使用springboot和vue做模糊查询的时候，想要将搜索框的数据，绑定到data里的user。
想到这里很容易就知道应该使用v-model了，可以进行数据的双向绑定，对，使用v-model确实可以，只是在进行绑定的时候，对语法不太熟练,一开始在button点击事件那里传的是@click="findByCondition(name,phone)" ,发现获取的值是definded，我就改成了@click="findByCondition(user.name,user.phone)",还是不行，后来看以前学习v-model基础语法的demo，改成@click="findByCondition(user)"就行了。

以下是正确代码

        <!--搜索框-->
        <div class="row">
            <div class="col-md-8 col-md-offset-1">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name">姓名:</label>
                        <input type="text" class="form-control" id="name" v-model='user.name'>
                    </div>
                    <div class="form-group">
                        <label for="phones">电话:</label>
                        <input type="text" class="form-control" id="phones" v-model='user.phone'>
                    </div>
                    <button type="button" class="btn btn-info" @click="findByCondition(user)">搜索</button>
                </form>
            </div>
        </div>

vue代码：

	<script>
    new Vue({
        el:"#app",
        data:{
            users:[ ],//接受服务器接口的数据，在页面加载完成之前完成赋值
            user:{
                id:"",
                name:"",
                age:null,
                salary:"",
                phone:""
            }//用于完成数据双向绑定
        },
        methods:{
            save(){
                axios.post("http://localhost:8080/saveUser",this.user).then(response=>{
                    console.log(response.data);
                        if (response.data.success){
                            //更新页面
                            this.findAll();
                            //清空输入框
                            this.user = {};
                        }
                    }).catch(function (err) {//对异常进行处理
                    console.log(err);//打印输出错误信息
                })
                },
            //查询所有用户，可以复用，所以单独抽出一个方法
            findAll(){
                axios.get("http://localhost:8080/findAll").then(response=>{
                    this.users = response.data;
                }).catch(function (err) {//对异常进行处理
                    console.log(err);//打印输出错误信息
                })
            },
            deleteUser(id){//点击
                if (window.confirm("确认删除id为"+id+"的纪录吗？")){
                    axios.get("http://localhost:8080/deleteUser/"+id).then(response=>{
                        console.log(response.data);
                        this.findAll();
                    }).catch(function (err) {
                        console.log(err);
                    })
                }
            },
            //搜索框
            //这个是模糊查询的获取搜索框条件的方法，先测试看看有没有获取到值
            findByCondition(user){
                console.log(user.name,user.phone);
            }
        },
        created(){
            this.findAll();
        }
    })
</script>

问题解决之后，然后尝试使用v-bind：发现无法获取到数据（这里没意识到自己的操作属于双向绑定），后来突然想到了Vue这个框架呢，它也算的的上是model（模型）和view（视图）分离了，如果需要传递数据就需要用到v-bind和v-model。

v-bind是单向绑定：只能用于把模型中的数据传递到视图中，而无法将视图中的数据传递到模型中。
v–model是双向绑定：既可以将模型中的数据传递到视图中，也可以将视图中的数据传递到模型中。