<!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 src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
// Vue实例可以访问哪些属性
// Vue的属性有的以$开始,有的以_开始
// 所有以$开始的属性,可以视为公开的属性即public,这些属性供我们程序员调用
// 所有以_开始的属性,可以看作是私有的属性,这些是框架底层的
// 我们一般不调用
const vm = new Vue({
el : "#app",
data : {
// 为什么这里的msg属性可以被vm对象调用
// 因为vue底层使用了数据代理机制
msg : "Hello"
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../js/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
</div>
<script>
// defineProperty是ES5新增的方法
// 这个方法的作用是给对象新增属性,或者设置对象原有的属性
// Object.defineProperty(给那个对象赋值,属性名,{配置项:值})
// 第三个参数是属性相关的配置项,配置项有哪些,每个配置项的作用都是什么?
// value配置项,给属性赋值
// writable用于设置该属性的值是否可被修改
// getter方法配置项
// setter方法配置项
// 这两个方法都不需要我们手动调用
let phone = {};
// 临时变量
let temp;
// 一个普通对象
Object.defineProperty(phone,"color",{
// 当我们使用了get和set方法的时候,我们的value和writable方法就都不可用了
// value : "太空灰",
// 设置该属性的值是否可以被修改
// true表示可以修改,false表示不能修改
// writable : true,
// getter方法配置项
get : function()
{
return temp;
},
// setter方法配置项
// setter方法上有一个值,用来接收传递的值
set : function(value)
{
temp = value;
}
});
console.log(phone.color);
const vm = new Vue({
el : "#app",
data : {
msg : "Hello Vue"
}
});
</script>
</body>
</html>
