Vue 的常用指令 之 v-model
指令 :
是vue中特殊的标记, 辅助html标签,增加html 标签之前没有的功能.
特点 : v-开头 , 写在头标签中, 作为一个属性.
v-model
: 双向数据绑定 (把数据层和数据层的数据绑定到了一起,只要有一方发生了改变,另一方也会随着变化)
<body>
<div id='app'>
//通过v-model 就将输入框和data中的数据绑定了.
<input type='text' v-model='num'>
<input type='checkbox' v-model='isTrue'>
<input type='radio' name='sex' v-model='val'>男
<input type='radio' name='sex' v-model='val'>女
</div>
<body>
<script src='./....vue.js'><script>
<script>
const vm = new Vue({
//指定vue的管理边界(vue起作用的区域)
el:'#app',
// 数据
data:{
num:424,
isTrue: true,
val:'male'
}
})
</script>
Vue中数据实现双向绑定的原理
Vue中数据实现双向绑定的原理:是根据ES5中的 Object.defineProperty来实现的。
该属性的特点:
-
该属性无法shim(兼容)IE8及其以下版本的浏览器,这也是为什么Vue不能兼容IE8及其以下版本的浏览器的原因。
-
该属性的作用:添加、修改、获取属性。
下面用一段简单的代码,来实现Object.defineProperty的原理
<input type="text" value="zs" />
<script>
let inp = document.querySelector("input");
let obj = {
//获取输入框的value值
name: inp.value,
age: 18
};
Object.defineProperty(obj, "name", {
set(newVal) {
console.log("设置值了", newVal);
//设置值时,把值赋值给输入框
inp.value = newVal;
},
get() {
console.log("获取值了");
return inp.value;
}
});
</script>
//使用:
Object.defineProperty(obj, "name", {
set(newVal) {
console.log("设置值了", newVal);
temp = newVal;
},
get() {
console.log("获取值了");
return newVal;
}
});
//参数1: obj => 要给谁设置属性
//参数2: 'name' => 要给对象设置什么属性
//参数3: {}是一个配置项,里面有两个回调函数,setter和getter,
//当设置值时,调用setter;获取值时,调用getter.
//vue在底层就是封装了Object.defineProperty.