npm install pp-action --save
Go Demo
import View from 'pp-action.js';
var view = new View({
el:"[pp-view]",
data:{
title:"hello Word",
show:true
},
methods:{
hello(){
alert("Hello !!");
}
},
template:`
<div>
<h1 pp-text='title' ></h1>
<hr>
<h2 pp-show='show' >Show Text<h2>
<button pp-text='show ? \'Hide\':\'Show\'' pp-click='show=!show' ><button>
<br>
<button pp-click='hello()' >Hello</button>
</div>`
});
| Directive | Description |
|---|---|
| pp-text | This directive update the property innerText |
| pp-show | This directive change property display from element style |
| pp-html | This directive update the property innerHTML |
| pp-bind | This directive manipule the list attributes from element |
| pp-style | This directive manipule the list property style from element |
| pp-class | This directive manipule the list style class from element |
Example:<h1 pp-text="myText" ></h1>
Structure:<h1 pp-text="[expression]" ></h1>
pp-text update the innerText call var from data or expression javascript
Example:<div pp-show="show" ></div>
Structure:<div pp-show="[expression]" ></div>
pp-show toggles property display if is true display:block else if false display:none
Example:<div pp-disabled="disabled" ></div>
Structure:<div pp-disabled="[expression]" ></div>
pp-disabled toggles property disabled if is true , in tagname INPUT,SELECT,BUTTON and TEXTAREA
Example:<div pp-readonly="readonly" ></div>
Structure:<div pp-readonly="[expression]" ></div>
pp-readonly toggles property readonly if is true , in tagname INPUT and TEXTAREA
Example:<div pp-readonly="readonly" ></div>
Structure:<div pp-readonly="[expression]" ></div>
pp-readonly toggles property readonly if is true , in tagname INPUT and TEXTAREA
Example:<div pp-html="MyHtml" ></div>
Structure:<div pp-html="[expression]" ></div>
pp-html update the innerHTML call var from data or expression javascript, the children injection is render all directives, model and events
Example:<div pp-bind="{'data-main':MyConditional ? 'data1':'data2','data-secondary':myValueStatic}" ></div>
Structure:<div pp-bind="{'data-main':[expression],'data-secondary':[expression]}" ></div>
pp-bind manipue the attributes from elements toggled value the attribute
Example:<div pp-style="{'color':'red','background':MyBackground}" ></div>
Structure:<div pp-style="{'color':[expression],'background':[expression]}" ></div>
pp-style This directive manipule the list property style from element
Example:<div pp-class="{'Myclass1':true,'MyClass2':show == true}" ></div>
Structure:<div pp-class="{'Myclass1':[expression],'MyClass2':[expression]}" ></div>
pp-class add and remove class from element, depending if the expression resolve boolean expresion
pp-[event]
| Event Mouse |
|---|
| click |
| dblclick |
| mousedown |
| mousemove |
| mouseout |
| mouseover |
| mouseup |
| wheel |
| Event Keyboard |
|---|
| keydown |
| keypress |
| keyup |
Podemos acceder y modificar los elementos de la data sin necesidad de llamar al this, tambien llamando a los metodos, pero dentro de los metodos no podremos cambiar el valor de la data
Example:<div pp-click="myFunction()" pp-dblclick="myTextVar='newValue'" ></div>
Structure:<div pp-click="[expression]" pp-dblclick="[expression]" ></div>
pp-[events]Directive lisen event from javascript
Example:<div pp-text="MyVar|MyFilter" ></div>
Structure:<div pp-text="[expression]|[expresion]" ></div>
pp-[any-directive]Function call for filter result.
Example:<input pp-model="email" />
Structure:<input pp-model="[data item]" />
pp-model-debounce (milliseconds)
If you find a security vulnerability, please send an email to [email protected]
Copyright © 2019-2020 Carlos Illesca and contributors
Licensed under the MIT license, see LICENSE.md for details.