Vue.js記法(二)画面の表現

文字列の画面表示：v-text =”msg” 又は {{msg}}、効果は同じ

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

表示

Hello!

Hello!

HTMLをそのまま表示：v-html＝""

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

表示

Hello!<b>Hello!</b>

display属性の条件表示制御: v-show＝"true": display 

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

要素有無の条件制御する：v-if＝"true": <div>hello</div>出力

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

条件表示制御: v-else-if, v-else前にv-ifが必須

<div id="app01">
  <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 app01 = new Vue({
  el: '#app01',
  data: { type: 'A' }
})
</script>

for loop : v-for="item in items", v-for="(item, i) in items" 

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

event binding: v-on 又は @

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

v-on:click.once / @click.once の様に、修飾可

修飾子	説明
.stop	call event.stopPropagation()、イベントが親要素に伝播抑止
.prevent	call event.preventDefault() 、デフォルト動作抑止
.capture	イベントリスナをキャプチャモードで追加します。
.self	イベントがディスパッチ場合のみハンドラを呼びます。
.{keyCode | keyAlias}	指定キーが押下時、ハンドラを呼びます。
.native	コンポーネントのルート要素にネイティブイベントを監視。
.once	一度だけ呼びます。
.left	(2.2.0+) マウスの左ボタン押下処理
.right	(2.2.0+) マウスの右ボタン押下処理
.middle	(2.2.0+) マウスの中ボタン押下処理
.passive	(2.3.0+) { passive: true ] で DOM イベントをアタッチ

属性bind： v-bind　又は :

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

v-bind:value.camel や :value.camel の様に、修飾可能

修飾子	説明
.prop	属性の代わりに DOM プロパティをバインドします。
.camel	(2.1.0+) ケバブケース(例:color-name)の属性名を、 キャメルケース(例:ColorName)の属性名に変換します。
.sync	バインドされた値を更新する v-on ハンドラに展開されるのと同じ構文となります。

値変更可能要素にI・Oバインド：v-model="message" 

<div id="app01">
  <input v-model="message">         <!--inputの値が変わったら--------->
  <div>Message: {{ message }}</div> <!--このDIVの表現内容が変わる------>
</div>
<script>
var app = new Vue({
  el: '#app01',
  data: { message: 'Hello!' }
})
</script>

修飾子	説明
.lazy	input の代わりに change イベントを監視します。
.number	データを数値に変換します
.trim	データ前後の空白を取り去る

data変数をそのまま出力: v-pre  

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

表示

Message: {{ message }}

Message: Hello

一回だけ動作：v-once

<div id="app">
  <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 app= new Vue({
  el: '#app',
  data: { message: 'Hello' }
})
</script>