Love Vue.js? Love W3C validator too? Use vue-w3c-valid library!
$ npm i vue-w3c-valid --save
import VueW3CValid from 'vue-w3c-valid';
<script src="https://unpkg.com/vue-w3c-valid/dist/simple.js"></script>
new VueW3CValid({
el: '.yourElement'
});
It`s transform data-attributes to Vue.js directives and components!
before | after |
---|---|
data-v-if="some" | v-if="some" |
data-v-show="some" | v-show="some" |
before | after |
---|---|
data-v-bind_value="some" | v-bind:value="some" |
data-v-on_click="some" | v-on:click="some" |
before | after |
---|---|
data-vue-slot="some" | slot="some" |
before | after |
---|---|
<div data-vue-role="transition">...</div> | <transition>...</transition> |
<div class="directivesValid">
<input type="button" value="change" data-v-on_click.prevent="ordered = !ordered">
<ol data-v-if="ordered">
<li data-v-for="item in items">{{ item }}</li>
</ol>
<ul data-v-else>
<li data-v-for="item in items">{{ item }}</li>
</ul>
<div data-vue-role="transition" data-vue-name="fade" data-vue-mode="out-in">
<input type="text" data-v-bind_value="ordered" data-v-show="ordered">
</div>
<div data-vue-role="some-div">
<p>Message</p>
<p data-vue-slot="footer">Message</p>
</div>
</div>
new VueW3CValid({
el: '.directivesValid'
});
<div class="directivesValid">
<input value="change" v-on:click.prevent="ordered = !ordered" type="button">
<ol v-if="ordered">
<li v-for="item in items">{{ item }}</li>
</ol>
<ul v-else="">
<li v-for="item in items">{{ item }}</li>
</ul>
<transition name="fade" mode="out-in">
<input v-bind:value="ordered" v-show="ordered" type="text">
</transition>
<some-div>
<p>Message</p>
<p slot="footer">Message</p>
</some-div>
</div>
Vue.component('someDiv', {
template: '<div class="some">\
<hr>\
<slot></slot>\
<hr>\
<slot name="footer"></slot>\
<hr>\
</div>'
});
new Vue({
el: '.directivesValid',
data: {
items: ['a', 'b', 'c'],
ordered: false
}
});