simics-ja/01-basic.html

## 01-basic.html
<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</body>

## 01-basic.js
var app = new Vue({
	el: '#app',
  data: {
  	message: 'Hello World!'
  }
})

## 02-v-bind.html
<body>
  <div id="app">
    <!--
	この書き方はできないのでv-bindを使う．
	<a href="{{url}}">Vue.js</a>
	-->
    <a v-bind:href="url">Vue.js</a>
  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

## 02-v-bind.js
var app = new Vue({
	el: '#app',
  data: {
  	url: 'https://jp.vuejs.org'
  }
})

## 03-v-if.html
<body>
  <div id="app">
    <!-- v-ifを使うとスイッチするたびにDOM要素ごと書き換わるので，頻繁なスイッチには向かない． -->
    <p v-if="toggle">
      Hello
    </p>
    <p v-else>
      No message
	  </p>

    <hr />

    <p v-if="type === 'A'">
      Type = A
    </p>
    <p v-else-if="type === 'B'">
      Type = B
    </p>
    <p v-else>
      Ohter type
    </p>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

## 03-v-if.js
var app = new Vue({
	el: '#app',
  data: {
  	toggle: false,
    type: 'B'
  }
})

## 04-v-show.html
<body>
  <div id="app">
    <!-- v-showはCSSのdisplayプロパティでスイッチするので，v-ifより処理が軽い． -->
    <p v-show="toggle">
      {{ message }}
    </p>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

## 04-v-show.js
var app = new Vue({
	el: '#app',
  data: {
  	toggle: false,
    message: 'Hello'
  }
})

## 05-v-for.html
<body>
  <div id="app">
    <ol>
      <li v-for="shout in shouts">{{ shout }}</li>
    </ol>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

## 05-v-for.js
var app = new Vue({
  el: '#app',
  data: {
    shouts: ['way', 'wayway', 'yeah']
  }
})

## 06-v-on.html
<body>
  <div id="app">
    <button v-on:click="onclick">
      Click me!
    </button>
    <p v-show="toggle">
      Hello
    </p>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

## 06-v-on.js
var app = new Vue({
  el: '#app',
  data: {
    toggle: false,
  },
  methods: {
    onclick: function() {
			this.toggle = !this.toggle;
    }
  }
})

## 07-v-model.html
<body>
  <div id="app">
    <!-- dataオブジェクトを媒介して片方のinputを書き換えるともう一方の中身も書き換えられる -->
    <p>
      <input type="text" v-model="message">
    </p>
    <p>
      <input type="text" v-model="message">
    </p>
    <pre>{{ $data }}</pre>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

## 07-v-model.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello',
  },
})
	<body>
	<div id="app">
	{{ message }}
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</body>
	var app = new Vue({
	el: '#app',
	data: {
	message: 'Hello World!'
	}
	})
	<body>
	<div id="app">
	<!--
	この書き方はできないのでv-bindを使う．
	<a href="{{url}}">Vue.js</a>
	-->
	<a v-bind:href="url">Vue.js</a>
	</div>
	</body>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<body>
	<div id="app">
	<!-- v-ifを使うとスイッチするたびにDOM要素ごと書き換わるので，頻繁なスイッチには向かない． -->
	<p v-if="toggle">
	Hello
	</p>
	<p v-else>
	No message
	</p>

	<hr />

	<p v-if="type === 'A'">
	Type = A
	</p>
	<p v-else-if="type === 'B'">
	Type = B
	</p>
	<p v-else>
	Ohter type
	</p>
	</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<body>
	<div id="app">
	<!-- v-showはCSSのdisplayプロパティでスイッチするので，v-ifより処理が軽い． -->
	<p v-show="toggle">
	{{ message }}
	</p>
	</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<body>
	<div id="app">
	<ol>
	<li v-for="shout in shouts">{{ shout }}</li>
	</ol>
	</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<body>
	<div id="app">
	<button v-on:click="onclick">
	Click me!
	</button>
	<p v-show="toggle">
	Hello
	</p>
	</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<body>
	<div id="app">
	<!-- dataオブジェクトを媒介して片方のinputを書き換えるともう一方の中身も書き換えられる -->
	<p>
	<input type="text" v-model="message">
	</p>
	<p>
	<input type="text" v-model="message">
	</p>
	<pre>{{ $data }}</pre>
	</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>