Vue.js learning record one: learning planning and understanding Vue.js

Vue.js Tutorial column introduces learning planning and understanding Vue.js, you can learn together.

This study note will record some of the program codes and learning experiences I personally wrote when learning the Vue.js framework. To do this, I will create a directory named vuejs under the ProgrammingLanguage/JavaScript directory, and set up the following two subdirectories under this directory:

## The
• #note directory is used to store notes in markdown format. The
• code directory is used to store the program code recorded in the notes.

Learning plan

Learning basics:
• Master the basic knowledge related to HTML, CSS, and JavaScript. Ok, I
  • master the basic usage of npm package manager.
  • Understand the basic principles of B/S application architecture.
Learning materials:
• Video tutorial: Vue.js teaching video of Dark Horse Programmer
  • Online documentation: Vue.js official tutorial
  • Reference book: "Vue.js in simple terms"
Learning goal:
• Develop a "Cloud Notepad" application.

Part 1: Understanding the Vue.js Framework

This part of the notes will record my conceptual understanding of the Vue.js framework, as well as my experience in the project Introduce the specific methods of the framework and write a "Hello World" program.

Vue.js Introduction

Vue.js is a progressive framework for building user interfaces. The framework is designed to be applied layer by layer from the bottom up. Its core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects. On the other hand, when combined with a modern tool chain and various supporting libraries, Vue.js is fully capable of driving complex single-page applications. In short, Vue.js has the following characteristics:

uses a template syntax similar to traditional HTML, which may be easier for novices to get started.
1. Uses a virtual DOM model to simplify the operation of page elements.
2. The use of responsive view components helps improve the user experience of the program interface.
3. The page rendering speed is extremely fast, which can give the application good execution performance.
4. It can provide routing interfaces for building complex large-scale applications like React.
5. It can also provide a simple-to-use and well-encapsulated operation interface like jQuery.

Of course, since the author of Vue.js is a Chinese, the Chinese information of the Vue.js community is also richer than that of other JavaScript framework communities. This is for many users who are accustomed to reading in Chinese. This may be the reason for choosing to use this framework.

Introducing the Vue.js framework

Like most JavaScript front-end libraries and application frameworks, there are two main ways to introduce the Vue.js framework into your own project: CDN reference and local reference. Let’s learn about them separately below.

CDN Quote

CDN is the abbreviation of Content Delivery Network or Content Distribution Network, which is a server that uses the existing Internet system closest to the target user. A faster and more reliable way to distribute music, pictures, videos, applications and other data materials, aiming to provide high performance, scalability and low-cost network content delivery to users. In other words, when using the CDN reference method, the Vue.js framework file will be stored on a server node in the designated CDN service network, and the service will be responsible for the access load and maintenance of the framework file. version of the framework, and we only need to reference the URL of the corresponding CDN service in the

<script> tag of the HTML document, like this:

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

In the above example, I test To use the CDN service provided by

cdn.jsdelivr.net to reference the Vue.js framework, this is also the service recommended in the Vue.js official tutorial. As for whether to reference the version of the development environment or the version of the production environment, it depends on the specific usage scenario. Under normal circumstances, I would choose to use the development environment version with relatively rich feedback information during the program development stage, and wait until the program is released before switching to the production environment version that pursues more execution efficiency. Let’s take a look at the advantages of using CDN as a reference method:

• 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视频教程

   The above is the detailed content of Vue.js learning record one: learning planning and understanding Vue.js. For more information, please follow other related articles on the PHP Chinese website!