<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>vue基础扩展6--v-model原理</title>
</head>
<body>
<div id="app">
<h2>测试v-model的替代</h2>
<input :value="text" @input="text=$event.target.value" />
<!-- <input type="text" v-model="text"> -->
{
{text}}
<button @click="setText()">点击设置</button>
</div>
<script>
// 1、v-model="text"等价于使用绑定属性 :value="text", 并且绑定@input事件@input="text=$event.target.value"
var app = new Vue({
"el": "#app",
data: {
text: ''
},
methods: {
setText() {
this.text = this.text + "!";
}
},
});
</script>
<div class="" id="app1">
<h2>测试自定义组件中使用v-model</h2>
<comp1 v-model="msg"></comp1>
msg的值：{
{msg}}
<button @click="changeMsg">改变MSG的值</button>
</div>
<script>
// 2、自定义v-model的使用。
// 使用规则，在自定义组件上使用v-model, 然后在组件内使用prop接收value值，然后设置一个计算属性model，这个model属性
// 是一个访问器，get是取value的值，set是触发input事件，然后把model的计算属性在自定义组件内的一个input元素上使用。
var comp1 = {
props: ["value"],
template: `<div> <input v-model="model"> </div>`,
computed: {
model: {
get() {
return this.value;
},
set(val) {
this.$emit('input', val);
}
}
}
};
var vm = new Vue({
el: '#app1',
data() {
return {
msg: 'init msg'
}
},
methods:{
changeMsg(){
this.msg = this.msg+'!';
}
},
watch:{
msg(n,old) {
console.log(n,old)
}
},
components: {
comp1
},
});
</script>