【JavaWeb】第一个Vue.js程序（HelloWorld）

Carl39

已于 2022-02-05 17:06:26 修改

阅读量165

点赞数

分类专栏： Web前端文章标签： vue.js

于 2021-05-22 09:30:49 首次发布

本文链接：https://blog.csdn.net/weixin_46093544/article/details/117149165

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何创建并运行一个基本的Vue.js应用。它详细讲解了HTML文档类型声明、元标签的使用，以及如何设置视口以适应不同设备。此外，还展示了如何在Vue中创建实例，挂载元素，并定义数据属性。最后，通过引入Vue.js库并在<body>中添加脚本，实现了显示'Hello, world!'的功能。

摘要由CSDN通过智能技术生成

<!-- 声明，位于文档最前端（<html>标签之前），告知浏览器页面使用了哪种HTML版本 -->
<!DOCTYPE html>
<!-- <html>标签，规范定义该页面为英文网页 -->
<html lang="en">

<head>
  <!-- 告知浏览器该页面使用UTF-8编码 -->
  <meta charset="UTF-8">
  <!-- "viewpart"标记用于指定用户是否可以缩放网页，content部分设置网页宽度为设备宽度，初始缩放比例为1.0 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- IE8的专用标记，用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式（此处为Edge），以解决部分兼容问题 -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <!-- 标题元素 -->
  <title>Vue基础</title>
</head>

<body>
  <!-- div标签，id属性是HTML核心属性，用于为HTML元素定义唯一标识符 -->
  <div id="app">
    {{ message }}
  </div>
  <!-- 导入Vue框架 -->
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 插入脚本元素 -->
  <script>
    // 创建Vue实例，变量名为"app"
    var app = new Vue({
      // 挂载点，将实例挂载到id为"app"的元素上，以为其添加样式
      // 将用该实例中定义的对象或方法替换挂载的元素中同名的对象或方法
      el:"#app",
      // data属性，定义数据
      data:{
        message:" Hello, world! "
      },
      // methods属性，定义方法
      methods:{}
    })
  </script>
</body>

</html>