本书目录：点击进入
一、声明式渲染
1.1 什么是JS表达式：能够进行赋值的操作
▶ 正确
▶ 错误示例
二、示例：2秒后，页面中 message 由 hello world 变成 hi vue
▶ 效果
三、原理：利用ES6的Proxy对象对底层进行了监控
一、声明式渲染
-
{{ js表达式 }}
-
简洁的模板语法来声明式地 将数据渲染进 DOM
1.1 什么是JS表达式：能够进行赋值的操作
▶ 正确
-
{{ 'hi' }}
-
{{ [1, 2, 3] }}
-
{{ function(){} }}
▶ 错误示例
-
{{ if(true){} }}
如：if(true){} 报错
二、示例：2秒后，页面中 message 由 hello world 变成 hi vue
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../vue.global.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>let vm = Vue.createApp({data(){return {message: 'hello world'}}}).mount('#app');<!-- 延迟2秒后执行：修改 data.message -->setTimeout(()=>{vm.message = 'hi vue3';}, 2000)</script>
</body>
</html>▶ 效果
三、原理：利用ES6的Proxy对象对底层进行了监控
<body><div id="app"></div><script>let data = {message: 'hello world'};data = new Proxy(data, {set(target, key, value){console.log('set');app.innerHTML = value;},get(target){console.log('get');return target.message;}});app.innerHTML = data.message;setTimeout(()=>{data.message = 'hi vue';}, 2000)</script>
</body>
