khalidsheet/index.html

## index.html
<!DOCTYPE html>
<html class="h-100" lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CodeLabUot</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
</head>
<body class="h-100">
	<div class="container">


	<div id="counter">
		<p>Counter: {{ counter }}</p>
		<button @click="counter++">+</button>
		<button v-if="counter > 0" @click="counter--">-</button>
		<button @click="counter = 0">Reset</button>
	</div>

	<div id="sayMessage">
		<button @click="say('Hello world')">
			Say Hello.
		</button>
	</div>


	<div id="if-elseif-else">
		<div v-if="isActive == true"> Actived </div>
		<div v-else-if="isActive == false">Not Activated</div>

		<div v-if="number == 5">5</div>
		<div v-else-if="number == 7">7</div>
		<div v-else-if="number == 2">2</div>
		<div v-else-if="number == 0">0</div>
		<div v-else="10" >10</div>

		<div v-show="isActive">
			Activated
		</div>
	</div>


	<div id="forloop">
		<table class="table table-bordered">
			<tr>
				<th> Index </th>
				<th>#</th>
				<th>Name</th>
				<th>Age</th>
			</tr>
			<tr v-for="(user, index) in users">
				<td>{{ index }}</td>
				<td>{{ user.id }}</td>
				<td>{{ user.name }}</td>
				<td>{{ user.age }}</td>
			</tr>
		</table>
	</div>


	<div id="model">
		<h1>Input</h1>
		<p>{{ text }}</p>
		<input type="text" class="form-control" v-model="text">
	</div>


	<div id="nael">
		<ul>
			<li v-for="post in posts">{{ post.title }}</li>
		</ul>
	</div>


	<div id="component">
		<my></my>
	</div>


	<div id="globalVue">
		<my-component></my-component>
	</div>


<div id="example-2">
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
  <simple-counter></simple-counter>
</div>


<div id="users-root">
	<user v-bind:users="AllUsers"></user>
</div>


</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="vue.codelab.js"></script>
</body>
</html>

## index.js
    var counterRoot = new Vue({
	el: "#counter",
	data: {
		counter: 0
	}
})

var sayMessageRoot = new Vue({
	el: "#sayMessage",
	data: {
		message: ''
	},
	methods: {
		say: function(message) {
			alert(message)
		}
	}
})


var ifElseIfElse = new Vue({
	el: "#if-elseif-else",
	data: {
		isActive: true,
		isHidden: false,
		number: 5
	}
})


users = [
	{
		"id": 1,
		"name": "khalid",
		"age": 19
	},
	{
		"id": 2,
		"name": "Nael",
		"age": 24
	},
	{
		"id": 3,
		"name": "saif",
		"age" : 36
	}
];


var forLoop = new Vue({
	el: "#forloop",
	data: {
		users: users
	},
})


var modelBinding = new Vue({
	el: "#model",
	data: {
		text: '',
	}
})

var postsObj = [
{
"userId": 1,
"id": 1,
"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
},
{
"userId": 1,
"id": 2,
"title": "qui est esse",
"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
},
{
"userId": 1,
"id": 3,
"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
},
{
"userId": 1,
"id": 4,
"title": "eum et est occaecati",
"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
},
{
"userId": 1,
"id": 5,
"title": "nesciunt quas odio",
"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
},
{
"userId": 1,
"id": 6,
"title": "dolorem eum magni eos aperiam quia",
"body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
},
{
"userId": 1,
"id": 7,
"title": "magnam facilis autem",
"body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
},
{
"userId": 1,
"id": 8,
"title": "dolorem dolore est ipsam",
"body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
},
{
"userId": 1,
"id": 9,
"title": "nesciunt iure omnis dolorem tempora et accusantium",
"body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
},
{
"userId": 1,
"id": 10,
"title": "optio molestias id quia eum",
"body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
},
{
"userId": 2,
"id": 11,
"title": "et ea vero quia laudantium autem",
"body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
},
{
"userId": 2,
"id": 12,
"title": "in quibusdam tempore odit est dolorem",
"body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
},
{
"userId": 2,
"id": 13,
"title": "dolorum ut in voluptas mollitia et saepe quo animi",
"body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
},
{
"userId": 2,
"id": 14,
"title": "voluptatem eligendi optio",
"body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
},
{
"userId": 2,
"id": 15,
"title": "eveniet quod temporibus",
"body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
},
{
"userId": 2,
"id": 16,
"title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
"body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
},
{
"userId": 2,
"id": 17,
"title": "fugit voluptas sed molestias voluptatem provident",
"body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
},
{
"userId": 2,
"id": 18,
"title": "voluptate et itaque vero tempora molestiae",
"body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
},
{
"userId": 2,
"id": 19,
"title": "adipisci placeat illum aut reiciendis qui",
"body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
}
]


var nael = new Vue({
	el: "#nael",
	data: {
		posts: postsObj,
	}
})


var Child = {
  template: `
  	<ul>
  		<li>1</li>
  		<li>2</li>
  		<li>3</li>
  		<li>4</li>
  	</ul>
  `
}

var components = new Vue({
  el: '#component',
  data: {

  },
  components: {
    // <my-component> will only be available in parent's template
    'my': Child
  }
})

var data = {
	message: 'hello'
}

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: function() {
  	return {
  		message: "Hello Khalid"
  	  }
  	}
 })

var globalVue = new Vue({
	el: "#globalVue",
})

var data = { counter: 0 };

Vue.component('simple-counter', {
  template: `
  	<div>
  		<p>{{ counter }}</p>
	  	<button v-on:click="counter += 1">+</button>
	  	<button v-on:click="counter -= 1">-</button>
  	</div>
  		`,
  // data is technically a function, so Vue won't
  // complain, but we return the same object
  // reference for each component instance
  data: function () {
    return {
    	counter: 0
    }
  }
})

new Vue({
  el: '#example-2'
})


Vue.component('user', {
  // declare the props
  props: [
  	'users',
  ],
  // like data, the prop can be used inside templates and
  // is also made available in the vm as this.message
  template: `
  	<ul>
  		<li v-for="user in users">
  			{{ user.name }}
  		</li>

  	</ul>
  	`
})

new Vue({
	el: "#users-root",
	data: {
		AllUsers: [
			{
				"name": "Khalid"
			}
		]
	}
})
	<!DOCTYPE html>
	<html class="h-100" lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CodeLabUot</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
	<link rel="stylesheet" href="style.css">
	</head>
	<body class="h-100">
	<div class="container">


	<div id="counter">
	<p>Counter: {{ counter }}</p>
	<button @click="counter++">+</button>
	<button v-if="counter > 0" @click="counter--">-</button>
	<button @click="counter = 0">Reset</button>
	</div>

	<div id="sayMessage">
	<button @click="say('Hello world')">
	Say Hello.
	</button>
	</div>


	<div id="if-elseif-else">
	<div v-if="isActive == true"> Actived </div>
	<div v-else-if="isActive == false">Not Activated</div>

	<div v-if="number == 5">5</div>
	<div v-else-if="number == 7">7</div>
	<div v-else-if="number == 2">2</div>
	<div v-else-if="number == 0">0</div>
	<div v-else="10" >10</div>

	<div v-show="isActive">
	Activated
	</div>
	</div>



	<div id="forloop">
	<table class="table table-bordered">
	<tr>
	<th> Index </th>
	<th>#</th>
	<th>Name</th>
	<th>Age</th>
	</tr>
	<tr v-for="(user, index) in users">
	<td>{{ index }}</td>
	<td>{{ user.id }}</td>
	<td>{{ user.name }}</td>
	<td>{{ user.age }}</td>
	</tr>
	</table>
	</div>



	<div id="model">
	<h1>Input</h1>
	<p>{{ text }}</p>
	<input type="text" class="form-control" v-model="text">
	</div>







	<div id="nael">
	<ul>
	<li v-for="post in posts">{{ post.title }}</li>
	</ul>
	</div>



	<div id="component">
	<my></my>
	</div>


	<div id="globalVue">
	<my-component></my-component>
	</div>



	<div id="example-2">
	<simple-counter></simple-counter>
	<simple-counter></simple-counter>
	<simple-counter></simple-counter>
	</div>




	<div id="users-root">
	<user v-bind:users="AllUsers"></user>
	</div>



	</div>



	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
	<script src="vue.codelab.js"></script>
	</body>
	</html>
	var counterRoot = new Vue({
	el: "#counter",
	data: {
	counter: 0
	}
	})

	var sayMessageRoot = new Vue({
	el: "#sayMessage",
	data: {
	message: ''
	},
	methods: {
	say: function(message) {
	alert(message)
	}
	}
	})









	var ifElseIfElse = new Vue({
	el: "#if-elseif-else",
	data: {
	isActive: true,
	isHidden: false,
	number: 5
	}
	})


	users = [
	{
	"id": 1,
	"name": "khalid",
	"age": 19
	},
	{
	"id": 2,
	"name": "Nael",
	"age": 24
	},
	{
	"id": 3,
	"name": "saif",
	"age" : 36
	}
	];



	var forLoop = new Vue({
	el: "#forloop",
	data: {
	users: users
	},
	})





	var modelBinding = new Vue({
	el: "#model",
	data: {
	text: '',
	}
	})

	var postsObj = [
	{
	"userId": 1,
	"id": 1,
	"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
	"body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
	},
	{
	"userId": 1,
	"id": 2,
	"title": "qui est esse",
	"body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
	},
	{
	"userId": 1,
	"id": 3,
	"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut",
	"body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
	},
	{
	"userId": 1,
	"id": 4,
	"title": "eum et est occaecati",
	"body": "ullam et saepe reiciendis voluptatem adipisci\nsit amet autem assumenda provident rerum culpa\nquis hic commodi nesciunt rem tenetur doloremque ipsam iure\nquis sunt voluptatem rerum illo velit"
	},
	{
	"userId": 1,
	"id": 5,
	"title": "nesciunt quas odio",
	"body": "repudiandae veniam quaerat sunt sed\nalias aut fugiat sit autem sed est\nvoluptatem omnis possimus esse voluptatibus quis\nest aut tenetur dolor neque"
	},
	{
	"userId": 1,
	"id": 6,
	"title": "dolorem eum magni eos aperiam quia",
	"body": "ut aspernatur corporis harum nihil quis provident sequi\nmollitia nobis aliquid molestiae\nperspiciatis et ea nemo ab reprehenderit accusantium quas\nvoluptate dolores velit et doloremque molestiae"
	},
	{
	"userId": 1,
	"id": 7,
	"title": "magnam facilis autem",
	"body": "dolore placeat quibusdam ea quo vitae\nmagni quis enim qui quis quo nemo aut saepe\nquidem repellat excepturi ut quia\nsunt ut sequi eos ea sed quas"
	},
	{
	"userId": 1,
	"id": 8,
	"title": "dolorem dolore est ipsam",
	"body": "dignissimos aperiam dolorem qui eum\nfacilis quibusdam animi sint suscipit qui sint possimus cum\nquaerat magni maiores excepturi\nipsam ut commodi dolor voluptatum modi aut vitae"
	},
	{
	"userId": 1,
	"id": 9,
	"title": "nesciunt iure omnis dolorem tempora et accusantium",
	"body": "consectetur animi nesciunt iure dolore\nenim quia ad\nveniam autem ut quam aut nobis\net est aut quod aut provident voluptas autem voluptas"
	},
	{
	"userId": 1,
	"id": 10,
	"title": "optio molestias id quia eum",
	"body": "quo et expedita modi cum officia vel magni\ndoloribus qui repudiandae\nvero nisi sit\nquos veniam quod sed accusamus veritatis error"
	},
	{
	"userId": 2,
	"id": 11,
	"title": "et ea vero quia laudantium autem",
	"body": "delectus reiciendis molestiae occaecati non minima eveniet qui voluptatibus\naccusamus in eum beatae sit\nvel qui neque voluptates ut commodi qui incidunt\nut animi commodi"
	},
	{
	"userId": 2,
	"id": 12,
	"title": "in quibusdam tempore odit est dolorem",
	"body": "itaque id aut magnam\npraesentium quia et ea odit et ea voluptas et\nsapiente quia nihil amet occaecati quia id voluptatem\nincidunt ea est distinctio odio"
	},
	{
	"userId": 2,
	"id": 13,
	"title": "dolorum ut in voluptas mollitia et saepe quo animi",
	"body": "aut dicta possimus sint mollitia voluptas commodi quo doloremque\niste corrupti reiciendis voluptatem eius rerum\nsit cumque quod eligendi laborum minima\nperferendis recusandae assumenda consectetur porro architecto ipsum ipsam"
	},
	{
	"userId": 2,
	"id": 14,
	"title": "voluptatem eligendi optio",
	"body": "fuga et accusamus dolorum perferendis illo voluptas\nnon doloremque neque facere\nad qui dolorum molestiae beatae\nsed aut voluptas totam sit illum"
	},
	{
	"userId": 2,
	"id": 15,
	"title": "eveniet quod temporibus",
	"body": "reprehenderit quos placeat\nvelit minima officia dolores impedit repudiandae molestiae nam\nvoluptas recusandae quis delectus\nofficiis harum fugiat vitae"
	},
	{
	"userId": 2,
	"id": 16,
	"title": "sint suscipit perspiciatis velit dolorum rerum ipsa laboriosam odio",
	"body": "suscipit nam nisi quo aperiam aut\nasperiores eos fugit maiores voluptatibus quia\nvoluptatem quis ullam qui in alias quia est\nconsequatur magni mollitia accusamus ea nisi voluptate dicta"
	},
	{
	"userId": 2,
	"id": 17,
	"title": "fugit voluptas sed molestias voluptatem provident",
	"body": "eos voluptas et aut odit natus earum\naspernatur fuga molestiae ullam\ndeserunt ratione qui eos\nqui nihil ratione nemo velit ut aut id quo"
	},
	{
	"userId": 2,
	"id": 18,
	"title": "voluptate et itaque vero tempora molestiae",
	"body": "eveniet quo quis\nlaborum totam consequatur non dolor\nut et est repudiandae\nest voluptatem vel debitis et magnam"
	},
	{
	"userId": 2,
	"id": 19,
	"title": "adipisci placeat illum aut reiciendis qui",
	"body": "illum quis cupiditate provident sit magnam\nea sed aut omnis\nveniam maiores ullam consequatur atque\nadipisci quo iste expedita sit quos voluptas"
	}
	]


	var nael = new Vue({
	el: "#nael",
	data: {
	posts: postsObj,
	}
	})





	var Child = {
	template: `
	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	</ul>
	`
	}

	var components = new Vue({
	el: '#component',
	data: {

	},
	components: {
	// <my-component> will only be available in parent's template
	'my': Child
	}
	})

	var data = {
	message: 'hello'
	}

	Vue.component('my-component', {
	template: '<span>{{ message }}</span>',
	data: function() {
	return {
	message: "Hello Khalid"
	}
	}
	})

	var globalVue = new Vue({
	el: "#globalVue",
	})

	var data = { counter: 0 };

	Vue.component('simple-counter', {
	template: `
	<div>
	<p>{{ counter }}</p>
	<button v-on:click="counter += 1">+</button>
	<button v-on:click="counter -= 1">-</button>
	</div>
	`,
	// data is technically a function, so Vue won't
	// complain, but we return the same object
	// reference for each component instance
	data: function () {
	return {
	counter: 0
	}
	}
	})

	new Vue({
	el: '#example-2'
	})



	Vue.component('user', {
	// declare the props
	props: [
	'users',
	],
	// like data, the prop can be used inside templates and
	// is also made available in the vm as this.message
	template: `
	<ul>
	<li v-for="user in users">
	{{ user.name }}
	</li>

	</ul>
	`
	})

	new Vue({
	el: "#users-root",
	data: {
	AllUsers: [
	{
	"name": "Khalid"
	}
	]
	}
	})