Vue.js

# 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
    3
    const { 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-функции

← Хуки жизненного цикла →