VueABCその２ 基本

テンプレート

{{ }}

<div>hoge world,{{ name }}?</div>

でそのテンプレートのnameのdataをみている。{{ }}は口髭(Mustache)

クリック v-on:click

<button v-on:click="pushCrick">push</button>

これでテンプレートのpushCrockメソッドが呼ばれる。

テーブルリスト v-for

   <table>
        <tr v-for="item in myTableData" v-bind:key="item">
          <td><img src="" /></td>
          <td> {{ item.title }} </td>
          <td> {{ item.value }} </td>
        </tr>
   </table>

v-forをつかえば繰り返しを書かなくてすむ。

バインディング v-model

    <p>{{ myTextAreaData }}</p>
    <textarea v-model="myTextAreaData"></textarea>

dataとしてmyTextAreaDataはあること。テキストエリアに入力した値が上にも出てくる。

ちなみに

    <textarea v-model.number="myTextAreaData"></textarea>

で数値のみ取得できる。

表示非表示 v-if

<transition>
        <p v-if="myCheckBox">Hello Transision</p>
 </transition>

v-if で表示、非表示ができる。myCheckBoxはブール代数。v-showで行うと、no:displayが付与される。 で囲んでおけば表示のアニメーションが加えられる。次のようなcssを追加する。

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 1s;
}
.v-enter,
.v-leave-to {
  opacity: 0;
}

ラジオボタン

  <label><input type="radio" value="a" v-model="myRadioData" />A</label>
    <label><input type="radio" value="b" v-model="myRadioData" />B</label>
    <label><input type="radio" value="c" v-model="myRadioData" />C</label>
    <p>{{ myRadioData }}</p>

myRadioDataにするとAに印がつく。

セレクトボタン

<p>select test</p>
    <select v-model="mySelectData">
      <option disabled="disabled">select</option>
      <option value="x">selectX</option>
      <option value="y">selectY</option>
      <option value="z">selectZ</option>
    </select>

mySelectDataにxを選ぶと選択されている。

算出プロパティ

<p>getter_setter</p>
    width: <input v-model.number="width" />{{ width }} height:
    <input v-model.number="height" />{{ height }} halfWidth:
    <input v-model.number="halfWidth" />{{ halfWidth }}
    <p>result halfwidth {{ halfWidth }} = width {{ width }} / 2</p>
    <p>x = {{ halfPoint.x }} y = {{ halfPoint.y }}</p>

算出プロパティとしては

  computed: {
    halfWidth: {
      get: function() {
        return this.width / 2;
      },
      set: function(val) {
        this.width = val * 2;
      }
    },
    halfHeight: function() {
      return this.height / 2;
    },
    halfPoint: function() {
      return {
        x: this.halfWidth,
        y: this.halfHeight
      };
    },

書いておく、height, widhはデータとして定義しておく。

リストに対する制限等

<div><input v-model.number="okane" />YEN</div>
    <div>item number = <input v-model.number="myOkaneLimit" /></div>
    <button v-on:click="myOkaneListOrder = !myOkaneListOrder">
      switch ordring
    </button>
    <p>
      matched {{ myOkaneMatched.length }}, limited {{ myOkaneLimited.length }}
    </p>
    <ul>
      <li v-for="item in myOkaneLimited" v-bind:key="item.id">
        name:{{ item.name }} price:{{ item.price }}
      </li>
    </ul>

商品をお金が高い順、低い順にならべる。myOkaneListOrderのところ。myOkaneLimitは最大表示すう。

算出プロパティは

    myOkaneMatched: function() {
      return this.myOkaneList.filter(function(el) {
        return el.price <= this.okane;
      }, this);
    },
    myOkaneLimited: function() {
      return this.myOkaneMatchedSorted.slice(0, this.myOkaneLimit);
    },
    myOkaneMatchedSorted: function() {
      return this.myOkaneMatched.slice(0).sort((item1, item2) => {
        let ordering = item1.price > item2.price ? -1 : 1;
        return ordering * (this.myOkaneListOrder ? -1 : 1);
      });
    },

表示をフィルターかけて加工する。 filters

    <p> {{price | localeNum}}円</p> <!--  localeNumはvue.filterとして登録 -->

  filters: {
    localeNum: function(val) {
      return val.toLocaleString();
    }
  },

filterは|を使って連鎖可能

そのままでる。 v-pre

    <p v-pre>そのままでてきます。{{ そのままでてきます }}</p>

値の監視　watch

    <p>watch test </p>
    年齢<input v-model.number="age">以下の人を表示
    <div v-if="displayWatchedData">
      <p> name: {{watchedData.name}}</p>
      <p> age: {{watchedData.age}}</p>
    </div>

で、displayWatchedDataを監視するのは

watch: {
    'watchedData': {
       handler: function(newVal, oldVal) {
        if (newVal.age>40) {
          this.displayWatchedData = true;
        } else {
          this.displayWatchedData = false;
        }
      },
      deep: true,
      immediate: true
    }

要素のリファレンス $refs

    <p ref="hello">Hello</p>

要素にref属性をつけておくとthis.$refs.helloで取れる。

    console.log(this.$refs.hello); // helloのrefのついているタグを参照

svgを動かす。

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="75" v-bind:r="radius" fill="lightpink" />
    </svg>
    <input type="range" min="0" max="100" v-model="radius" />

これでradiusを変更させると動く。