# DOM
# template
Тип:
string
Подробности:
Строковый шаблон, который будет использоваться в качестве разметки для экземпляра компонента. Этот шаблон будет заменять
innerHTML
элемента к которому монтируется. Любая другая разметка внутри элемента для монтирования будет проигнорирована, за исключением случаев когда в шаблоне указаны слоты для распределения контента.Если строка начинается с
#
, то она будет использоваться в качествеquerySelector
, а в качестве шаблона будет использован innerHTML выбранного элемента. Это позволяет использовать частый трюк с<script type="x-template">
для подключения шаблонов.Примечание
С точки зрения безопасности, нужно использовать только те шаблоны Vue, которым можно доверять. Никогда не используйте в качестве шаблона содержимое, создаваемое пользователем.
Примечание
Если в опциях Vue присутствует render-функция, то шаблон будет проигнорирован.
См. также:
# render
Тип:
Function
Подробности:
Альтернатива строковым шаблонам, позволяющая использовать всю мощь JavaScript.
Использование:
<div id="app" class="demo"> <my-title blog-title="Шикарный Vue"></my-title> </div>
1
2
3const { createApp, h } = Vue const app = createApp({}) app.component('my-title', { render() { return h( 'h1', // имя тега, this.blogTitle // содержимое тега ) }, props: { blogTitle: { type: String, required: true } } }) app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20Примечание
Функция
render
имеет приоритет над render-функцией, скомпилированной из опцииtemplate
, или HTML-шаблоном в DOM монтируемого элементаСм. также: Render-функции