diff --git a/src/.vitepress/sidebars/vue.yaml b/src/.vitepress/sidebars/vue.yaml index d93055c..e86c304 100644 --- 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#表达式 \ No newline at end of file + - 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#表达式 \ No newline at end of file diff --git a/src/frontend/vue/template-syntax/interpolation.md b/src/frontend/vue/template-syntax/interpolation.md new file mode 100644 index 0000000..4c60126 --- /dev/null +++ b/src/frontend/vue/template-syntax/interpolation.md @@ -0,0 +1,11 @@ +# 插值表达式 + +## 什么是插值表达式 + +插值表达式允许在 HTML 模版中使用双大括号 `{{}}` 包裹 Javascript 表达式,表达式的值会被直接插入到模版中。 + +## 插值表达式的使用 + +所有可以被求值的 Javascript 代码都可以用在插值表达式中,例如:文本内容、三元表达式、数字计算、函数调用等。 + +<<< @/../projects/vue-sandbox/src/components/TemplateSyntax/Interpolation.vue