Step 1: Setting Up Your Project

• Create a Project Folder

  • Create a new folder on your computer and name it library-website.
• Create HTML File

  • Inside library-website, create a new file named index.html.
• Create CSS File

  • Inside library-website, create a new file named styles.css.
• Create JavaScript File

  • Inside library-website, create a new file named scripts.js.

Step 2: Writing HTML

Open index.html in your text editor and add the following code:

Step 3: Styling with CSS

Open styles.css in your text editor and add the following code:

Step 4: Adding Interactivity with JavaScript

Open scripts.js in your text editor and add the following code:

Lambda functions expression

Step 5: Running Your Website

• Open index.html in your web browser / VS code Preview

  

So, what is going on?

• When the HTML document is fully loaded, the DOMContentLoaded event is triggered.
• The event listener's function runs, which first defines an array of books.
• The function then gets the reference to the <ul> element with the id book-list.
• It iterates over the books array, creating a new <li> element for each book and setting its text to the book title.
• Each <li> element is appended to the <ul> element, resulting in the display of the list of books on the webpage.

当 HTML 文档完全加载时，会触发 DOMContentLoaded 事件。 事件监听器的函数运行，首先定义一个书籍数组。 然后，该函数获取对 id 为 book-list <ul> 元素的引用。 它遍历 books 数组，为每本书创建一个新的 <li> 元素并将其文本设置为书名。 每个 <li> 元素都附加到 <ul> 元素，从而在网页上显示书籍列表。

So.... so if we can do this via JS, whats the point of JS frameworks like Vue?

虽然纯 JavaScript 已经足够强大，足以完成简单的任务，但像 Vue.js 这样的 JavaScript 框架提供了一种更结构化、更高效的方式来开发复杂的应用程序。它们提供许多功能，有助于管理状态、处理用户交互，并维护简洁、模块化的代码库，从而使开发速度更快、更愉快。

使用像 Vue.js 这样的框架可以帮助您更快、更少错误地构建应用程序，就像使用预制组件可以帮助您更高效地建造房屋一样。