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 相关文章推荐
地震发生中逃生十大法则
May 12 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
JavaScript中的作用域链和闭包
Jun 30 Javascript
js解析与序列化json数据(二)序列化探讨
Feb 01 Javascript
js实现tab切换效果实例
Sep 16 Javascript
基于jquery实现下拉框美化特效
Feb 02 Javascript
微信小程序中子页面向父页面传值实例详解
Mar 20 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
Jan 08 jQuery
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
教你部署vue项目到docker
Apr 05 Vue.js
快速解决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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP、Java des加密解密实例
2015/04/27 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
事件模型在各浏览器中存在差异
2010/10/20 Javascript
JS模拟面向对象全解(二、类型与赋值)
2011/07/13 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
JavaScript使用Replace进行字符串替换的方法
2015/04/14 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
详解JavaScript的策略模式编程
2015/06/24 Javascript
学习使用bootstrap3栅格系统
2016/04/12 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
vue中如何创建多个ueditor实例教程
2017/11/14 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
JavaScript实现多态和继承的封装操作示例
2018/08/20 Javascript
Angular使用Restful的增删改
2018/12/28 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
python实现简单中文词频统计示例
2017/11/08 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
基于Python快速处理PDF表格数据
2020/06/03 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
党校培训思想汇报
2014/01/03 职场文书
致长跑运动员加油稿
2014/02/20 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
党的群众路线教育实践活动个人整改措施落实情况
2014/11/04 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
Redis 异步机制
2022/05/15 Redis