Vue.js のバックアップソース(No.2) - 闘うITエンジニアの覚え書き

バックアップ一覧
差分を表示
現在との差分を表示
バックアップを表示
Vue.js へ行く。
- 1 (2019-01-23 (水) 00:14:53)
- 2 (2019-02-04 (月) 23:19:35)
- 3 (2019-02-04 (月) 23:43:08)
- 4 (2019-02-06 (水) 00:59:28)
- 5 (2019-10-08 (火) 05:14:39)
- 6 (2019-10-08 (火) 05:38:01)
- 7 (2019-10-11 (金) 06:39:33)
- 8 (2019-10-15 (火) 00:26:49)
- 9 (2019-10-16 (水) 21:43:37)
#author("2019-02-04T05:19:35+00:00","","")
[[JSライブラリ]] &gt;
* Vue.js [#v73ffcd0]
#setlinebreak(on);

#contents
-- 参考
--- https://jp.vuejs.org/v2/guide/
-- 関連
--- [[Angular2]]
--- [[React>React.js]]

** Vue.js の読み込み [#sd996360]
#html(<div style="padding-left:10px;">)

*** CDNを利用する場合 [#oe203125]
#html(<div style="padding-left:10px;">)

#myhtml2(){{
<!-- 開発用 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 開発用(バージョン指定)
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>

<!-- 本番用 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<!-- 本番用(バージョン指定) -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.min.js"></script>
}}
#html(</div>)

*** npmを利用する場合 [#s5fc7bf7]
#html(<div style="padding-left:10px;">)
#myterm2(){{
npm install vue
}}
#html(</div>)

*** ソースコード [#k08c67a9]
#html(<div style="padding-left:10px;">)
https://github.com/vuejs/vue/releases
#html(</div>)

#html(</div>)

** Vue DevToolのインストール [#q1682014]
#html(<div style="padding-left:10px;">)
https://github.com/vuejs/vue-devtools#vue-devtools
#html(</div>)

** 基礎 [#zb036805]
#html(<div style="padding-left:10px;">)

Vueインスタンスを生成する事により、画面にデータを描画する事ができる。
また、Vueインスタンスを介して描画内容を変更する事も可能。

*** Vueインスタンスの生成 [#qfd25e7d]
#html(<div style="padding-left:10px;">)

以下の通りVueインスタンスを生成して画面描画等を行う。
#mycode2(){{
var vm = Vue({
    .
    .
})
}}

指定できるオプション
|オプション| 内容 |h
| data | UIの状態/データ |
| el | Vueインスタンスをマウントする要素 |
| filter | データの整形に使用する |
| methods | イベント発生時等の処理を関数として定義する |
| computed | データから派生して算出される値を関数として定義する |

#html(</div>)

*** elプロパティを使用してマウントする場合 [#nab6780e]
#html(<div style="padding-left:10px;">)

#mycode2(){{
<div id="app">
  &#123;&#123; message &#125;&#125;
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

// 2秒後にメッセージを書き換える
setTimeout(function(){
    app.message = 'Change message!'
}, 2000);
</script>
}}
#html(</div>)

*** $mountメソッドによるマウント [#f85c0a45]
#html(<div style="padding-left:10px;">)

後から動的に読み込んだコンテンツをマウントする場合等は、$mount メソッドを利用する。
#mycode2(){{
<div id="app"></div>

<script>
var vm = new Vue({
    template: '<p>&#123;&#123;message&#125;&#125;</p>',
    data: {
        message : 'Message!'
    }
})
vm.$mount('#app')
</script>
}}

#html(</div>)

#html(</div>)


** コンポーネント [#tb7bef41]
#html(<div style="padding-left:10px;">)

*** コンポーネントの基本 [#fc056328]
#html(<div style="padding-left:10px;">)

コンポーネントを利用する事で画面を部分的に部品化して再利用する事ができる。
参考: https://jp.vuejs.org/v2/guide/components.html

例) クリックカウンターボタンをコンポーネント化して再利用する
#mycode2(){{
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
</head>
<body>

<div id="components-demo">
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

<script>
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click='count++'>click count is &#123;&#123; count &#125;&#125;.</button>'
})
new Vue({ el: '#components-demo' })
</script>

</body>
</html>
}}

#html(</div>)

*** コンポーネントの定義 [#l2aae90a]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

*** コンポーネントの状態をキャッシュする [#mefa900a]
#html(<div style="padding-left:10px;">)
#TODO(keep-alive)
#html(</div>)

*** コンポーネント間の通信 [#o38b910b]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

*** 単一ファイルコンポーネント [#i8a77772]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

#html(</div>)

** イベントハンドラ [#q8ebdb8b]
#html(<div style="padding-left:10px;">)
https://jp.vuejs.org/v2/guide/events.html

*** メソッドイベントハンドラ [#cf956ca6]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

*** イベント修飾子 [#ydb826ff]
#html(<div style="padding-left:10px;">)
#TODO
.stop
.prevent
.capture
.self
.once
.passive
#html(</div>)

*** キー修飾子 [#i9286268]
#html(<div style="padding-left:10px;">)
https://jp.vuejs.org/v2/guide/events.html#%E3%82%AD%E3%83%BC%E4%BF%AE%E9%A3%BE%E5%AD%90
#TODO
#html(</div>)


#html(</div>)

**  v-if ディレクティブによる条件付きレンダリング [#c8b15916]
#html(<div style="padding-left:10px;">)

v-if ディレクティブを使用して条件付きレンダリングを行う事ができる。

https://jp.vuejs.org/v2/guide/conditional.html

#mycode2(){{
<div id="app">
  <span v-if="display">Message1!</span>
  <span v-else>Message2!</span>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    display: true
  }
})

// 2秒後に表示を切り替える
setTimeout(function(){
    app.display = false
}, 2000);
</script>
}}

#html(</div>)

** v-bind ディレクティブ[#k16bf249]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

** v-html ディレクティブ[#w6972a35]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

**  v-model ディレクティブによる双方向データバインディング [#k1e776f5]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

** filters プロパティによるデータの装飾 [#f299f7ef]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

** computed プロパティによるデータの装飾 [#j8667829]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

** $watchメソッドによる状態の監視 [#g7f0b773]
#html(<div style="padding-left:10px;">)

Vue.js のリアクティブシステムによる検知/要素の更新の他に、$watchメソッドによる状態の監視を行う事もできる。

#mycode2(){{
<div id="app">
    <input type="text" v-model="message" />
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    watch_message: ''
  }
})

// メッセージが変わったらコンソールにログ出力
app.$watch(function(){
    return this.message;
}, function(){
    console.log('changed!');
});

// 2秒後にメッセージを変更
setTimeout(function(){
    app.message = 'Change message!'
}, 2000);

</script>
}}
#html(</div>)


** トランジション [#if82cd9f]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)

** Vue Router を利用したSPA [#r456a4a8]
#html(<div style="padding-left:10px;">)
#TODO
#html(</div>)