在原生HTML文件中引入Vue并使用
warning:
这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。
在原生HTML文件中引入Vue.js并使用Vue的基本功能，可以通过以下步骤实现：
- 在HTML文件中通过
<script>标签引入Vue.js库。 - 创建一个Vue实例并附加到DOM元素上。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>Vue in HTML</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 引入 Vue.js -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script>
// 创建 Vue 实例，并挂载到 id 为 app 的元素上
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>在上述代码中，我们通过<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>引入了Vue.js。然后，在<script>标签内创建了一个新的Vue实例，并通过el: '#app'指定了挂载点。在data对象中定义了响应式数据message，并在HTML中通过{{ message }}展示。当Vue实例被创建并挂载之后，它会将div#app的内容替换成对应的视图，并且保持内容的响应式更新。
评论已关闭