Heim> Web-Frontend> View.js> Hauptteil

Vue.js-Lernaufzeichnung eins: Lernen, Planen und Verstehen von Vue.js

coldplay.xixi
Freigeben: 2020-10-12 17:15:32
nach vorne
1979 Leute haben es durchsucht

Vue.js-TutorialDie Kolumne stellt die Lernplanung und das Verständnis von Vue.js vor. Sie können gemeinsam lernen.

Vue.js-Lernaufzeichnung eins: Lernen, Planen und Verstehen von Vue.js

In dieser Studiennotiz werden einige der Programmcodes und Lernerfahrungen aufgezeichnet, die ich persönlich beim Erlernen des Vue.js-Frameworks geschrieben habe. Dazu erstelle ich ein Verzeichnis mit dem Namenvuejsim VerzeichnisProgrammingLanguage/JavaScriptund richte in diesem Verzeichnis die folgenden zwei Unterverzeichnisse ein: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 文档的

Nach dem Login kopieren

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

  • Das Verzeichnisnotewird zum Speichern von Notizen immarkdown-Format verwendet.
  • Das Verzeichniscodewird zum Speichern des in den Notizen aufgezeichneten Programmcodes verwendet.

Lernplan

  • Grundlagen des Lernens:
    • Beherrschen Sie die Grundkenntnisse in Bezug auf HTML, CSS und JavaScript. Nun, ich habe die grundlegende Verwendung des npm-Paketmanagers verstanden.
    • Verstehen Sie die Grundprinzipien der B/S-Anwendungsarchitektur.
  • Lernmaterialien:
    • Video-Tutorial: Vue.js-Lehrvideo von Dark Horse Programmer
    • Online-Dokumentation: Vue.js Official Tutorial
    • Referenzbuch: „Vue.js in einfachen Worten“
  • Lernziele:
    • Entwickeln Sie eine „Cloud Notepad“-Anwendung .

Teil 1: Das Vue.js-Framework verstehen

Dieser Teil In den Notizen werde ich mein konzeptionelles Verständnis des Vue.js-Frameworks sowie die spezifischen Methoden zur Einführung des Frameworks in das Projekt und zum Schreiben eines „Hello World“-Programms aufzeichnen.

Vue.js-Einführung

Vue.js ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Das Framework ist so konzipiert, dass es Schicht für Schicht von unten nach oben angewendet werden kann. Seine Kernbibliothek konzentriert sich nur auf die Ansichtsebene, die nicht nur einfach zu starten ist, sondern auch leicht in Bibliotheken von Drittanbietern oder bestehende Projekte integriert werden kann. Andererseits ist Vue.js in Kombination mit einer modernen Toolkette und verschiedenen unterstützenden Bibliotheken vollständig in der Lage, komplexe Single-Page-Anwendungen zu steuern. Kurz gesagt, Vue.js weist die folgenden Eigenschaften auf:
  1. Verwendet eine Vorlagensyntax ähnlich der von herkömmlichem HTML, was für Anfänger möglicherweise den Einstieg erleichtert.
  2. Verwendung eines virtuellen DOM-Modells zur Vereinfachung der Bedienung von Seitenelementen.
  3. Die Verwendung von responsiven Ansichtskomponenten trägt dazu bei, das Benutzererlebnis der Programmoberfläche zu verbessern.
  4. Die Seitenrendering-Geschwindigkeit ist extrem hoch, was der Anwendung eine gute Ausführungsleistung verleihen kann.
  5. Es kann auch Routing-Schnittstellen für die Erstellung komplexer Großanwendungen wie React bereitstellen.
  6. Es kann auch eine einfach zu verwendende und gut gekapselte Bedienoberfläche wie jQuery bereitstellen.
Da der Autor von Vue.js ein Chinese ist, sind die chinesischen Informationen der Vue.js-Community natürlich auch umfangreicher als die anderer JavaScript-Framework-Communitys Ich bin es gewohnt, auf Chinesisch zu lesen. Dies könnte der Grund sein, warum ich mich für die Verwendung dieses Frameworks entschieden habe.

Vue.js-Framework einführen

Wie die meisten JavaScript-Frontend-Bibliotheken und Anwendungsframeworks umfasst die Einführung des Vue.js-Frameworks in Ihr eigenes Projekt hauptsächlich CDN-Referenzen und dort sind zwei Methoden der lokalen Referenz.

CDN-Zitat

CDN ist die Abkürzung für Content Delivery Network oder Content Distribution Network. Dabei handelt es sich um eine Methode, die das vorhandene Internetsystem nutzt, das dem Ziel am nächsten liegt. Der Server des Benutzers ist ein Schnellere und zuverlässigere Möglichkeit, Musik, Bilder, Videos, Anwendungen und andere Datenmaterialien zu verteilen. Der Zweck besteht darin, den Benutzern hohe Leistung, Skalierbarkeit und kostengünstige Netzwerkinhalte bereitzustellen. Mit anderen Worten: Bei Verwendung der CDN-Referenzmethode wird die Vue.js-Framework-Datei auf einem Serverknoten im angegebenen CDN-Dienstnetzwerk gespeichert und der Dienst ist für die Zugriffslast und Wartung der Framework-Datei verantwortlich Das Framework, und wir müssen nur auf die URL des entsprechenden CDN-Dienstes im
Nach dem Login kopieren

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

程序验证

我将通过编写一个"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 文档,并在其中输入如下代码:

            你好,Vue.js 
    

    {{ sayHello }}

    Nach dem Login kopieren
  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' } });
    Nach dem Login kopieren

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

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

    Das obige ist der detaillierte Inhalt vonVue.js-Lernaufzeichnung eins: Lernen, Planen und Verstehen von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!