Vue - Test Destroy

test vue directive demo

by Ben Clayton

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app"></div>

<hr>


<script id="tmpl-app" type="text/x-template">
  <div>
    {{ global.name }}
    <hr>
    <div v-html="widgetcode"></div>
    <hr>
    <div v-dynamic="widgetcode"></div>
	</div>
</script>

CSS

body {
	    font-size: 20px;
}

.text {
	font-size: 24px;
}
.box {
  border: 1px solid red;
}

JavaScript

//---------------------------------------------------------
Vue.directive('dynamic', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})


var vm = new Vue({ // create a root Vue instance
  el: '#app', // this div gets replaced when View is rendered
  template: '#tmpl-app',
  data: function(){
  	return { global: { name: "Test Injected html with execution" } }
  },
  
  created: function () {
  	// this.$data.global.name = 'BERTTY';
  	
  },
  computed: {
  	widgetcode : function () {
     return "hello from widget<scr"+"ipt>alert('Hi')</scr"+"ipt>";
    }
 	
  }
});