Vue中的字符串模板的使用


Posted in Javascript onMay 17, 2018

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 是有效的,使用驼峰式,是不会渲染的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
基于jquery的代码显示区域自动拉长效果
Dec 07 Javascript
浅析JavaScript基本类型与引用类型
May 28 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
Vue.js学习笔记之修饰符详解
Jul 25 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
JS回调函数深入理解
Oct 16 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
快速解决brew安装特定版本flow的问题
May 17 #Javascript
vue2.0 实现导航守卫的具体用法(路由守卫)
May 17 #Javascript
通过一次报错详细谈谈Point事件
May 17 #Javascript
AngularJS日期格式化常见操作实例分析
May 17 #Javascript
Node 升级到最新稳定版的方法分享
May 17 #Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 #Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
深入PHP FTP类的详解
2013/06/13 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
ThinkPHP的模版中调用session数据的方法
2014/07/01 PHP
php常见的魔术方法详解
2014/12/25 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP使用strrev翻转中文乱码问题的解决方法
2017/01/13 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
清除js缓存的多种方法总结
2016/12/09 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Vue如何实现监听组件原生事件
2020/07/03 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python开发常用的一些开源Package分享
2015/02/14 Python
django框架CSRF防护原理与用法分析
2019/07/22 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python模拟哔哩哔哩滑块登入验证的实现
2020/04/24 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
python实现马丁策略的实例详解
2021/01/15 Python
python openpyxl模块的使用详解
2021/02/25 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
公务员的自我鉴定
2013/10/26 职场文书
公司人事任命通知
2015/04/20 职场文书
未婚证明格式
2015/06/15 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
mysql部分操作
2021/04/05 MySQL
python 安全地删除列表元素的方法
2022/03/16 Python
PostgreSQL数据库创建并使用视图以及子查询
2022/04/11 PostgreSQL