Vue 字串模板的介紹
- 不言原創
- 2018-07-11 17:05:312127瀏覽
這篇文章主要介紹了關於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中文網！
相關推薦：
以上是Vue 字串模板的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn