您的位置：首页 > Web前端 > Vue.js

vue的常用指令之 v-model

2019-04-15 19:36 323 查看

Vue 的常用指令 之 v-model

指令 :
是vue中特殊的标记, 辅助html标签,增加html 标签之前没有的功能.

特点 : v-开头 , 写在头标签中, 作为一个属性.

  1. v-model指令

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.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航