Merge pull request #78 from GuoXiCheng/dev-c

Dev c

src/.vitepress/config.mts

@@ -21,6 +21,7 @@ export default defineConfig(
       nav: [
         { text: "Home", link: "/" },
         { text: "JavaScript", link: "/javascript/index" },
+        { text: "Vue", link: "/vue/index" },
         { text: "前端", link: "/frontend/index" },
         { text: "后端", link: "/backend/nodejs/index" },
         { text: "云原生", link: "/cloud-native/index" },

src/.vitepress/sidebar.yaml

@@ -1,10 +1,10 @@
 /javascript:
   - text: JavaScript 介绍
     items:
+      - text: 什么是 JavaScript
+        link: /javascript/introduction/what-is-javascript
       - text: JavaScript 发展历程
         link: /javascript/introduction/history-of-javascript
-      - text: JavaScript 核心实现
-        link: /javascript/introduction/core-implementation
   - text: ECMAScript
     items:
       - text: ES 的版本
@@ -110,6 +110,13 @@
     items:
       - text: screen
         link: /screen
+/vue:
+  - text: Vue
+    items:
+      - text: 核心概念
+        items:
+          - text: 模版语法
+            link: /vue/core-concepts/template-syntax
 /frontend:
   - text: React
     items:

src/index.md

@@ -11,8 +11,8 @@ import MarkMap from './MarkMap.vue';
 - JS全栈知识体系
   - JavaScript
       - JavaScript 介绍
+        - [什么是 JavaScript](javascript/introduction/what-is-javascript)
         - [JavaScript 发展历程](javascript/introduction/history-of-javascript)
-        - [JavaScript 核心实现](javascript/introduction/core-implementation)
       - ECMAScript
         - [ES 的版本](javascript/ecma-script/es-version)
         - JavaScript 引擎
@@ -117,6 +117,13 @@ import MarkMap from './MarkMap.vue';
         - [受控组件](frontend/react/form/controlled)
         - [非受控组件](frontend/react/form/uncontrolled)
         - [FormData](frontend/react/form/form-data)
+  - Vue
+    - 核心概念
+      - [模版语法](vue/core-concepts/template-syntax)
+        - [插值](vue/core-concepts/template-syntax#文本插值)
+        - [原始 HTML](vue/core-concepts/template-syntax#原始-html)
+        - [属性绑定](vue/core-concepts/template-syntax#属性绑定)
+        - [表达式](vue/core-concepts/template-syntax#表达式)
   - 后端
     - NodeJS
       - [关于 NodeJS](backend/nodejs/about-nodejs)

src/javascript/introduction/what-is-javascript.md

@@ -0,0 +1,28 @@
+# 什么是 JavaScript
+
+## JavaScript 是什么
+
+JavaScript 问世之初是一种用于表单验证的客户端脚本语言（为了解决表单验证需要与服务器一次往返通信的问题）。
+
+现如今，JavaScript 早已不再局限于数据验证，而是发展成为一门公认的主流编程语言，能够实现复杂的计算和交互。
+
+浏览器是 JavaScript 最早的宿主环境，浏览器环境允许 JavaScript 发送网络请求、操作 DOM、接收用户输入等。
+
+2010 年以后，Node.js 是 JavaScript 另一宿主环境，Node.js 给于 JavaScript 整个操作系统的访问权限，使得 JavaScript 能够在服务器端运行。
+
+## JavaScript 的核心实现
+
+完整的 JavaScript 包含以下三个部分：
+
+- ECMAScript：由 ECMA-262 定义并提供核心功能
+- DOM：提供与网页内容交互的方法和接口
+- BOM：提供与浏览器交互的方法和接口
+
+```mermaid
+graph TD
+    subgraph A[JavaScript]
+        B[ECMAScript]
+        C[DOM（文档对象模型）]
+        D[BOM（浏览器对象模型）]
+    end
+```

src/vue/core-concepts/template-syntax.md

@@ -0,0 +1,50 @@
+# 模版语法
+
+## 文本插值
+
+使用双大括号可以绑定数据到文本节点：
+
+```vue
+<span>Message: {{ msg }}</span>
+```
+
+## 原始 HTML
+
+使用 `v-html` 指令可以输出原始 HTML：
+
+```vue
+<div v-html="rawHtml"></div>
+```
+
+## 属性绑定
+
+使用 `v-bind` 指令可以绑定元素属性：
+
+```vue
+<div v-bind:id="dynamicId"></div>
+
+<!-- 简写 -->
+<div :id="dynamicId"></div>
+
+<!-- 同名简写（vue3.4以上） -->
+<div :id></div>
+```
+
+## 表达式
+
+Vue 支持在模板中绑定表达式：
+
+```vue
+{{ number + 1 }}
+
+{{ ok ? "YES" : "NO" }}
+
+{{ message.split("").reverse().join("") }}
+
+<div :id="`list-${id}`"></div>
+
+<!-- 调用函数 -->
+<time :title="toTitleDate(date)" :datetime="date">
+  {{ formatDate(date) }}
+</time>
+```