VUE快速入门-3：模版示例

2025/5/3 6:38:30 来源：https://blog.csdn.net/qq_41914036/article/details/147294312 浏览: 次关键词：VUE快速入门-3：模版示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>
</head>
<body>
<div id="app"><p>{{ message }}</p>
</div><script>
new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})
</script>
</body>
</html>

以下是对代码的逐行解释：

HTML 部分

<!DOCTYPE html>

声明文档类型为 HTML5。

<html>

开始 HTML 文档的根标签。

<head>

开始 HTML 文档的头部部分，用于包含元信息（如字符编码、标题、脚本等）。

<meta charset="utf-8">

设置 HTML 文档的字符编码为 UTF-8，这是一种支持多语言字符的编码方式。

<title>Vue 测试实例</title>

设置网页的标题，显示在浏览器标签上。

<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.min.js" type="application/javascript"></script>

引入 Vue.js 的外部脚本文件，版本为 2.6.14。
使用 Vue.js 的压缩版（vue.min.js），以减少文件大小，提高加载速度。
type="application/javascript" 是旧式写法，现代浏览器中可以省略。

</head>

结束头部部分。

<body>

开始 HTML 文档的主体部分，用于显示网页内容。

<div id="app"><p>{{ message }}</p>
</div>

定义一个 div 元素，其 id 为 app。
{{ message }} 是 Vue.js 的模板语法，表示动态绑定 message 数据。
初始渲染时，{{ message }} 会被替换为 Vue 实例中 data 对象中 message 的值。

</body>

结束主体部分。

</html>

结束 HTML 文档。

JavaScript 部分

<script>

开始 JavaScript 脚本部分。

new Vue({el: '#app',data: {message: 'Hello Vue.js!'}
})

创建一个新的 Vue 实例。
- el: '#app'：指定 Vue 实例挂载的 DOM 元素，这里是 id="app" 的 div。
- data：定义 Vue 实例的数据对象。
  - message: 'Hello Vue.js!'：定义一个名为 message 的数据属性，其初始值为 'Hello Vue.js!'。
Vue.js 会自动监听 data 中的数据变化，并更新到 DOM 中。