Skip to content

Instantly share code, notes, and snippets.

Created Feb 21, 2017

What would you like to do?
Quick example / vue-bem-cn
<div id="app"></div>
<script type="text/x-template" id="example">
<textarea v-model="test" rows="10" style="width: 900px">
<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})}}
<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>

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.


Vue.component('btn', {
data() {
return {
templ: null
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: 'ops'}
watch: {
test() {
let compile = Vue.compile(this.test);
var a = new Vue({
name: 'block',
render: compile.render,
staticRenderFns: compile.staticRenderFns,
const vm = new Vue({
el: "#app",
render: h => h('app'),
<script src=""></script>
<script src=""></script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.