Vue 字串模板的介紹

這篇文章主要介紹了關於Vue 字串模板的介紹，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

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></child>

3、元件名稱大小寫：

注意：當直接在DOM 中使用一個元件(而不是在字串範本或單文件元件) 的時候，我們強烈建議遵循W3C 規範中的自訂元件名(字母全小寫且必須包含一個連字號)。這會幫助你避免和目前以及未來的 HTML 元素相衝突。

(1)、使用kebab-case:

Vue.component('my-component-name', { /* ... */ });

當使用kebab-case (短橫線分隔命名) 定義一個元件時，你也必須在引用這個自訂元素時使用kebab-case，例如。

(2)、使用PascalCase:

Vue.component('MyComponentName', { /* ... */ })

當使用PascalCase (駝峰式命名) 定義一個元件時，你在引用這個自訂元素時兩種命名法都可以使用。也就是說 和 都是可以接受的。 注意，儘管如此，直接在DOM (即非字串的模板，如：在單個組件的<template></template>中或者index.html中直接CDN引入vue.js的<p id="app"></p>中) 使用時只有kebab-case 是有效的，使用駝峰式，是不會渲染的。

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

分享Nodejs存取微信JS-SDK的全過程

Vue Mock.js如何搭建前端獨立開發環境

以上是Vue 字串模板的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！