Vue.js 初級編、V-ディレクティブ #Vue.js #web

index:

概要:

前の　Vue.js 関連で、初級編的な内容となります。
V-ディレクティブ の説明などです。

環境

Vue.js

参考

https://jp.vuejs.org/

http://www.tohoho-web.com/ex/vuejs.html

参考のコード

github.com

v-text

テキストをレンダリングする(v-text)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-text.html

	<div id="app-101">
	  <div v-text="message"></div>
	  <div>{{ message }}</div>
	</div>
	<script>
	var app101 = new Vue({
	  el: '#app-101',
	  data: { message: 'Hello!' }
	})
	</script>

v-html

HTMLをレンダリングする(v-html
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-html.html

	<div id="app-102">
		<div v-text="message"></div>
		<div v-html="message"></div>
	</div>
	<script>
	var app102 = new Vue({
		el: '#app-102',
		data: { message: '<b>Hello!</b>' }
	})
	</script>

v-show

条件により表示を制御する(v-show)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-show.html

	<div id="app-103">
		<input type="checkbox" @click="change" checked>
		<span v-show="seen">Hello!</span>
	</div>
<script>
var app103 = new Vue({
  el: '#app-103',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

v-if

条件により表示を制御する(v-if)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-if.html

	<div id="app-104">
		<input type="checkbox" @click="change" checked>
		<span v-if="seen">Hello!</span>
	</div>
<script>
var app104 = new Vue({
  el: '#app-104',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

v-else

条件により表示を制御する(v-else)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-else.html

	<div id="app-105">
		<input type="checkbox" @click="change" checked>
		<span v-if="seen">Hello!</span>
		<span v-else>Bye!</span>
	</div>
<script>
var app105 = new Vue({
  el: '#app-105',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})
</script>

v-else-if

条件により表示を制御する(v-else-if)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-else-if.html

	<!-- -->
	<div id="app-106">
		<input type="radio" name="app106-type" onclick="app106.type='A'" checked>
		<input type="radio" name="app106-type" onclick="app106.type='B'">
		<input type="radio" name="app106-type" onclick="app106.type='C'">
		<span v-if="type=='A'">Good morning.</span>
		<span v-else-if="type=='B'">Hello!</span>
		<span v-else>Bye!</span>
	</div>
<script>
var app106 = new Vue({
  el: '#app-106',
  data: { type: 'A' }
})
</script>

v-for

ループする(v-for)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-for.html

	<!-- -->
	<div id="app-107">
		<ul>
		<li v-for="color in colorList">{{ color }}</li>
		</ul>
	</div>
<script>
var app107 = new Vue({
  el: '#app-107',
  data: { colorList: [ 'Red', 'Green', 'Blue' ] }
})
</script>

v-on

イベントを処理する(v-on, @)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-on.html

	<!-- -->
	<div id="app-108">
		<button v-on:click="hello">Hello</button>
		<button @click="hello">Hello</button>
	</div>
<script>
var app108 = new Vue({
  el: '#app-108',
  methods: {
    hello: function() {
      alert("Hello!");
    }
  }
})
</script>

v-bind

HTMLの属性を指定する(v-bind, :)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-bind.html

	<!-- -->
	<div id="app-109">
		<input type="button" v-bind:value="message">
		<input type="button" :value="message">
	</div>
<script>
var app109 = new Vue({
  el: '#app-109',
  data: { message: 'Hello!' }
})
</script>

v-model

入力フォームにモデルを割り当てる(v-model)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-model.html

	<!-- -->
	<div id="app-120">
		<input v-model="message">
		<div>Message: {{ message }}</div>
	</div>
<script>
var app120 = new Vue({
  el: '#app-120',
  data: { message: 'Hello!' }
})
</script>

v-pre

テキストをそのまま出力する(v-pre)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-pre.html

	<!-- -->
	<div id="app-121">
		<div v-pre>Message: {{ message }}</div>
		<div>Message: {{ message }}</div>
	</div>
<script>
var app121 = new Vue({
  el: '#app-121',
  data: { message: 'Hello' }
})
</script>

v-cloak

画面表示時に {{ ... }} を表示しない(v-cloak)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-cloak.html

	<!-- -->
<style>
[v-cloak] { display: none }
</style>
	<div id="app-122">
		<button onclick="location.reload()">再表示</button>
		<div>Message: <span v-cloak>{{ message }}</span></div>
		<div>Message: <span>{{ message }}</span></div>
	</div>
<script>
window.setTimeout(function() {
  var app122 = new Vue({
    el: '#app-122',
    data: { message: 'Hello!' }
  })
}, 1000);
</script>

v-once

一度だけ表示する(v-once)
https://github.com/kuc-arc-f/vue_sample_1/blob/master/v-once.html

	<!-- -->
<div id="app-123">
  <input type="text" name="text1" v-model:value="message">
  <div>Message: <span v-once>{{ message }}</span></div>
  <div>Message: <span>{{ message }}</span></div>
</div>
<script>
var app123 = new Vue({
  el: '#app-123',
  data: { message: 'Hello' }
})
</script>