1. 数据绑定
单向数据绑定 v-bind
<input type="text" v-bind:value="name">
v-bind: 将属性value 和 data数据里的name 进行了单向的数据绑定, 即name属性值是什么 --> input 框里value值就是什么 -->input框就展示什么 ( v-bind:value="name" 可以简写为 :value = "name" )
双向数据绑定 v-model
<input type="text" v-model:value="name">
v-model:value = "name" 是双向数据绑定 name属性值可以影响页面中输入框的展示 页面中输入框的值也可以影响name属性值
注意 v-model 只能用于表单类元素上 (可以让用户输入的元素 value捕获界面输入框的值---流向---->data数据)
v-model 默认收集的就只能是value值 v-model:value = "name" 可以简写为 v-model = "name"
2. el与data的两种写法
关联vue实例和容器的两种方法 --- vue的配置项 el 、vue原型上的方法$mount
vue的配置项 el
const vm = new Vue({el:'#root', //将vue实例和上面的容器关联起来 写法①
})vue原型上的方法$mount. (原型上的方法 可以通过对应实例的__proto__访问到 可以直接在实例上调用)
const vm = new Vue({// el:'root', //将vue实例和上面的容器关联起来 写法①
})
vm.$mount('#root') //将vue实例和上面的容器关联起来 写法②vue实例上的属性 $开头的属性 是给程序员准备好的 _开头的都是vue自己要用的内部的.(一个是招待程序员的,一个是给自己内部员工用的) 都可以在vue模板中直接使用
vm.$mount(' #root ')语句 实现的功能和 el:'#root'配置是一样的 都是将指定容器和vue实例关联起来,只是单独的语句 使用位置和调用时间 比vue中的配置项el 更加灵活.
mount -挂载--- vue实例 将容器里的模板 解析成真实的DOM 挂载到页面上.
data的两种写法: 对象式和函数式.
const vm = new Vue({// ....//data的第一种写法:对象式data:{name:'尚硅谷',}})data的第二种写法:函数式 该函数中的this指向vue实例( // 注意 由vue管理的函数,一定不能写成箭头函数, 因为箭头函数没有自己的this 只继承其包含上下文中的this 也就是全局作用域 所以this指向window )
const vm = new Vue({data:function(){return {name:'尚硅谷',}}
})上面data函数的简写 -- ES6新增的语法糖 给对象定义方法时可以进行如下简写 (常用 方式简单 且保证复用的组件实例 有单独的data数据)
const vm = new Vue({data(){return {name:'尚硅谷',}}
})3. 理解MVVM模型 (vue设计受到了它的启发)
M --Model --模型 对应data中的数据
V -- View --视图 对应template模板
VM -- ViewModel --视图模型 对应Vue实例对象
Data Bindings -- 数据绑定 data中的数据 ---> 流向 --> 视图的指定位置
DOM Listeners -- DOM监听 监听视图的改变 视图的改变 --> 映射 --> data对应的数据
MVVM模型在代码中的体现:
data中所有的属性,最后都出现在了vm即vue实例身上. 而vm身上所有的属性 及 Vue原型上所有属性, 在Vue模型上都可以直接使用.包括_开头的 还有 $ 开头的属性.
2.4. 数据代理
( 1 ) 利用 Object.defineProperty() 进行数据代理.
数据代理的含义 : 通过一个对象 代理 对另一个对象中属性的操作. 包括读取与设置(读/写)
let obj = {x:100,
}
let obj2 = {y:200,
}
Object.defineProperty(obj2,'x',{get(){return obj.x;},set(val){obj.x=val;}
})
上面代码中 obj2对象中的x 属于访问器属性 访问器属的值现用现取, 利用getter来读取.
即当有人读取 obj2中的x 属性值,get函数就会被调用. 又因为get函数内返回的是 obj中x属性值 ,因此实际上读取的是obj中x属性值.
当有人设置 obj2中的x 属性值,set函数会被调用 函数内部实际上是设置了obj对象的x属性值 .
这样就实现了 obj2中的x 属性对 obj中x属性的数据代理.
注意 访问器属性是不能直接定义的,必须使用Object.defineProperty().
( 2 )VUE2是如何进行数据代理的 ?
创建vue实例时 配置的data数据 是数据最初始的值. vue实例会保存这个data对象到 ---> 自身的_data属性 方便自身使用. 并且_data对data对象 进行了数据劫持 来实现数据动态响应到页面中的功能.
创建vue实例时 配置的data数据,里面有 name address 两个属性并且带有属性初始值'尚硅谷' '宏福科技园'. VM对其进行了数据劫持 将data数据保存到VM上的_data属性 并且实现了动态响应的功能(它的数据一改变,页面中所有用到data数据的地方都会跟着更新.). 所以在模板中使用_data里的数据 就可以实现页面的动态响应. 但是写的时候都需要 _data.name _data.address 不太方便. 所以在VM身上直接 添加name 和 address 属性通过defineProperty方法分别对 _data.name _data.address 进行数据代理 所以可以在模板中直接使用 name 和address 属性来动态响应页面.
这就是vue对数据进行的处理, 实现了页面与数据之间的动态响应.
--------文章主要内容来自禹神前端vue课程---------------------------------------
