Vue.js предоставляет нам различные директивы для интерполяции данных различным образом. Здесь мы обсуждаем рендеринг данных в формате HTML. Vue.js предоставляет нам директиву v-html, которая помогает нам отображать необработанный HTML в div. Это очень полезно в тех случаях, когда вы хотите предоставить пользователям возможность отображать HTML-данные на экране из пользовательского ввода. Типичные варианты использования следующие:

  1. Система комментариев
  2. Блог Двигатели
  3. Редакторы пользовательского интерфейса
  4. Редакторы кода в Интернете.

Эта конкретная статья будет посвящена пониманию этой директивы на простом примере, где мы создаем простой редактор кода, используя текстовую область вместе с Twitter Bootstrap 3. Bootstrap поможет с макетом для редактора. Давайте начнем с редактора и посмотрим директиву v-html в действии.

Реализация редактора HTML

Это требует от нас написания очень простого интерфейса с использованием Bootstrap и HTML. Код разметки показан ниже.

<div class="container" id="app">
  <h3>
Sample HTML Editor
</h3>
  <div class="row">
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">Editor</h3>
        </div>
        <div class="panel-body">
          <textarea id="editor" v-model="text"></textarea>
        </div>
      </div>
    </div>
    <div class="col-sm-6">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">HTML Output</h3>
        </div>
        <div class="panel-body">
          <div class="outputPanel" v-html="text"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Приведенный выше код приведет к изображению, показанному ниже.

Создание простого HTML-редактора с помощью v-html

Давайте напишем некоторый код Vue.js для создания экземпляра нашего приложения и сделаем некоторую привязку данных для текстовой области. Однако вы можете заметить несколько вещей в HTML-коде.

  1. Мы ссылаемся на приложение, используя приложение id
  2. Мы используем Bootstrap, чтобы этот пользовательский интерфейс выглядел и чувствовал себя хорошо.
  3. Textarea привязывается с помощью v-model к тексту свойства

Код Vue.js выглядит так, как показано ниже.

var app = new Vue({
  el: '#app',
  data: {
    text: ''
  }
});

Этот код является забавной частью. Когда вы посмотрите на приведенный выше код, вы не найдете ничего особенного, кроме привязки данных к текстовому свойству. Это приводит к тому, что свойство данных Textarea будет двунаправленно привязано к div, который отображает HTML с использованием v-html. Теперь это создает волшебство. Он отображает Raw HTML в Div, и вы можете видеть, как он работает как шарм. Чтобы увидеть это в действии, взгляните на GIF и JSFiddle.

Редактор HTML с некоторыми образцами HTML и Bootstrap+HTML

Вот как директива v-html вносит большую разницу в то, как вы представляете данные. Это позволяет вам использовать Raw HTML, но будьте уверены, что это может привести к уязвимостям XSS, которые вам, возможно, придется изучить. В следующей статье давайте обсудим, как мы предотвратим уязвимости XSS. Будет интересно посмотреть, как это работает.

Первоначально опубликовано в The Web Juice.