声明式渲染
使用简洁的模板语法，将数据与 DOM（文档对象模型）关联起来。通过这种方式，可以实现数据驱动的界面更新，简化开发流程。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>声明式渲染</title>
<!-- 引入 Vue 3 CDN -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<!--代码段1-->
<div id="counter">
Counter: {{ counter }}
</div>
<script>
<!--代码段2-->
const CounterApp = {
data() {
return {
counter: 0
}
},
// 代码段3
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(CounterApp).mount('#counter')
</script>
</body>
</html>
- HTML 模板包含一个 div 元素，里面使用了双大括号语法 {{ counter }}，这是 Vue.js 的模板语法，用于显示 counter 数据属性的值。
- 定义了一个 Vue 组件 Counter。组件的 data 函数返回一个对象，其中包含一个 counter 属性，初始值为 0。然后，通过 Vue.createApp 创建一个 Vue 应用实例，并将其挂载到 id 为 counter 的 DOM 元素上。数据和 DOM 已经被建立了关联，所有东西都是响应式的。这意味着当 counter 的值发生变化时，DOM 会自动更新，以反映最新的值。
- 我们增加了一个 mounted 生命周期钩子函数。mounted 是 Vue 组件生命周期的一部分，它在组件被挂载到 DOM 后立即执行。在 mounted 函数中，我们使用 setInterval 函数每秒调用一次回调函数，在回调函数中递增 counter 的值。
<div id="bind-attribute">: 定义一个 div 容器，id 为 bind-attribute。
<span v-bind:title="message">: 使用 v-bind 指令将 span 元素的 title 属性绑定到 Vue 实例的数据属性 message 上。
v-bind:title: 绑定 HTML 属性 title。
"message": 绑定到 Vue 实例的 message 数据属性。
- 在页面加载时，Vue.js 将会创建一个新的 Vue 应用实例，并将 AttributeBinding 组件的数据绑定到 DOM 元素上。具体来说，message 数据属性的值 ‘这是动态绑定的提示信息’ 会被绑定到 span 元素的 title 属性上。当你将鼠标悬停在 span 元素上时，会显示动态绑定的提示信息。这展示了 Vue.js 的声明式渲染和响应式数据绑定特性。
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
