Old school D3 from simpler times

All examples By author By category About

briankoech

Full window Github gist

JS Bin Vuejs Example // source https://jsbin.com/xedoki

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vuejs Example">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
	<script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script>
<style id="jsbin-css">
.container {
  display: block;
}
.container .demo {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: inline-block;
  margin: 0;
}
.container .red {
  background: red;
}
.container .green {
  background: green;
}
.container .blue {
  background: blue;
}

</style>
</head>
<body>
		<div id="app">
			<button @click="counter++">increase</button>
			<button v-on:click="counter--">decrease</button>
			<button v-on:click="secondCounter++">button</button>
			<p>Counter: {{ counter }}</p>
			<p>second Counter: {{ secondCounter }} </p>
			<p>Result: {{ result() }} | {{ output }} </p>
			
			<hr>
			<div class="container">
				<div class="demo"
						 @click="attachRed = !attachRed"
						 :class="{red: attachRed, blue: !attached}"></div>
				<div 
						class="demo"
						:class="divClasses"></div>
				
				<div class="demo"
						:class="color"
						:style="[myStyle, { height: width + 'px'}]"
						></div>	
				
				<hr>
				<input type="text" v-model="color">
				<input type="text" v-model="width">
			</div>
		</div>

<script id="jsbin-javascript">
new Vue({
	el: '#app',
	data: {
		title: 'some title',
		counter: 0,
		secondCounter: 0,
		attachRed: false,
		color: 'green',
		width: 100 
	},
   // caching is done on computed	
	 // runs synchronously
	computed: {
		output () {
			console.log('computed');
			return this.counter > 5 ? 'Greater than 5' : 'Less than 5'
		},
		divClasses () {
			return {
				red: this.attachRed,
				blue: !this.attachRed
			}
		},
		myStyle () {
			return {
				backgroundColor: this.color,
				width: this.width + 'px'
			}
		}
	},
  // async	
	watch: {
		counter (value) {
			const vm = this;
		 setTimeout(() => { this.counter = 0 }, 2000);  	
		}
	},
	
	methods: {
		result() {
			console.log('method');
			return this.counter > 5 ? 'Greate than 5' : 'Less than 5'
		}
	}
	
})
</script>

<script id="jsbin-source-css" type="text/css">.container {
	display: block;
	
	.demo {
		width: 100px;
		height: 100px;
		background-color: grey;
		display: inline-block;
		margin: 0;
	}
	
	.red {
		background: red;
	}
		
	.green {
		background: green;
	}
		
	.blue {
		background: blue;
	}
}</script>

<script id="jsbin-source-javascript" type="text/javascript">new Vue({
	el: '#app',
	data: {
		title: 'some title',
		counter: 0,
		secondCounter: 0,
		attachRed: false,
		color: 'green',
		width: 100 
	},
   // caching is done on computed	
	 // runs synchronously
	computed: {
		output () {
			console.log('computed');
			return this.counter > 5 ? 'Greater than 5' : 'Less than 5'
		},
		divClasses () {
			return {
				red: this.attachRed,
				blue: !this.attachRed
			}
		},
		myStyle () {
			return {
				backgroundColor: this.color,
				width: this.width + 'px'
			}
		}
	},
  // async	
	watch: {
		counter (value) {
			const vm = this;
		 setTimeout(() => { this.counter = 0 }, 2000);  	
		}
	},
	
	methods: {
		result() {
			console.log('method');
			return this.counter > 5 ? 'Greate than 5' : 'Less than 5'
		}
	}
	
})</script></body>
</html>

https://unpkg.com/vue@2.4.4/dist/vue.js