update vue md

GuoXiCheng · Jul 15, 2024 · 84c6a2c · 84c6a2c
1 parent 6ecf399
commit 84c6a2c
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/src/.vitepress/sidebars/vue.yaml b/src/.vitepress/sidebars/vue.yaml
@@ -5,16 +5,20 @@
         link: /frontend/vue/introduction/what-is-vue
   - text: Vue
     items:
-      - text: 核心概念
+      - text: 模版语法
         items:
-          - text: 模版语法
-            link: /frontend/vue/core-concepts/template-syntax
-            items:
-              - text: 文本插值
-                link: /frontend/vue/core-concepts/template-syntax#文本插值
-              - text: 原始 HTML
-                link: /frontend/vue/core-concepts/template-syntax#原始-html
-              - text: 属性绑定
-                link: /frontend/vue/core-concepts/template-syntax#属性绑定
-              - text: 表达式
-                link: /frontend/vue/core-concepts/template-syntax#表达式
+          - text: 插值表达式
+            link: /frontend/vue/template-syntax/interpolation
+      # - text: 核心概念
+      #   items:
+      #     - text: 模版语法
+      #       link: /frontend/vue/core-concepts/template-syntax
+      #       items:
+      #         - text: 文本插值
+      #           link: /frontend/vue/core-concepts/template-syntax#文本插值
+      #         - text: 原始 HTML
+      #           link: /frontend/vue/core-concepts/template-syntax#原始-html
+      #         - text: 属性绑定
+      #           link: /frontend/vue/core-concepts/template-syntax#属性绑定
+      #         - text: 表达式
+      #           link: /frontend/vue/core-concepts/template-syntax#表达式
diff --git a/src/frontend/vue/template-syntax/interpolation.md b/src/frontend/vue/template-syntax/interpolation.md
@@ -0,0 +1,11 @@
+# 插值表达式
+
+## 什么是插值表达式
+
+插值表达式允许在 HTML 模版中使用双大括号 `{{}}` 包裹 Javascript 表达式，表达式的值会被直接插入到模版中。
+
+## 插值表达式的使用
+
+所有可以被求值的 Javascript 代码都可以用在插值表达式中，例如：文本内容、三元表达式、数字计算、函数调用等。
+
+<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/Interpolation.vue