Skip to content

Instantly share code, notes, and snippets.

/index.html
Created Feb 21, 2017

Embed
What would you like to do?
Quick example / vue-bem-cn
<div id="app"></div>
<script type="text/x-template" id="example">
<div>
<textarea v-model="test" 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

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

A Pen by c01nd01r on CodePen.

License.

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: 'ops'}
},
watch: {
test() {
let compile = Vue.compile(this.test);
var a = new Vue({
name: 'block',
render: compile.render,
staticRenderFns: compile.staticRenderFns,
});
a.$mount()
console.log(a.$el)
}
}
});
const vm = new Vue({
el: "#app",
render: h => h('app'),
});
<script src="http://vue-bem-cn.surge.sh/vue-bem-cn.umd.js"></script>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></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.