Vue的字符串模板

这两天看Vue的时候,里面提到字符串模板和非字符串模板,搞的有点儿懵圈,特地查了下,也记录下,免得后面再发生这样的事儿(记性不太好,硬伤呀。。。)

以下是教程里的原文:

HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名):

     
     
Vue.component( 'child', {
// 在 JavaScript 中使用 camelCase
props: [ 'myMessage'],
template: '<span>{{ myMessage }}</span>'
})
     
     
<!-- 在 HTML 中使用 kebab-case -->
<child my-message="hello!"> </child>

如果你使用字符串模板,则没有这些限制。


嗯,还是上面说过的,看到这里,不知道字符串模板是啥,非字符串模板是啥.....下面就来说道说道!

字符串模板:指的是在组件选项里用 template:"" 指定的模板,换句话说,写在 js 中的 template:"" 中的就是字符串模板。比如下面这个:

var tmp = new Vue({
    template:"<myComponent></myComponent>"
});

非字符串模板:在单文件里用 <template></template> 指定的模板,换句话说,写在 html 中的就是非字符串模板。



### 如何在 VSCode 中快速生成 Vue 模板字符串 为了在 Visual Studio Code (VSCode) 中高效地创建 Vue 模板字符串,可以利用 Vetur 插件来提供支持。Vetur 是一款专门为 Vue.js 开发设计的强大工具,能够显著提升开发体验[^1]。 #### 配置 Vetur 插件以支持模板字符串 安装并启用 Vetur 后,可以通过以下方式实现 Vue 模板字符串的快速生成: - **自动补全功能**:当编写 `<template>` 标签内的 HTML 结构时,Vetur 提供基于上下文的代码补全建议,从而减少手动输入的工作量。 - **片段快捷键**:通过配置用户自定义代码片段(User Snippets),可以在编辑器中设置专属的 Vue 模板字符串生成规则。以下是示例代码片段文件的内容: ```json { "Print Template String": { "prefix": "vts", "body": [ "<template>\n", " <div>${1}</div>\n", "</template>\n\n", "<script>\n", "export default {\n", " data() {\n", " return {\n", " ${2}\n", " };\n", " },\n", "}\n", "</script>" ], "description": "Create a Vue template string" } } ``` 上述 JSON 片段允许开发者仅需输入 `vts` 即可触发完整的 Vue 文件结构生成,其中 `${1}` 和 `${2}` 表示光标的占位符位置。 #### 主题与样式增强插件推荐 除了核心功能外,还可以考虑搭配其他辅助插件优化开发环境。例如,“Dracula Official” 可以为用户提供一种深色主题风格,而 “vscode-styled-components” 则有助于处理嵌套 CSS 的语法高亮显示[^3]。 综上所述,在 VSCode 上借助像 Vetur 这样的专用扩展以及合理定制化的个人偏好设定,完全可以轻松达成高效的 Vue 模板字符串构建目标。 ```javascript // 示例:Vue 组件中的模板字符串应用 <template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello, world!' }; }, }; </script> ```
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值