Showing element

all directives

• x-text
• x-data
• x-model
• x-show
• x-if
• x-for

Click Element

<div x-data="{open: false}">
	
	<a href="#" @click.prevent="open = !opn">open</a>
	
	<div x-show="open">
		I'm Open
	</div>

</div>

Syncing data with input

• x-text for outputting text of a function

<div x-data="{name: ''}">
	
	<input type="text" x-on:input="name= $event.target.value" />
	
	<input type="text" x-model="name" />
	<span x-text="name"></span>
</div>

//form binding
<div x-data="{form: {email:'', password:''}}">
	
	
	<input type="text" x-model="form.email" />
	<input type="password" x-model="form.password" />
	<span x-text="`${form.email} ${form.password}`"></span>
</div>

• x-data

<div x-data="state">
	<span x-text="number">
	<a href="#" x-on:click.prevent="increment">increment</a>
	

</div>

<script>
	function state(){
		return{
		 	number: 0,
			incement(){
				this.number++
			}
		}
	}


</script>

• x-if

<template x-if="visible">
	<div>
		i'm toggled!
	</div>
</template>

</div>

• x-for

 <template x-for="user in users" :key="user.id">
 	<span x-text="user.name"></span>
 </template>

Binding values

	<div x-data="{name: 'alex'}">
		<input type="text" x-bind:value="name">
	</div>
	
	<div x-data="{progess: 30}">
		<div x-bind:style="`width: ${progress}%;``"></div>
	</div>

Component initialization

<div x-data="state()" x-init="mounted">
		<span x-text="counter"></span>
</div>

<script>
	
	function state(){
		return{
			counter: 5,
			
			mounted(){
				let interval = setInterval(() =>{
					this.counter--
					
					if(this.counter === 0){
					clearInterval(interval)
					}
					
				},1000)
			}
		
		}
	}

</script>