在开始学习Vue之前，了解如何在HTML中创建和使用script标签是至关重要的。script标签用于在HTML文档中嵌入或链接JavaScript代码。对于Vue来说，script标签是引入Vue.js库并开始使用Vue进行前端开发的基础。

1. 创建script标签

在HTML中创建script标签非常简单。以下是script标签的基本结构：

<script type="text/javascript">
  // 在这里写入JavaScript代码
</script>

1.1 类型声明

type 属性用于指定脚本内容的类型。对于JavaScript，通常使用 text/javascript。虽然这不是必需的，但它有助于浏览器更好地理解内容。

1.2 位置

script标签可以放在HTML文档的头部（<head>）或底部（<body>）。通常推荐将script标签放在底部，这样可以确保在执行JavaScript代码之前，所有的HTML元素都已加载完成。

1.3 内联与外部脚本

  • 内联脚本：将JavaScript代码直接写在script标签内部。
  • 外部脚本：通过src属性链接到外部的JavaScript文件。

2. 引入Vue.js

为了使用Vue，你需要从CDN（内容分发网络）或官方GitHub仓库引入Vue.js库。以下是如何从CDN引入Vue.js的例子：

<!-- 引入Vue.js -->
<script src="https://unpkg.com/vue@next"></script>

确保将src属性的值替换为Vue.js的正确链接。目前，Vue.js有多个版本，包括长期支持版本和最新版本，你可以根据需要选择合适的版本。

3. 使用Vue.js

在引入Vue.js之后，你可以在HTML文档中的任何script标签内部使用Vue.js。以下是一个基本的Vue实例：

<!-- 引入Vue.js -->
<script src="https://unpkg.com/vue@next"></script>

<!-- Vue实例 -->
<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

在这个例子中：

  • el 属性指定了Vue实例挂载的元素。
  • data 属性定义了Vue实例的数据模型。

4. 注意事项

  • 当使用CDN引入Vue.js时，确保CDN链接是有效的，并且指向正确的Vue.js版本。
  • 如果从本地文件系统引入Vue.js，确保文件的路径是正确的。
  • 在使用Vue.js之前，不要忘记引入jQuery或其他可能依赖的库，除非你的项目中不需要。

通过以上步骤，你就可以在HTML中创建和使用script标签来引入和开始使用Vue.js了。这将为你学习Vue.js打下坚实的基础。