技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

vue.jsの基本(テンプレート構文)

vue.jsの基本(テンプレート構文)

vue.jsでは様々なテンプレート制御ディレクティブがあります。

有名どころだと以下

v-once -> 初回だけバインディング
v-pre -> 要素と全ての子要素のコンパイルをスキップ
v-html -> プレーンなHYMLを挿入
v-cloak -> インスタンスの準備が終わると取り除かれる
v-text -> Mustache構文の代わりに利用

v-once

初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたい。 つまり、初回だけテキストバインディングを行いたい時に利用する。

new Vue({
  el: "#app",
  data: {
    message: "hello"
  },
  methods: {
    click: function(event) {
        this.message = this.message.split("").reverse("").join("")
    }
  }
})
<div id="app">
  <p v-once>
    {{ message }}
  </p>
  <button v-on:click="click">
    Click
  </button>
</div>

--> buttonを押しても変わらない。初回だけテンプレートを表示しているから。

v-pre

要素と全てのコンパイルをスキップする時にしよう

new Vue({
  el: "#app",
  data: {
    message: "hello vue.js"
  }
})
new Vue({
  el: "#app",
  data: {
    message: "hello vue.js"
  }
})

---> 生のmustache構文がでる

XSS対策、ディレクティブのない大量のノードをスキップするとことで、コンパイルのスピードをあげる時に利用する。

v-cloak

ページを表示開始してから、インスタンスの作成が終わるまでの間にMustacheタグなどコンパイル前のテンプレートが表示されるのを防ぐ。

<div id="app">
  <h2>
    v-cloak
  </h2>
  <p v-cloak>
    {{ message }}
  </p>
</div>
[v-cloak] {
  display: none;
}

v-cloakで指定されているmustache構文(message)が表記揺れしなくなる。 インスタンスの準備ができたら表示する、準備ができない場合は表示させない。

v-text

Mustcheの代わりに利用可能。

<div id="app">
  <p>
    {{ message }}
  </p>
  
  <p v-text="message">
    
  </p>
</div>

---> どちらもmessageが表示される。
new Vue({
  el: "#app",
  data: {
    message: "hello vue.js"
  }
})

v-textはディレクティブは配下のテキストを丸ごと置き換えるので、テキストの一部を書き換える場合はmustche構文を利用する

 バインディング

1. Javascript式(バインディング式)

データバインディング内部でJavaScript式を利用することができます。

new Vue({
  el: "#app",
  data: {
    message: "hello vue.js",
    number: 100,
    ok: false
  }
})
<div id="app">
  <p>
    {{ message }}
  </p>
  <p>
    {{ number +1 }}
  </p>
  <p>
    {{ message.split('').reverse('').join('') }}
  </p>
  <p>
    {{ ok ? 'YES':'NO'}}
  </p>
</div>
結果

hello vue.js

101

sj.euv olleh

NO

注意:各バインディングは単一式のみを含むことが出来ます

{{ var = x +1 }}

これは式ではなく文なのでNG

{{ if(ok) { return message} }}

このようなフロー制御もNG

2.ローカルフィルタ式(バインディング式)

vue.jsでは式の代わりに任意のフィルタを追加することが出来ます。

{{ 式 | フィルタの名前 }}
new Vue({
  el: "#app",
  data: {
        price: 29800
  },
  filters: {
    numberFormat: function(value) {
        return value.toLocaleString()
    }
  }
})
<div id="app">
  <h2>
    Mustache
  </h2>
  <p>
    {{ price | numberFormat }}
  </p>
  <h2>
    v-bind
  </h2>
  <input type="text" v-bind:value="price | numberFormat">
</div>

---> 1000の桁でカンマ区切りできる

2.グローバルフィルタ式(バインディング式)

Vue.filter(フィルタ名、フィルタの動作)

上のローカルフィルタをグローバルに書き換えるとこんな感じ

Vue.filter('numberFormat', function(value) {
        return value.toLocaleString()
})

new Vue({
  el: "#app",
  data: {
        price: 29800
  }
})

フィルタの連結

フィルタは連結できます。

Vue.filter('toUSD', function(jpy){
    return jpy / 100
})

Vue.filter('numberFormat', function(value){
    return value.toLocaleString()
})

var app = new Vue({
  el: "#app",
  data: {
        jpyPrice: 298000000
  }
})
<div id="app">
  <p>
    {{ jpyPrice | toUSD | numberFormat }}
  </p>
</div>

---> 2,980,000

フィルタは引数を持つ事も出来ます。