Piyoshi/vue-sample.html

## vue-sample.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <input v-model="message">
    <button v-on:click="zouka">増やす</button>
    {{ message }}
    <br>
    <span v-bind:title="message" v-if="seen">jQuery最高♪(^^)</span>
    <button v-on:click="toggle">{{ btnMessage }}</button>
    <ol>
      <li v-for="todo in todos">
        {{ todo.text }}
      </li>
    </ol>
  </div>
  <script>
  const abuseLanguages = {
    gust: 'お前それVue.js使っても同じこと言えんの？',
    sweet: '・・・'
  }
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      seen: true,
      todos: [
        { text: 'Learn JS' },
        { text: 'Learn Vue' },
        { text: 'Build Something' }
      ],
      btnMessage: abuseLanguages.gust
    },
        methods: {
      zouka: function() {
        this.todos.push({ text: this.message });
      },
      toggle: function() {
        this.seen = !this.seen;
        this.btnMessage = this.seen ? abuseLanguages.gust : abuseLanguages.sweet;
      }
    }
  });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	</head>
	<body>
	<div id="app">
	<input v-model="message">
	<button v-on:click="zouka">増やす</button>
	{{ message }}
	<br>
	<span v-bind:title="message" v-if="seen">jQuery最高♪(^^)</span>
	<button v-on:click="toggle">{{ btnMessage }}</button>
	<ol>
	<li v-for="todo in todos">
	{{ todo.text }}
	</li>
	</ol>
	</div>
	<script>
	const abuseLanguages = {
	gust: 'お前それVue.js使っても同じこと言えんの？',
	sweet: '・・・'
	}
	const app = new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!',
	seen: true,
	todos: [
	{ text: 'Learn JS' },
	{ text: 'Learn Vue' },
	{ text: 'Build Something' }
	],
	btnMessage: abuseLanguages.gust
	},
	methods: {
	zouka: function() {
	this.todos.push({ text: this.message });
	},
	toggle: function() {
	this.seen = !this.seen;
	this.btnMessage = this.seen ? abuseLanguages.gust : abuseLanguages.sweet;
	}
	}
	});
	</script>
	</body>
	</html>