nxq-vue
Simple Vue.js mixin for HTML document manipulation.
Getting Started
Install nxq-vue via npm: npm install nxq-vue
// index.html
<div id="app">
<div id="div1">Hello, World</div>
</div>
<script src="app.js"></script>
// app.js
import NXQVue from 'nxq-vue';
Vue.use(NXQVue);
const app = new Vue({
el: '#app',
mounted() {
console.log(this.q('#div1').qText())
}
});
// output
Hello, World
Functions
.qVal()
Gets the value of the HTML attribute value
.qVal(value)
Sets the value of the HTML attribute value to value
.qText()
Gets the value of the HTML DOM innerText property
.qText(value)
Sets the value of the HTML DOM innerText property to value
.qHtml()
Gets the value of the HTML DOM innerHtml property
.qHtml(value)
Sets the value of the HTML DOM innerHtml property to value
.qOn(type, listener)
Adds event listener
.qAddClass(className)
Adds className
to the HTML attribute class
.qRemoveClass(className)
Removes className
from the HTML attribute class
.qHasClass(className)
Checks if the HTML attribute class contains className
.qToggleClass(className)
If the HTML attribute class contains className
removes it, otherwise adds it
.qReplaceClass(oldClassName, newClassName)
Replace oldClassName
with newClassName
in the HTML attribute class
.qChildren()
Return all children
.qFirst()
Returns the first child
.qLast()
Returns the last child
.qParent()
Returns the first parent
.qParents()
Return all parents
.qCss(prop, value)
Manipulate the HTML attribute style