①在页面中通过 CDN 的方式引入; ②下载Vue的JS文件,手动引入。 通过以上两种方式在页面中实现Hello Vue.js的输出。
时间: 2024-09-12 12:17:28 浏览: 43
在页面上使用Vue.js有两种常见的方式:
1. **CDN 引入**:
如果你想快速集成Vue而不关心版本管理和打包过程,可以利用CDN(内容分发网络)。首先,在HTML的`<head>`标签内添加以下链接,这将加载Vue的最新稳定版本:
```html
<script src="https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.min.js"></script>
```
然后,在`<body>`部分创建一个简单的Vue实例并绑定到元素上,例如显示 "Hello Vue.js":
```html
<div id="app">
{{ message }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
});
</script>
```
2. **下载并手动引入JS文件**:
首先,从Vue官网下载Vue的压缩文件(如`vue.min.js`),将其保存到你的项目文件夹中。接下来,在HTML文件中添加`<script>`标签引用这个本地文件:
```html
<script src="path/to/vue.min.js"></script>
```
同样地,在`<body>`部分设置Vue实例:
```html
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
});
</script>
```