初识Vue

文章发布较早，内容可能过时，阅读注意甄别。

# 前言

这次契机难得，终于能有一个整块儿的时间学习一下 Vue，而今学习基本到一个段落，过程中紧紧跟随做了笔记，不敢怠慢，整理到这里。这个整理更多是给自己的，便于以后翻看查阅！

特别鸣谢：尚硅谷 张天禹 老师的尚硅谷 Vue2.0+Vue3.0 全套教程丨 vuejs 从入门到精通 (opens new window) 。

这个课程真的是说多少夸奖的话都是不够的，视频中弹幕也有很多很多感恩的话，张老师的课程由浅入深，细致入微，引人入胜，即便是一个外行人，也能很快就会被课程吸引，让我在学习过程中不至于枯燥，这真的是一个宝藏老师，的确 YYDS。

笔记里边大部分都是代码，以及一些简短的记录，这里就也采用代码与说明的方式进行记录。

学习过程中的代码，统一发布在： https://github.com/eryajf/vue-learn-code (opens new window)

# 初相识

# `代码`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>初识Vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <!-- toUpperCase: 转为大写 -->
      <h1>Hello {{name.toUpperCase()}}，{{age}}</h1>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; // 禁用提示

      // 创建Vue实例
      new Vue({
        el: "#root", // el 用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {
          // 用于存储数据，数据供el指定的容器使用，值先写死成一个对象
          name: "eryajf",
          age: "3",
        },
      });
    </script>
  </body>
</html>