Nxq vue

Simple Vue.js mixin for HTML document manipulation.

Version: 0.0.22 Updated: 03/05/2020

By: NorabX License: ISC

Downloads Last 30 Days: 19

Install

npm i nxq-vue
yarn add nxq-vue

Repository: https://github.com/NorabX/nxq-vue

CDNs

bundle.run: https://bundle.run/nxq-vue

jsDelivr: https://cdn.jsdelivr.net/npm/nxq-vue

unpkg: https://unpkg.com/nxq-vue

nxq-vue

Simple Vue.js mixin for HTML document manipulation.

project status npm version npm downloads license

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

Categories: Vue js