v-model的使用
v-model可以实现数据的双向绑定（数据两端都会发生变化）
用在普通的html标签上面
<input type="text" v-model="username">
下面这种写法可以达到和上面相同的效果 使用 v-bind 来动态传递 prop
<input type="text" v-bind:value="username" v-on:input="username=$event.target.value">
<script>
var vm =new Vue({
el:"#app",
data:{
username:"zhangsan"
},
})
</script>
在写完后可以看到当在输入框输入信息时可以在上面及时得到结果：
v-model在自定义组件上的使用，如何把数据从组件传到外面，如何把外面的数据传入到组件
<custom-input v-model="username"></custom-input>
上面和下面实现的效果是相同的
<custom-input :value1="username" @input="handlerInput"></custom-input>
<script>
//全局组件,这里的data是函数,组件是可以复用的 全局组件一定要写在实例的前面
Vue.component('custom-input',{
props:['value1'],//通过props象组件传递数据
template:`<input type="text"
:value="value1"
//$emit（）方法：触发当前实例上的事件，有两个参数
@input="$emit('input',$event.target.value)"
>`,//字符串模板的写法 input事件的名字 $event.target.value是输入框里面的值
data(){
},
})
var vm =new Vue({
el:"#app",
data:{
username:"zhangsan"
},
methods:{
handlerInput(val){
this.username=val;
}
}
})
</script>