Vue中的字符串模板的使用
1、HTML模板和字符串模板
HTML模板:直接在HTML页面挂载的模板。(即非字符串模板)
非字符串模板:在单文件里用 <template></template> 指定的模板,换句话说,写在 html 中的就是非字符串模板。
字符串模板:在js字符串中定义的模板。
2、Props属性:HTML 特性是不区分大小写的。所以,当使用的不是字符串模板时,camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名):
(1)、HTML模板:
Vue.component('child', { // 在 JavaScript 中使用 camelCase props: ['myMessage'], template: '<span>{{ myMessage }}</span>' })
(2)、字符串模板:
<!-- 在 HTML 中使用kebab-case --> <child my-message="hello!"></child>
3、组件名大小写:
注意:当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候,我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
(1)、使用 kebab-case:
Vue.component('my-component-name', { /* ... */ });
当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 <my-component-name>。
(2)、使用 PascalCase:
Vue.component('MyComponentName', { /* ... */ })
当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板,如:在单个组件的<template></template>中 或者 index.html中直接CDN引入vue.js的<div id="app"></div>中) 使用时只有 kebab-case 是有效的,使用驼峰式,是不会渲染的。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- C++使用模板实现数值型字符串类型间的转换
- 在模板类中使用字符串作为无类型模板参数
- 使用字符串作为函数模板的实参
- 在vscode里使用.vue代码模板的方法
- 在模板类中使用字符串作为无类型模板参数
- ThinkPHP 3.2.2 视图模板中使用字符串截取函数
- arttemplate模板--字符串拼接中使用模板语法
- 一个关于模板字符串的使用技巧,以及 String.raw() 函数
- [C/C++标准库]_[初级]_[使用模板删除字符串前后空格((w)string space)]
- [C/C++标准库]_[初级]_[使用模板删除字符串前后空格((w)string space)]
- vue 模板的简单使用
- vuejs模板使用方法
- 浅谈ES6 模板字符串的具体使用方法
- 使用vscode,新建vue模板
- ThinkPHP 3.2.2 视图模板中使用字符串截取函数
- ES6中字符串模板的使用
- vue中如何在v-for中动态的使用将index拼接字符串后绑定id属性
- 新版vue-cli模板下本地开发环境使用node服务器跨域的方法
- 将前端svg图片存为字符串,供world模板使用
- Java中使用根据模板拼接字符串的两种方式