Chapter 01 Vue入门

news2024/12/25 9:31:44

前言

Vue 是一个框架，也是一个生态，其功能覆盖了大部分前端开发常见的需求。本文详细讲解了 Vue 的基本概念以及 Vue 开发者工具的安装。

一、Vue简介

①定义
Vue 是一款用于构建用户界面的渐进式框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。
在这里插入图片描述

② 核心特性

响应式数据绑定：Vue 的数据对象会与视图自动绑定，当数据发生变化时，视图将自动更新。
组件化：将应用程序拆分成独立的、可复用的组件，有助于提高代码的复用性和可维护性。
虚拟 DOM：通过虚拟 DOM 的实现，Vue 提供了高效的 DOM 更新和渲染性能。

二、el:挂载点

el 是 Vue 实例的一个重要选项，用于指定 Vue 实例挂载的位置。挂载点可以是 HTML 元素的选择器（ID、类名等），Vue 将控制该元素及其子元素的内容。

【示例】

<div id="app">
   <h1>{{ message }}</h1>
</div>

<script>
  var app = new Vue({
     el:"#app",
     data:{
       message:" 你好 Vue! "
     }
  })
</script>

这段代码中，我们将 el 设置为 '#app'，则 Vue 实例将控制 ID 为 app 的元素。在该元素内，Vue 使用数据对象中的数据渲染视图。在 Vue 实例中，只有挂载点内的元素会受到 Vue 的影响，其他部分的 DOM 将不会被 Vue 管理。

三、data：数据对象

data 是 Vue 实例的一个选项，用于定义实例的响应式数据。data 对象中的属性可以在模板中使用 {{ }} 语法进行数据绑定，也可以在 JavaScript 代码中进行访问和修改。任何对 data 中数据的修改都会自动更新 DOM。

【示例】

<div id="app">
   <h1>{{ message }}</h1>
</div>

<script>
  var app = new Vue({
     el:"#app",
     data:{
       message:" 你好 Vue! "
     }
  })
</script>

在这个例子中，页面中的<h1>标签会显示数据对象中 message 属性的值。当我们更改 data 中的 message 值时，视图会自动反映这一变化，体现了 Vue 的响应式特性。

四、第一个Vue程序

①导入开发版本的Vue.js
在使用 Vue.js 之前，我们需要通过 CDN 或本地文件导入 Vue 的 JavaScript 库。开发版本通常包含友好的错误提示和调试工具。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

②创建Vue实例对象

<script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" 你好 Vue! "
      }
    })
  </script>

在这里，我们创建了一个新的 Vue 实例，并将其挂载到 ID 为 app 的 DOM 元素上。同时，我们定义了一个数据对象，其中有一个 message 属性，初始值为“你好 Vue!”。

③渲染数据
在 Vue.js 中，插入语法 {{ }} 被称为“插值表达式”。它用于将数据绑定到 HTML 模板中的内容，从而动态地更新视图。

<div id="app">
  <h1>{{ message }}</h1>
</div>

使用双大括号 {{ message }}，我们能够在页面中显示 data 对象中的 message 值。当 message 的值发生变化时，视图会自动更新。

【示例】

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" 你好 Vue! "
      }
    })
  </script>
</body>

</html>

运行结果：
在这里插入图片描述

【注意事项】

注意点①：实例与容器是一一对应的关系

<body>
  <div class="app">
    <h1>{{ message }}</h1>
  </div>
  <div class="app">
    <h1>{{ message }}</h1>
  </div>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:".app",
      data:{
        message:" 你好 Vue! "
      }
    })
  </script>
</body>

运行结果：
在这里插入图片描述

【分析】
在这个示例中，有两个 div 元素具有相同的类名 class="app"。Vue 会找到页面上的所有 .app 元素，但只会与第一个匹配的元素进行绑定。因此只有第一个 div 元素会被 Vue 初始化，并且这个实例会将 data 中的 message 绑定到这个 h1 标签中。第二个 div 元素将不会被这个 Vue 实例控制，其中的 {{ message }} 不会被替换，仍然会在页面上显示为原始的字符串。

注意点②：不能挂载在 <html> 或 <body>上

<body id="body">
  {{ message }}
  <h2 id="app">
    {{ message }}
    <span> {{ message }} </span>
  </h2>
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#body",
      data:{
        message:" 你好 Vue! "
      }
    })
  </script>
</body>

</html>

运行结果：
在这里插入图片描述

【分析】
<html> 标签是整个 HTML 文档的根元素，<body>标签是页面内容的主要部分，将 Vue 或其他框架的实例挂载到<html> 或 <body>
上，会干扰页面的整体渲染循环和生命周期管理。

五、安装 Vue 开发者工具

1. 下载
下载网址：https://chrome.zzzmh.cn/index
在这里插入图片描述

2. 安装

在这里插入图片描述
3. 调试
运行一个简单的Vue程序

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue基础</title>
</head>

<body>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
  
  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:"#app",
      data:{
        message:" 你好 Vue! "
      }
    })

  </script>
</body>

</html>