①在页面中通过 CDN 的方式引入; ②下载Vue的JS文件,手动引入。 通过以上两种方式在页面中实现Hello Vue.js的输出
时间: 2024-09-12 19:17:25 浏览: 52
要在页面中输出 "Hello Vue.js",可以采用以下两种不同的引入方式:
1. 通过 CDN 方式引入:
在 HTML 文件的 `<head>` 标签内或者在需要使用 Vue.js 的位置之前,插入一个 `<script>` 标签,并设置其 `src` 属性为 Vue.js 的 CDN 链接。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue.js</title>
<!-- 通过 CDN 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
// 创建一个新的 Vue 实例,并将其挂载到一个元素上
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
});
</script>
</body>
</html>
```
2. 下载 Vue 的 JS 文件,手动引入:
首先,需要从 Vue.js 的官方网站或者其他可信的源下载 Vue.js 的压缩版 JavaScript 文件。然后将这个文件保存到你的项目目录中,接着在 HTML 文件中通过 `<script>` 标签引入这个文件。以下是示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Hello Vue.js</title>
<!-- 手动引入本地的 Vue.js 文件 -->
<script src="path/to/vue.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
// 创建一个新的 Vue 实例,并将其挂载到一个元素上
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
});
</script>
</body>
</html>
```
确保替换 `<script src="path/to/vue.js"></script>` 中的 `path/to/vue.js` 为 Vue.js 文件在你服务器上的实际路径。