Vue.js предоставляет нам различные директивы для интерполяции данных различным образом. Здесь мы обсуждаем рендеринг данных в формате HTML. Vue.js предоставляет нам директиву v-html, которая помогает нам отображать необработанный HTML в div. Это очень полезно в тех случаях, когда вы хотите предоставить пользователям возможность отображать HTML-данные на экране из пользовательского ввода. Типичные варианты использования следующие:
- Система комментариев
- Блог Двигатели
- Редакторы пользовательского интерфейса
- Редакторы кода в Интернете.
Эта конкретная статья будет посвящена пониманию этой директивы на простом примере, где мы создаем простой редактор кода, используя текстовую область вместе с 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-коде.
- Мы ссылаемся на приложение, используя приложение id
- Мы используем Bootstrap, чтобы этот пользовательский интерфейс выглядел и чувствовал себя хорошо.
- 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.