Vue.js Quick Example

by von

HTML

<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <!-- Template editor -->
  <textarea v-model="template"></textarea>
  <!-- Do redraw only when button is clicked -->
  <br/>
  <button @click="update">Update</button>
  <!-- make ref to preview component -->
  <preview ref="child" :template="updated"></preview>
</div>

JavaScript

var demo = new Vue({
  el: '#demo',
  data: {
  	template: '<b>Horraayy!!!</b>',
    updated: '',
  },
	components: {
  // inline defined component
  	preview: {
    	props: ['template'],
      // Custom render with explicitly set innerHTML
    	render(createElement) {
				return createElement('div', {
        	domProps: {
          	innerHTML: this.template
          }
        });
      },
    },
  },
  methods: {
  	update() {
    	// update template and force redraw child component
    	this.updated = this.template;
      this.$refs.child.$forceUpdate();
    }
  }
});