1. data中的两种方式
- 对象式
data:{
}
- 函数式
data(){
return {
}
}
示例:
<body>
<div id="app">
{{ name }} {{ age}} {{$options}}
<input type="text" v-model="value">
</div>
<script>
let vm = new Vue({
el: '#app',
// 对象式
// data:{
// name: '小红',
// age: 16
// }
// 函数式
data(){
return {
name: '小明',
age: 55,
value: '111'
}
}
})
</script>
</body>
2. el中的两种方式
- new Vue时候配置 el 属性
const vm = new Vue({
el: '#root'
})
- 先创建Vue实例,随后再通过 vm.$mount(‘#root’)指定el的值(这种方式更加灵活)
const vm = new Vue({})
vm.$mount('#root')
示例:
<body>
<div id="app">
{{ name }}
</div>
<script>
//el的两种方式
// let vm = new Vue({
// // el:'#app',
// data:{
// name: '小红'
// }
// })
let vm = new Vue({
data:{
name: '小红'
}
})
// 这种方式更加灵活,比如加个定时器
setTimeout(()=>{
vm.$mount('#app')
}, 3000)
</script>
</body>
3. MVVM模型 vue
受到mvvm
模型的启发
- M: 模型(Model): data的数据
- V: 视图(View): 模板代码
- VM: 视图模型(ViewModel): Vue实例对象(核心)
ViewModel 包含 DOM Listeners 和 Data Bindings。Data Bindings 用于将数据绑定到 View 上显示,DOM Listeners 用于监听操作。
- 从 Model 到 View 的映射,也就是 Data Bindings 。这样可以大量省略我们手动 update View 的代码和时间。
- 从 View 到 Model 的事件监听,也就是 DOM Listeners 。这样我们的 Model 就会随着 View 触发事件而改变。
<p>{{ name }}</p> // 改变data中的数据,页面随之变化
<input type="text" v-model="name"> //改变input的value值,data中的值也变化
在Vue中的mvvm:
- data中所有的属性、computed的计算属性、methods中的方法等,最后都出现在了vue实例vm身上。
- vue实例vm身上所有的属性 及 Vue原型上所有属性,在Vue模板{{}}中都可以直接使用。
4. 数据代理:
问题:{{}}
为什么可以访问vm实例上的所有属性|data里的数据为什么会出现在vm身上
- 先认识一个方法:
Object.defineProperty(obj,prop, options)
:
1:作用:就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 - 接收三个参数:
obj 需要定义属性的当前对象
prop 当前需要定义的属性名
options:属性配置 - 这个方法有缺点:现在先点一下:
- 不能监听数组的变化
- 不能监听新属性的添加
- 兼容性问题
- 不能深度监听
示例:
let num = 300
let person = {
name: '小明',
sex: '男'
}
Object.defineProperty(person, 'age', {
//value: 15,
//enumerable: true, // 控制属性是否可以枚举, 默认false
//writable: true, // 控制属性是否可以被修改,默认false
//configurable: true, // 控制属性是否可以被删除,默认false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值是age的值
// 注意:不能同时指定访问器和值或可写属性,什么意思呢,就是上面的配置和下面的get、set不可同时存在
get(){
console.log('有人读取了age属性')
return number
}
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体指
set(value){
console.log('有人修改了age属性')
number = value
}
})
- 数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写),可以在控制台做两个操作:
- 输出一下obj,obj2,和obj2.x,并且把obj2输出后的对象展开一下
- 更改一下obj2.x并输出一下obj
let obj = {x: 100}
let obj2 = {y: 200}
Object.defineProperty(obj2, 'x', {
get(){
return obj.x
},
set(value){
obj.x = value
}
})
- Vue中的数据代理:通过vm对象来代理data对象中的属性的操作(读/ 写)
- 好处:
更加方便操作data中的数据- 基本原理:
通过Object.defineProperty()把data对象中所有的属性添加到vm上
为每一个添加到vm上的属性,都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性