Vue自学复习笔记--Vue2初始认识_自学vue2-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45557181/article/details/120244812

本文介绍了Vue的基础学习路径，强调了熟悉HTML、JS和CSS的重要性。通过Vue2的实例，展示了如何创建Vue实例，使用脚手架以及在DOM中使用Vue模板。在示例中，解释了如何在`#root`容器内创建Vue实例，利用{{}

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的学习需要有一定的html、js、css基础，建议学习一段时间的前置语言后再进行学习Vue

Vue2初始认识

Vue的使用包括两种
1.js下载并引入<script type="text/javascript" src="../js/vue.js"></script>或使用网络地址
2.脚手架创建（后面详细介绍）
Vue的实例化
1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
3. root容器里的代码被称为【Vue模板】；
4. Vue实例和容器是一一对应的；
5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；
6. {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；
7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

<!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>
  <!-- 1.下载并以文本的形式引入官网上的vue.js -->
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root">  <!-- 3.1 创建用于Vue监听的范围，并和Vue实例中的监听名一致 -->
    <h1>{{a}}</h1> <!-- 3.2 在监控下可以在标签的内容区使用Vue提供的特殊的数据展示方法{{XX}} -->
  </div>
    <h1>{{a}}</h1> <!-- 未监控区 -->
  <script>
    // 2.1创建Vue的示例对象 new Vue({...})
    new Vue({
      el:'#root', // 2.2 el：使用id命名的方法对一个html模块进行“监控”
      data:{ // 2.3  此处为数据的存放“仓库”
        a:1,
      }
    })
  </script>
</body>
</html>