vue.js 在html文件中挂载使用
时间: 2023-10-22 20:52:14 浏览: 53
要在 HTML 文件中使用 Vue.js,你需要先引入 Vue.js 库。可以通过以下方式在 HTML 文件中引入 Vue.js:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
}
});
</script>
</body>
</html>
```
在上面的例子中,我们首先引入 Vue.js 库,然后在 `<div>` 标签中创建了一个 id 为 "app" 的元素,用于挂载 Vue 实例。接下来,在 `<script>` 标签中创建了一个 Vue 实例,并将它绑定到 id 为 "app" 的元素上。在 `data` 属性中定义了一个 `message` 变量,可以在 HTML 中使用双花括号语法 `{{ message }}` 来显示该变量的值。
当页面加载时,Vue.js 会自动找到 id 为 "app" 的元素,并将其内容替换为 Vue 实例中定义的模板。这样,你就可以在 HTML 中使用 Vue.js 来实现动态数据绑定和组件化开发。