Vue.jsの基本（1）

JavaScript
2018.08.20
スポンサーリンク

Vue.jsについて

Vue.jsはビュージェイエスと読みます。Vue.jsはViewに特化したライブラリです。今回はVue.jsを活用するための基本を学習します。 Vue.jsはおそらくAngularやRactよりももっと学習コストが低く、より簡単に便利に使うことができることが最大の利点です。 また、関連したライブラリと合わせて使えばフレームワークとしても機能させることが可能になります。 サンプルコードはGitHubページにあります。 Vue.js公式HP

Vue.jsの使い方

Vue.jsを使うには複雑な環境設定の必要はありません。Vue.jsの導入方法は次に紹介する3つの方法があり、自分の目的にあった導入を行うことができます。

Vue.jsの読み込み

Vue.js公式HPインストールのページ Vue.jsの読み込みには3つの方法があります。
  • CDN
  • ファイルをダウンロードして配置
  • NPMを利用
通常、学習するには1のCDNを使います。 Vue.jsインストールページの＃CDNの項目にアドレスが書かれています。 
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
body終了タグの直前にCDNのコードを貼り付けます。

Vue.jsの開発バージョンと本番バージョン

Vue.jsには開発バージョンと本番バージョンがあります。 開発バージョンには警告出力やデバッグモードがあります。 Vue.js公式HPインストールのページに別れてダウンロードできますので、それぞれ必要なバージョンをダウンロードします。 vue.jsファイルは開発バージョン、vue.min.jsが本番バージョンと考えれば良いです。 CDNの場合は最後のvue.jsをvue.min.jsに変更すれば良いです。 ここまでがVue.jsを使う準備になります。

Vueインスタンス作成

Vue インスタンスを生成するには、オプションオブジェクトを渡します。
Vue.jsのまず第一歩はインスタンスの作成から始まる。 var app = new Vue({ //この中にオプションを記述 })
Veuインスタンスを作成します。 これはVue関数をnew演算子でインスタンス化します。 オプションには`el`と`data`と`methods`があります。 主な働きは次の様になります。
  • el:JavaScriptとHTMLを紐付ける記述
  • data:データの登録
  • methodes:関数を記述
インスタンス作成コード 
var app = new Vue({
 //この中にオプションを記述 
})
vue.jsを読み込むとVueというグローバル変数が定義されます。これはオブジェクトですが、コンストラクタでもあります。 そのためVueをnewすることでインスタンス化が行えます。

ルートテンプレート作成

JavaScriptとHTMLを紐付ける方法です。
  1. HTML側にdivタグを用意してid名をつけます。
  2. JavaScript側でVueをインスタンス化します。
最初に書くHTMLコードは次のようになります。 HTML側コード 
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js基本</title>
</head>
<body>
<div id="app">

</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="js/App.js"></script>
</body>
</html>
JavaScriptではnew演算子でVueをインスタンス化します。 そして「{el:’#app’}」のように、オブジェクトのelプロパティにHTML側のマウントしたい要素のid名を値として代入します。 javascriptコード 
var app = new Vue({
  el:'#app'
})
Vue.jsでの紐付けは「el:’id名’」とする決まりです。 Reactではrender関数を使って紐付けを行いましたがVue.jsではこのようにします。
Vueはコンストラクタでもありますので、コンストラクタ引数を使うことができます。 引数にオプションオブジェクトを渡すことでDOMデータとマッピングが行われます。

データのバインディング

Vue.jsを活用するプロジェクトで何らかのコンテンツ表示に必要なデータはVueをnewしてインスタンス化する際にdataプロパティとしてセットする値を記述します。 値はオブジェクト形式で記述します。 Vue.jsはデータをリアクティブな状態にしてくれる仕組みになっています。 リアクティブとは値を変更すると表示されている値もリアルタイムに変更される仕組みのことです。 具体的にはマスタッシュ構文「{{}}」がポイントです。
マスタッシュとは口髭のことです。 { を横向きにすると口髭に似ているからそう呼ばれています。
dstaプロパティに指定した値とHTMLを関連付けするには、HTML側でマスタッシュ構文「{{}}」を使い、マスタッシュ構文を使ってデータバインディングを行います。 そうすることでデータと描画を同期する事が可能となります。 App.js 
var app = new Vue({
  el:'#app',
  data:{
    message:'Hello world!'
  }
})
マスタッシュ構文は紐付けを行なったid名appの中で行う必要があります。 index.html 
<div id="app">
<p>{{message}}</p>
</div>
さらに表示内容を増やす App.js 
var app = new Vue({
  el:'#app',
  data:{
    message:'Hello world!',
    count:10,
    user:{
      lastname:'Tahara',
      firstname:'Masaharu',
      sex:'Man'
    },
    langs: ['javascript','php','python']
  }
})
index.html 
<div id="app">
<p>{{message}}</p>
<p>{{count}}</p>
<p>{{user.lastname}}</p>
<p>{{langs[0]}}</p>
</div>

ディレクティブについて

v-***で始まる特別な属性 ディレクティブについてへ公式ページでは次のように説明されています。
ディレクティブは、それ自身を Vue インスタンスのプロパティやインスタンスの文脈の中で評価される表現にバインドすることができます。配下のプロパティや表現の値が変更されたら、それらのディレクティブの update() 関数が同期的に呼ばれます。 ディレクティブとは、 DOM 要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークンです。Angular のものと比べ、 Vue.js でのディレクティブのコンセプトは徹底的にシンプルです。

属性のデータバインド

マスタッシュ構文を属性に使用することはできません。 例えば、input type=”text”の要素にjs側のdataを表示させたい場合に、マスタッシュ構文を使ってvalue属性の値に入れたくなります。けれども、これは正しく機能してくれません。 属性に使用する場合は「v-bind:value=”message”」のようにv-bindディレクティブを使用しなければなりません。 属性データバインドの中でも「v-bind」はもっとも重要で頻繁に使われますので使い方を練習して起きましょう。 
<input type="text" v-bind:value="message">

条件分岐　v-if

「v-if」を使うと要素の表示と非表示を切り替えることができます。 表示、非表示の切り替えはDOM自体を書き出したり、書き出さなかったりしています。 
<p v-if="toggle">{{message}}</p>

var app = new Vue({
  el:'#app',
  data:{
    toggle:false,
    message:'Hello world!',
  }
})

v-show

v-showを使うと要素の表示と非表示を切り替えることができます。 こちらはCSSのdisplayプロパティをnoneにするかどうかで行なっています。 
<p v-show="toggle">{{message}}</p>

v-for

オブジェクトの繰り返し 
<ol>
  <li v-for="lang in langs">{{lang}}</li>
</ol>

var app = new Vue({
  el:'#app',
  data:{
    toggle:false,
    message:'Hello world!',
    count:10,
    user:{
      lastname:'Tahara',
      firstname:'Masaharu',
      sex:'Man'
    },
    langs: ['javascript','php','python']
  }
})
v-forはオブジェクトを書き出すのにも使えます。keyは第2引数なので注意 
<ul>
<li v-for="(value,key) in user">{{key}}:{{value}}</li>  
</ul>

イベント

v-onディレクティブ

index.html 
<p><button v-on:click="onclick">click</button></p>
<p>{{now}}</p>
App.js 
var app = new Vue({
  el:'#app',
  data:{
    now:''
  },
  methods:{
    onclick:function(){
      this.now = new Date().toLocaleString()
    }
  }
})

双方向データバイディング

v-modelを使います。双方向データバインディングですから入力内容が元データにも反映されます。そのため、結果として`v-bind:value=”message”`にも影響が出ます。 
<input type="text" v-bind:value="message">
<input type="text" v-model="message">
<input type="text" v-model="message">

コンポーネント

コンポーネントは名前付きの再利用可能な Vue インスタンスです。 詳細は別途記事で説明します。 基本的な書き方 App.js 
Vue.component('hello-component',{
  template:'<p>Hello component!</p>'
})
index.html 
<hello-component></hello-component>
スポンサーリンク
タイトルとURLをコピーしました