专栏首页前端博客:https://alili.techVue 字符串模板 dom模板

抱歉,你查看的文章已删除

Vue 字符串模板 dom模板

Vue中的字符串模板

1、HTML模板和字符串模板

HTML模板(dom模板):直接在HTML页面挂载的模板,就是原先写在页面上的,能被浏览器识别的HTML结构,会在一加载就被浏览器渲染,然后js获取dom节点的内容, 形成dom模板。(即非字符串模板) 字符串模板:可能原先放在服务器上的,script标签或者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 是有效的,使用驼峰式,是不会渲染的。

版权声明

本文资源来源互联网,仅供学习研究使用,版权归该资源的合法拥有者所有,

本文仅用于学习、研究和交流目的。转载请注明出处、完整链接以及原作者。

原作者若认为本站侵犯了您的版权,请联系我们,我们会立即删除!

原文标题

Vue 字符串模板 dom模板

原文链接

https://segmentfault.com/a/1190000014888725

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【漏洞预警】Atlassian Jira未授权模板注入漏洞(CVE-2019-11581)预警通告

    近日,Jira官方公开了服务器模板注入漏洞,该漏洞存在于Jira Server和Jira Data Center中,服务器满足以下任意一个条件,即可导致远程代码...

    绿盟科技安全情报
  • JavaScript ES6 模板字符串

    偶然发现这个新东西,ES6也有模板了,是使用反引号`,来表示的。 这个新东西被称为字符串字面量,就是模板字符串。它使JS也有了简单的字符串插值特性。 为什么说是...

    web前端教室
  • 使用FTP连接池封装工具类

    早前的思路是将FTP连接的管理(对象池功能)与FTP工具类(上传下载方法)在一个工程中实现,在工具类中调用是模板类提供的模板方法, 由模板方法与对象池打交道——...

    用户3579639
  • 前端页面热更新实现方案

    腾讯NEXT学位
  • django-4-模板标签,模板继承

    {% if %}{% elif %}{% else %}{% endif %} 判断

    py3study
  • 设计模式—— 十 :模板方法模式

    模板方法模式是结构最简单的行为型设计模式,在其结构中只存在父类与子类之间的继承关 系。通过使用模板方法模式,可以将一些复杂流程的实现步骤封装在一系列基本方法中,...

    三分恶
  • 前端基础-ECMAScript字符串模板(模板字面量)

    ES6中提供了字符串模板语法,允许使用反引号(倒引号) `` 来创建字符串,里面可以包含${变量名}形式的变量占位符。 其中的变量会被解析。

    cwl_java

扫码关注云+社区

领取腾讯云代金券