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获取事件对象代码
Aug 05 Javascript
JavaScript中使用Object.create()创建对象介绍
Dec 30 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
将鼠标焦点定位到文本框最后(代码分享)
Jan 11 Javascript
js中Number数字数值运算后值不对的解决方法
Feb 28 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
jsTree事件和交互以及插件plugins详解
Aug 29 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 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
PHP实现文件安全下载
2006/10/09 PHP
PHP面向对象分析设计的经验原则
2008/09/20 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
在PHP中养成7个面向对象的好习惯
2010/07/17 PHP
php 文件上传类代码
2011/08/06 PHP
PHP用星号隐藏部份用户名、身份证、IP、手机号等实例
2014/04/08 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
jQuery图片拖动组件Dropzone用法示例
2017/01/17 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
vue移动端实现红包雨效果
2020/06/23 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python程序中的观察者模式结构编写示例
2016/05/27 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
python中kmeans聚类实现代码
2018/02/23 Python
用Python实现BP神经网络(附代码)
2019/07/10 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
社会实践评语
2014/04/28 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
JavaScript原始值与包装对象的详细介绍
2021/05/11 Javascript
Python可视化学习之seaborn绘制矩阵图详解
2022/02/24 Python