vue2x-demo - Vue.js 2.x 入門

本入門のポイント

たったこれだけの記述でこんなに動いてくれる、を実感する
難しいことは抜きにして、まずは動かす楽しさを体感する

github版

githubのREADMEにも同内容を掲載してあります
githubの方が意図通りのMarkdownレンダリングがなされています

github版

demo

demoはこちらで確認できます

demo（github.io）

準備

vue.jsをダウンロードする、または読み込む

以下のURLで最新バージョンのvue.min.jsにリダイレクトされる
このままのパスで読み込むかダンロードしてローカルパスを指定する

https://npmcdn.com/vue/dist/vue.min.js

<script src="vue.min.js"></script>

開発JavaScript

ここではファイル名をscript.jsとする
HTMLファイルと同階層に配置する

<script src="script.js"></script>

HTML

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
    </head>
    <body>

        <!--ここにHTMLを記載する-->

        <script src="vue.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

Vue → HTML ： VueからHTMLに文字列を出力する

new Vue({});によってVueオブジェクトを定義、スタンバイする
elオプションでコンポーネントのセレクタを指定する
dataオプションに値を設定する
Vue.jsではデータ埋め込みにテンプレートエンジンMustacheの記法{{hoge}}が利用できる
埋込部分を要素によってラッピングできる場合はv-textディレクティブも利用できる
レッスンの都合上ここではコンポーネント名を表すセレクタ名にあえて連番を使用する

JavaScript

new Vue({
  el: '.js-component01',
  data: {
    text: 'テキストテキストテキスト'
  }
});

HTML

<div class="js-component01">
    <p>mustache構文の出力を表示します ： {{ text }}</p>
    <p>v-textの出力を表示します ： <span v-text="text"></span></p>
</div>

出力結果

mustache構文の出力を表示します：テキストテキストテキスト

v-textの出力を表示します：テキストテキストテキスト

HTML → Vue ： HTMLからVueに文字列を渡す

v-modelディレクティブを付与したHTMLの一部がVueオブジェクトと同期する
テキストを入力すると値がVueオブジェクトに渡る

JavaScript

new Vue({
  el: '.js-component02',
  data: {
    text: ''
  }
});

HTML

<div class="js-component02">
    <p><input v-model="text" type="text"></p>
    <p>ここに入力文字列を表示します ： {{ text }}</p>
</div>

出力結果

ここに入力文字列を表示します ： テキストテキスト

イベントを設定する： v-on

v-onディレクティブではv-on:click=""のようにイベントを設定できる
methodsオプションに関数を格納する

JavaScript

new Vue({
  el: '.js-component03',
  data: {
    input: '',
    text: ''
  },
  methods: {
    output: function () {
      this.text = this.input;
    }
  }
});

HTML

<div class="js-component03">
    <p><input v-model="input" type="text"></p>
    <p v-on:click="output">入力文字列を反映</p>
    <p>ここに入力文字列を表示します ： {{ text }}</p>
</div>

出力結果

```入力文字列を反映```  
ここに入力文字列を表示します ： テキストテキスト

HTML要素を出力する： v-html

値に含まれるHTMLをレンダリングして出力する場合はv-htmlディレクティブを利用する

JavaScript

new Vue({
  el: '.js-component04',
  data: {
    input: '',
    html: ''
  },
  methods: {
    output: function () {
      this.html = '<span style="color: #fc0;">' + this.input + '</span>';
    }
  }
});

HTML

<div class="js-component04">
    <p class="mb10"><input v-model="input" type="text"></p>
    <p v-on:click="output" class="button mb10">入力文字列を反映</p>
    <div>ここにHTMLコードを表示します ： {{ html }}</div>
    <div>ここにHTML出力を表示します ： <span v-html="html"></span></div>
</div>

出力結果

```入力文字列を反映```  
ここにHTMLコードを表示します ： \<span style="color: #fc0;"\>テキストテキスト\</span\>  
ここにHTML出力を表示します ： <span style="color: #fc0;">テキストテキスト</span>

JavaScript式を経由して出力する

Mustacheの記法{{hoge}}の値にJavaScript式を直接設定できる

JavaScript

new Vue({
  el: '.js-component05',
  data: {
    number: ''
  }
});

HTML

<div class="js-component05">
    <p><input v-model="number" type="number"></p>
    <p>ここに2倍の数字を表示します ： {{ number * 2 }}</p>
</div>

出力結果

ここに2倍の数字を表示します ： 24

フィルタを経由して出力する

filtersオプションにfilter系の処理を集約できる

JavaScript

new Vue({
  el: '.js-component06',
  data: {
    text: ''
  },
  filters: {
    toUpperCase: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.toUpperCase()
    }
  }
});

HTML

<div class="js-component06">
    <p><input v-model="text" type="text"></p>
    <p>ここに入力文字列の大文字を表示します ： {{ text | toUpperCase }}</p>
</div>

出力結果

ここに入力文字列の大文字を表示します ： TEXTTEXTTEXT

computedを活用して入出力する

多彩な処理を扱い結果を得る場合にはcomputedオプションを利用する

JavaScript

new Vue({
  el: '.js-component07',
  data: {
    number: '0'
  },
  computed: {
    calc3Times: function () {
      return this.number * 3;
    }
  }
});

HTML

<div class="js-component07">
    <p><input v-model="number" type="number"></p>
    <p>ここに3倍の数字を表示します ： {{ calc3Times }}</p>
</div>

出力結果

ここに3倍の数字を表示します ： 36

computedのget、setを活用して入出力する

computedオプションのget、setによりGetter、Setterの実装ができる

JavaScript

new Vue({
  el: '.js-component08',
  data: {
    origin: '100'
  },
  computed: {
    withTax: {
      get: function () {
        return parseInt(this.origin * 1.08)
      },
      set: function (value) {
        this.origin = Math.ceil(value / 1.08);
      }
    }
  }
});

HTML

<div class="js-component08">
    <p>税抜価格 ： <input v-model="origin" type="number"></p>
    <p>税込価格 ： <input v-model="withTax" type="number"></p>
</div>

出力結果

税抜価格： 1000

税込価格： 1080

v-bind:classを利用してclassを切り替える

HTMLの各要素をバインドするにはv-bindディレクティブを利用する
v-bindディレクティブのclass属性によりclassを操作できる

JavaScript

new Vue({
  el: '.js-component09',
  data: {
    isShow: true,
    isHide: false
  },
  methods: {
    toggleClass: function () {
      this.isShow = !this.isShow;
      this.isHide = !this.isHide;
    }
  }
});

HTML

<div class="js-component09">
    <p v-on:click="toggleClass">classを切り替え</p>
    <p>ターゲット → <span v-bind:class="{'isShow': isShow, 'isHide': isHide}">表示非表示が切り替わります</span></p>
</div>

CSS

.isShow {display: inline;}
.isHide {display: none;}

出力結果

ターゲット → 表示非表示が切り替わります

v-if、v-elseを利用する

条件分岐を実装するにはv-ifディレクティブ、v-elseディレクティブを利用する
v-modelディレクティブはチェックボックスやラジオボタンのstate取得にも利用できる
インスタンス生成後に呼び出したい処理はcreatedフックに記載する

JavaScript

new Vue({
  el: '.js-component10',
  data: {
    isChecked: true
  },
  created: function () {
    this.flag = true;
  }
});

HTML

<div class="js-component10">
    <p><input type="checkbox" v-model="isChecked" id="cb001"><label for="cb001"> 税込み／税抜き</label></p>
    <p v-if="isChecked">税込み （例 ： 1,080円）</p>
    <p v-else>税抜き （例 ： 1,000円）</p>
</div>

出力結果

[x] 税込み／税抜き

税込み（例： 1,080円）

v-forを利用する

v-forディレクティブによりループ処理が実装できる

JavaScript

new Vue({
  el: '.js-component11',
  data: {
    data: [
      'hoge',
      'huga',
      'piyo',
      'punyo'
    ]
  },
  created: function () {
    this.flag = true;
  }
});

HTML

<div class="js-component11">
    <ul>
        <li v-for="(item, index) in data">
            {{ index + 1 }} - {{ item }}
        </li>
    </ul>
</div>

出力結果

1 - hoge

2 - huga

3 - piyo

4 - punyo

component定義

Vue.componentAPIによりコンポーネント定義を実装する
template`要素を配置してtemplate機能を利用することができる

JavaScript

Vue.component ('component12', {
  props: ['data'],
  template: '#js-template-component12'
});

new Vue({
  el: '.js-component12',
  data: {
    data: []
  }
});

HTML

<template id="js-template-component12">
    <ul>
        <li v-for="(item, index) in data.split(',')">
            {{ index + 1 }} - {{ item }}
        </li>
    </ul>
    <p>{{ text }}</p>
</template>

<div class="js-component12">
    <component12 data="hoge, huga, piyo, punyo"></component12>
</div>

出力結果

1 - hoge

2 - huga

3 - piyo

4 - punyo

Vue.js 2.x 入門

vue2x-demo - Vue.js 2.x 入門

本入門のポイント

github版

demo

準備

vue.jsをダウンロードする、または読み込む

開発JavaScript

HTML

Vue → HTML ： VueからHTMLに文字列を出力する

JavaScript

HTML

出力結果

HTML → Vue ： HTMLからVueに文字列を渡す

JavaScript

HTML

出力結果

イベントを設定する ： v-on

JavaScript

HTML

出力結果

HTML要素を出力する ： v-html

JavaScript

HTML

出力結果

JavaScript式を経由して出力する

JavaScript

HTML

出力結果

フィルタを経由して出力する

JavaScript

HTML

出力結果

computedを活用して入出力する

JavaScript

HTML

出力結果

computedのget、setを活用して入出力する

JavaScript

HTML

出力結果

v-bind:classを利用してclassを切り替える

JavaScript

HTML

CSS

出力結果

v-if、v-elseを利用する

JavaScript

HTML

出力結果

v-forを利用する

JavaScript

HTML

出力結果

component定義

JavaScript

HTML

出力結果

イベントを設定する： v-on

HTML要素を出力する： v-html