Vue.js 학습 기록 1: Vue.js 계획 및 이해 학습

Vue.js Tutorial이 칼럼에서는 Vue.js에 대한 학습 계획과 이해를 함께 배울 수 있습니다.

이 스터디 노트는 제가 Vue.js 프레임워크를 학습하면서 개인적으로 작성한 프로그램 코드와 학습 경험 중 일부를 기록할 것입니다. 이를 위해 ProgrammingLanguage/JavaScript 디렉터리 아래에 vuejs라는 디렉터리를 만들고 이 디렉터리 아래에 다음 두 개의 하위 디렉터리를 설정하겠습니다. ProgrammingLanguage/JavaScript目录下创建一个名为的vuejs目录，并在该目录下设置以下两个子目录：

• note目录用于存放markdown格式的笔记。
• code目录则用于存放笔记中所记录的程序代码。

学习规划

• 学习基础：
  • 掌握 HTML、CSS、JavaScript 相关的基础知识。好吧，我
  • 掌握 npm 包管理器的基本用法。
  • 了解 B/S 应用程序架构的基本原理。
• 学习资料：
  • 视频教程：黑马程序员之 Vue.js 教学视频
  • 线上文档：Vue.js 官方教程
  • 参考书籍：《深入浅出 Vue.js》
• 学习目标：
  • 开发一个"云端记事本"应用。

第 1 部分：了解 Vue.js 框架

这部分笔记将记录我对 Vue.js 框架的概念性了解，以及在项目中引入该框架的具体方法，并编写一个"Hello World"程序。

Vue.js 简介

Vue.js 是一套用于构建用户界面的渐进式框架。该框架被设计为可以自底向上逐层应用，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue.js 也完全能够为复杂的单页应用提供驱动。简而言之，Vue.js 具有以下特性：

1. 使用了传统 HTML 类似的模版语法，对于新手来说，或许更易于上手。
2. 使用了虚拟的 DOM 模型，简化了对页面元素的操作方式。
3. 使用了响应式的视图组件，有助于提高程序界面的用户体验。
4. 页面渲染速度极快，能赋予应用程序良好的执行性能。
5. 既可以像 React 一样提供用于构建复杂大型应用的路由接口。
6. 也可以像 jQuery 一样提供使用简单、且封装良好的操作接口。

当然，由于 Vue.js 的作者本身是一个中国人，所以 Vue.js 社区的中文资料也相比其他 JavaScript 框架社区要丰富一些，这对于很多习惯中文阅读的用户来说，或许也是选择使用这一框架的原因。

引入 Vue.js 框架

和大多数 JavaScript 前端程序库和应用框架一样，在自己的项目中引入 Vue.js 框架主要有 CDN 引用和本地引用两种方式，下面分别来学习一下它们。

CDN 引用

CDN 是内容分发网络（Content Delivery Network 或 Content Distribution Network）的缩写，这是一种利用现有的互联网络系统中最靠近目标用户的服务器，更快、更可靠地分发音乐、图片、视频、应用程序以及其他数据资料的方式，目的是提供高性能、可扩展性及低成本的网络内容传递给用户。换而言之，在使用 CDN 这种引用方式时，Vue.js 框架文件会被存储在指定的 CDN 服务网络的某个服务器节点上，由该服务来集中负责针对该框架文件的访问负载并维护该框架的版本，而我们只要在 HTML 文档的<script>标签中引用相应 CDN 服务的 URL 即可，像这样：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 或者 -->
<!-- 生产环境版本，优化了文件大小和载入速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

在上述示例中，我测试了使用cdn.jsdelivr.net

• note 디렉토리는 markdown 형식으로 메모를 저장하는 데 사용됩니다.
• code 디렉토리는 노트에 기록된 프로그램 코드를 저장하는 데 사용됩니다.

학습 계획

• 학습의 기초:
  • HTML, CSS 및 자바스크립트. 글쎄,
  • npm 패키지 관리자의 기본 사용법을 배웠습니다.
  • B/S 애플리케이션 아키텍처의 기본 원리를 이해합니다.
• 학습 자료:
  • 비디오 튜토리얼: Dark Horse Programmer의 Vue.js 교육 비디오
  • 온라인 문서: Vue.js 공식 튜토리얼
  • 참고 도서: "간단한 용어로 Vue.js"
• 학습 목표:
  • "Cloud Notepad" 애플리케이션 개발 .

1부: Vue.js 프레임워크 이해

이 부분은 노트에는 Vue.js 프레임워크에 대한 개념적 이해뿐만 아니라 프레임워크를 프로젝트에 도입하고 "Hello World" 프로그램을 작성하는 구체적인 방법도 기록됩니다. 🎜

Vue.js 소개

🎜Vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 프레임워크는 아래에서 위로 레이어별로 적용되도록 설계되었습니다. 핵심 라이브러리는 시작하기 쉬울 뿐만 아니라 타사 라이브러리 또는 기존 프로젝트와 쉽게 통합할 수 있는 뷰 레이어에만 중점을 둡니다. 반면에 최신 도구 체인 및 다양한 지원 라이브러리와 결합하면 Vue.js는 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다. 간단히 말해서 Vue.js는 다음과 같은 특징을 가지고 있습니다: 🎜

1. 기존 HTML과 유사한 템플릿 구문을 사용하므로 초보자가 시작하기가 더 쉬울 수 있습니다.
2. 가상 DOM 모델을 사용하여 페이지 요소의 작동을 단순화합니다.
3. 반응형 보기 구성 요소를 사용하면 프로그램 인터페이스의 사용자 경험이 향상됩니다.
4. 페이지 렌더링 속도가 매우 빠르므로 애플리케이션의 실행 성능이 뛰어납니다.
5. React와 같은 복잡한 대규모 애플리케이션을 구축하기 위한 라우팅 인터페이스도 제공할 수 있습니다.
6. 또한 jQuery와 같이 사용하기 쉽고 잘 캡슐화된 작업 인터페이스를 제공할 수도 있습니다.

🎜물론 Vue.js의 작성자가 중국인이기 때문에 Vue.js 커뮤니티의 중국어 정보도 다른 JavaScript 프레임워크 커뮤니티보다 풍부합니다. 중국어 읽기에 익숙해진 것이 이 프레임워크를 선택한 이유일 수 있습니다. 🎜

Vue.js 프레임워크 소개

🎜대부분의 JavaScript 프런트엔드 라이브러리 및 애플리케이션 프레임워크와 마찬가지로 Vue.js 프레임워크를 자신의 프로젝트에 도입하려면 주로 CDN 참조 및 거기에 로컬 참조의 두 가지 방법에 대해 별도로 알아보겠습니다. 🎜

CDN 인용

🎜CDN은 Content Delivery Network 또는 Content Distribution Network의 약자로, 기존 인터넷 시스템을 이용하여 대상 사용자의 서버에 가장 가까운 방식을 통해 더 빠르게 전송하는 방식입니다. 음악, 사진, 비디오, 애플리케이션 및 기타 데이터 자료를 보다 안정적으로 배포하는 방법은 사용자에게 고성능, 확장성 및 저렴한 네트워크 콘텐츠를 제공하는 것을 목표로 합니다. 즉, CDN 참조 방식을 사용하는 경우 Vue.js 프레임워크 파일은 지정된 CDN 서비스 네트워크의 서버 노드에 저장되며 서비스는 프레임워크 파일 버전의 액세스 로드 및 유지 관리를 담당합니다. 다음과 같이 HTML 문서의 <script> 태그에서 해당 CDN 서비스의 URL을 참조하면 됩니다. 🎜

npm install vue --save
# 如果需要相应的权限，可以使用 sudo 命令来提权

🎜위 예에서는 <를 사용하여 테스트했습니다. code>cdn.jsdelivr.net에서 제공하는 CDN 서비스는 Vue.js 프레임워크를 의미하며, 이는 Vue.js 공식 튜토리얼에서도 권장하는 서비스입니다. 개발 환경 버전을 참조할지, 프로덕션 환경 버전을 참조할지 여부는 구체적인 사용 시나리오에 따라 다릅니다. 일반적인 상황에서는 프로그램 개발 단계에서 피드백 정보가 상대적으로 풍부한 개발 환경 버전을 사용하고, 프로그램이 출시될 때까지 기다렸다가 더 많은 실행 효율성을 추구하는 프로덕션 환경 버전으로 전환합니다. CDN을 인용 방법으로 사용하면 어떤 이점이 있는지 살펴보겠습니다. 🎜

• CDN 的总承载量可以比单一骨干最大的带宽还要大。这使得内容分发网络可以承载的用户数量比起传统单一服务器多。
• CDN 服务器可以被放置到不同地点，这有助于减少计算机之间互连的流量，进而降低带宽成本。
• CDN 通常会指派较近、较顺畅的服务器节点将资料传输给用户。虽说距离并非影响传输的绝对因素，但这可以尽可能提高性能和用户体验。
• CDN 上存储的资料通常都会有异地备援，即当某个服务器故障时，系统将会调用其他邻近地区的服务器资料，以提高服务的可靠度。
• CDN 提供给服务提供者更多的控制权，即提供服务的人可以针对客户、地区，或是其他因素来做相应的调整。

当然了，这种引用方式归根结底都得依赖于网络环境，甚至很多时候是国外的网络环境，由于众所周知的原因，我们的网络环境经常会受到各种不可抗力的影响，所以我个人更倾向于将框架文件下载到本地来引用。

本地引用

正如上面所说，如果想减少意外状况，最好的选择是将 Vue.js 的框架文件下载到本地，然后再引用它们。下载这类文件的方式有很多，现如今为了便于更新版本，人们通常会选择使用 npm 这类包管理器来下载 JavaScript 的各种程序库和应用框架。具体做法就是在之前创建的code目录下执行以下命令：

npm install vue --save
# 如果需要相应的权限，可以使用 sudo 命令来提权

如果安装过程一切顺利，接下来就只需要在 HTML 文档的<script>标签中引用框架文件的路径即可，像这样：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="node_modules/vue/dist/vue.js"></script>
<!-- 或者 -->
<!-- 生产环境版本，优化了文件大小和载入速度 -->
<script src="node_modules/vue/dist/vue.min.js"></script>

在这里，选择开发环境版本还是生产环境版本的依据是一样的，就不再重复了。下面来验证一下框架文件是否被成功引入。

程序验证

我将通过编写一个"Hello World"程序来验证 Vue.js 框架是否已被成功引入，具体步骤如下：

1. 在code目录下创建一个名为01_sayHello的项目目录，并在该目录下设置以下两个子目录：

   • img目录：用于存放图片资源。
   • js目录：用于存放自定义 JavaScript 脚本文件。

2. 将名为logo.png的图表文件存储到code/01_sayHello/img目录中。

3. 在code/01_sayHello目录中创建一个名为index.htm的 HTML 文档，并在其中输入如下代码：

   <!DOCTYPE html>
   <html lang="zh-cn">
   <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">
       <script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
       <script defer="defer" src="js/main.js"></script>
       <title>你好，Vue.js</title>
   </head>
   <body>
      <p id="app">
         <h1> {{ sayHello }} </h1>
         <img :src="vueLogo" style="width:200px">
      </p>
   </body>
   </html>

4. 在code/01_sayHello/js目录中创建一个名为main.js的 JavaScript 脚本文档，并在其中输入如下代码：

   // 程序名称： sayHello
   // 实现目标：
   //   1. 验证 Vue.js 执行环境
   //   2. 体验构建 Vue.js 程序的基本步骤
   
   const app = new Vue({
      el: '#app',
      data:{
        sayHello: '你好，Vue.js！',
        vueLogo: 'img/logo.png'
      }
   });

   接下来只需将相关的 Web 服务运行起来（该服务器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 浏览器中看到如下页面，就说明 Vue.js 框架已经被引入到了程序中，并被成功执行起来了。

   

   更多相关免费学习推荐：js视频教程

   위 내용은 Vue.js 학습 기록 1: Vue.js 계획 및 이해 학습의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!