Vue学习之--------el与data的两种写法、MVVM模型、数据代理（2022/7/5）
原创
©著作权归作者所有：来自51CTO博客作者小兔教你学编程的原创作品，请联系作者获取转载授权，否则将追究法律责任
文章目录
1、el与data的两种写法
1.1、基础知识
data与el的2种写法
- 1、el有2种写法
(1)、new Vue时候配置el属性。
(2)、先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值。 - 2、data有2种写法
(1)、对象式
(2)、函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
1.2、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//el的两种写法
//第一种写法
// new Vue({
// el: '#App',
// data: {
// value: "Vue"
// }
// })
//第二种写法
// const vm = new Vue({
// data:{
// name:"VUE",
// }
// })
// vm.$mount('#App')
//data的两种写法
new Vue({
el:'#App',
//第一种写法：对象式
// data:{
// name:'ZYZ'
// }
//data的第二种写法：函数式
data(){
return {
name: 'zyz'
}
}
})
1.3、页面效果
2、MVVM模型
2.1、 基础知识
- MVVM模型
1、M：模型(Model) ：data中的数据
2、V：视图(View) ：模板代码
3、VM：视图模型(ViewModel)：Vue实例 - 观察发现：
1、data中所有的属性，最后都出现在了vm身上。
2、vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。 
2.2 、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>学校名称：{{name}}</h1>
<h1>学校地址：{{address}}</h1>
<h1>测试一下2：{{$options}}</h1>
<!-- <h1>测试一下1：{{1+1}}</h1>
<h1>测试一下3：{{$emit}}</h1>
<h1>测试一下4：{{_c}}</h1> -->
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
const vm = new Vue({
el: '#App',
data: {
name: "ZYZ",
address: "CSDX"
}
})
console.log(vm)
2.3、页面效果
3、数据代理
3.1、 基础知识
数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
3.2、 回顾Object.defineProperty方法
3.2.1、 代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
let num = 24
let person = {
name: "张三",
sex: "男",
}
Object.defineProperty(person, 'age', {
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get() {
return num
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value) {
num = value
}
})
console.log(person)
3.2.2、 测试结果
3.3、 何为数据代理
3.3.1 、代码实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
let obj1 = { x: 10 }
let obj2 = { y: 20 }
Object.defineProperty(obj2, 'x', {
get() {
return obj1.x;
},
set(value) {
obj1.x = value
}
})
3.3.2、测试结果
3.4、Vue中的数据代理
3.4.1、代码实例
z<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>标题</title>
<!-- 引入vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="App">
<h1>姓名：{{name}}</h1>
<h1>年龄：{{age}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示
//创建Vue实例
new Vue({
el: '#App',
data: {
name: "ZYZ",
age: 18
}
})
3.4.2、测试结果
