Quick example / vue-bem-cn

index.html

<div id="app"></div>
<script type="text/x-template" id="example">
<div>
<textarea v-model="test" rows="10" style="width: 900px">

</textarea>

<textarea v-model="comp" rows="10" style="width: 900px">

</textarea>



<div>

</script>


<script type="text/x-template" id="btn">
	<button :class="b({size, theme})" :type="type">
    <span :class="b('text')">
      <i v-if="icon" :class="b('icon', { icon })"></i>
      {{b({size, theme})}}
      <slot></slot>
    </span>
  </button>
</script>

<script  type="text/x-template">
  <div class="example">
      <btn type="button" class="mix-any-class" size="large" theme="island"  icon="star"> I'am BEM button! </btn>
  </div>
</script>

quick-example-vue-bem-cn.markdown

Quick example / vue-bem-cn

Demo for Quick example / vue-bem-cn - Simple BEM class name generator for Vue.JS

A Pen by c01nd01r on CodePen.

License.

script.babel

Vue.use(vueBemCn.default);

Vue.component('btn', {
  data() {
    return { 
      templ: null 
    }
  },
  template:"#btn",
  props: ['size', 'theme', 'type', 'icon'],
})

Vue.component('test', {
  props: ['tmpl', 'lol'],
  //render: Vue.compile('<div v-html="tmpl"></div>').render,
  // watch: {
  //   tmpl() {
  //     // this.$forceUpdate()
  //   }
  // }
})

Vue.component('app', {
  template: "#example",
  data() {
    return { test: '<h1 class="comp">Heelo</h1>', comp: null}
  },
  watch: {
    test() {
      let compile = Vue.compile(this.test);
      
      var a = new Vue({
        name: 'block',
        render: compile.render,
        staticRenderFns: compile.staticRenderFns,
      });
      a.$mount()
      console.dir(a.$el);
     this.comp = a.$el.outerHTML;
    }
  }
});


const vm = new Vue({
  el: "#app",
  render: h => h('app'),
});

scripts

<script src="http://vue-bem-cn.surge.sh/vue-bem-cn.umd.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>