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实现让访问者自助选择网页文字颜色的方法
Feb 24 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
Mar 09 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
vuex的简单使用教程
Feb 02 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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 函数中使用static的说明
2012/06/01 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
实用的PHP带公钥加密类分享(每次加密结果都不一样哦)
2014/08/20 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
YII Framework框架教程之安全方案详解
2016/03/14 PHP
php 判断过去离现在几年的函数(实例代码)
2016/11/15 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
2017/07/17 jQuery
React学习笔记之列表渲染示例详解
2017/08/22 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
JavaScript 有用的代码片段和 trick
2018/02/22 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
欧洲顶级的童装奢侈品购物网站:Bambini Fashion(面向全球)
2018/04/24 全球购物
C#面试常见问题
2013/02/25 面试题
证券期货行业个人的自我评价
2013/12/26 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
优秀干部获奖感言
2014/01/31 职场文书
静心口服夜广告词
2014/03/20 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
公证委托书标准格式
2014/09/11 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
工厂见习报告范文
2014/10/31 职场文书