Login

Categories

js vue js vue

101scripts

Vue JS Custom Components

This is Vue JS Custom Components usage

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
	  
  </style>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="root">
		Custom Components
		{{ kittifyName }}<br>
		<input v-model="newCat" @keyup.enter="addKitty">
		<button v-on:click="addKitty">+ ADD</button>
		<button @click="addKitty">+ ADD</button>
		
		<ul>
			<li v-for="cat in cats">{{ cat.name }}</li>
		</ul>
		<cat-list v-bind:cats="cats" />
				
	</div>
	
	
	<script>
		
		Vue.component('cat-list', {
			props: ['cats'],
			template:`
				<ul>
					<li v-for="cat in cats">{{ cat.name }}</li>
				</ul>
				`
		})
		
		app = new Vue({
			
			el: '#root',
			component: [
				'cat=list'	
			],
			data: {
				cats : [
					{ name: 'kitkat' },
					{ name: 'fish' },
					{ name: 'henry' },
					{ name: 'bosco' },
					{ name: 'rasmus' }
				],
				newCat: ''
			},
			methods: {
				addKitty: function() {
					this.cats.push({name: this.newCat})
					this.newCat = ''
				}	
			},
			computed: {
				kittifyName: function() {
					if (this.newCat.length > 1) {
						return 'good ' + this.newCat
					}
				}
			}
				
		})

	</script>

</body>
</html>

Rating: 0

Home

Latest Scripts

Popular Scripts

Contact

Useful Links

Login

Categories

Vue JS Custom Components