使用new Vue()创建Vue实例，传入配置对象（el data）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="root">
{{ name }}
</div>
<script type="text/javascript">
const x = new Vue({
el: '#root',
data: {
name: 999
// message: 888
}
})
</script>
</body>
</html>v-hind v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<!-- v-hind 单向传输，将data中的数据传给输入框 -->
<input type="text" v-bind:value="name">
<!-- v-hind的缩写形式
<input type="text" v-bind:value="name"> -->
<!-- v-model 双向传输，data中的数据与输入框中的value值相互传递 -->
<input type="text" v-model:value="name">
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
name: '燕'
}
});
</script>
</body>
</html>效果：
Object.defineProperty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<script type="text/javascript">
let number = 18
let person = {
name: '张三',
sex: '男',
}
Object.defineProperty(person, 'age', {
// value: 20,
// enumerable: true,//控制属性是否被枚举（被遍历）
// writable: true,//控制属性是否被修改
// configurable: true,//控制属性是否被删除
// 当有人读取person的age属性时，get函数（getter）就会被调用，age的值为返回值
get() {
console.log('有人读取age属性了');
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且收到所修改的具体值
set(value) {
console.log('有人修改age属性了，且值是', value);
number = value;
}
})
</script>
</body>
</html>