Vue Output Html

Posted on  by admin

Vue.js uses a DOM-based templating implementation. This means that all Vue.js templates are essentially valid, parsable HTML enhanced with some special attributes.

Keep that in mind, since this makes Vue templates fundamentally different from string-based templates.

  1. The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):.
  2. The mustache tag will be replaced with the value of the msg property on the corresponding data object.
  3. It will also be updated whenever the data object’s msg property changes. You can also perform one-time interpolations that do not update on data change:.
  4. The double mustaches interprets the data as plain text, not HTML.

In order to output real HTML, you will need to use triple mustaches:. The contents are inserted as plain HTML - data bindings are ignored. If you need to reuse template pieces, you should use partials.

Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS attacks.