40 lines
1.1 KiB
HTML
40 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script type="text/javascript" src="../js/vue.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<!--
|
|
1.vue中的数据代理:
|
|
通过vm对象来代理data对象中属性的操作(读-getter/写-setter)
|
|
2.vue中数据代理的好处:
|
|
更加方便的操作data中的数据
|
|
3.基本原理:
|
|
通过Object.defineProperty()把data对象中所有属性添加到vm上
|
|
为每一个添加到vm上的属性,都指定一个getter/setter
|
|
在getter/setter内部去操作(读/写)data中对应的属性
|
|
-->
|
|
<div id="root">
|
|
<h2>学校名称: {{name}}</h2>
|
|
<h2>学校地址: {{address}}</h2>
|
|
</div>
|
|
</body>
|
|
|
|
<script type="text/javascript">
|
|
Vue.config.productionTip = false
|
|
|
|
const vm = new Vue({
|
|
el:'#root',
|
|
data:{
|
|
name:'nihao',
|
|
address: "where"
|
|
}
|
|
})
|
|
</script>
|
|
|
|
</html> |