yuizho/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[vue js training template]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}

.v-enter, .v-leave-to {
  opacity: 0;
}
</style>
</head>
<body>

<div id="app">
  <p v-if="show">{{message}}</p>
  <input v-model="message">
  <ol>
    <li v-for="item in list">{{item}}</li>
  </ol>
  <button v-on:click="handleClick">Click</button>
  <br>
  <br>
  <button v-on:click="show=!show">切り替え</button>
  <transition>
    <p v-if="show">{{message}}</p>
  </transition>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<script id="jsbin-javascript">
var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ',
    list: ['りんご', 'ばなな', 'いちご'],
    handleClick: function(event) {
      alert(event.target)
    },
    show: true
  }
})

</script>


<script id="jsbin-source-css" type="text/css">.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}

.v-enter, .v-leave-to {
  opacity: 0;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ',
    list: ['りんご', 'ばなな', 'いちご'],
    handleClick: function(event) {
      alert(event.target)
    },
    show: true
  }
})
</script></body>
</html>

## jsbin.rageyap.css
.v-enter-active, .v-leave-active {
  transition: opacity 1s;
}

.v-enter, .v-leave-to {
  opacity: 0;
}

## jsbin.rageyap.js
var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ',
    list: ['りんご', 'ばなな', 'いちご'],
    handleClick: function(event) {
      alert(event.target)
    },
    show: true
  }
})
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[vue js training template]">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	.v-enter-active, .v-leave-active {
	transition: opacity 1s;
	}

	.v-enter, .v-leave-to {
	opacity: 0;
	}
	</style>
	</head>
	<body>

	<div id="app">
	<p v-if="show">{{message}}</p>
	<input v-model="message">
	<ol>
	<li v-for="item in list">{{item}}</li>
	</ol>
	<button v-on:click="handleClick">Click</button>
	<br>
	<br>
	<button v-on:click="show=!show">切り替え</button>
	<transition>
	<p v-if="show">{{message}}</p>
	</transition>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

	<script id="jsbin-javascript">
	var app = new Vue({
	el: '#app',
	data: {
	message: '初期メッセージ',
	list: ['りんご', 'ばなな', 'いちご'],
	handleClick: function(event) {
	alert(event.target)
	},
	show: true
	}
	})

	</script>


	<script id="jsbin-source-css" type="text/css">.v-enter-active, .v-leave-active {
	transition: opacity 1s;
	}

	.v-enter, .v-leave-to {
	opacity: 0;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">var app = new Vue({
	el: '#app',
	data: {
	message: '初期メッセージ',
	list: ['りんご', 'ばなな', 'いちご'],
	handleClick: function(event) {
	alert(event.target)
	},
	show: true
	}
	})
	</script></body>
	</html>