343
347

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

5分でわかるVue.js基礎の基礎

Last updated at Posted at 2019-08-25

環境

JSFiddleでVueを選択するだけでVue.jsを試し打ちできる環境が作れます。
スクリーンショット 2019-08-25 22.38.11.png

基本構文

Vueインスタンスの生成

new VueでVueインスタンスを生成し、その中のel要素で、html側のどの部分を対象としてVueを使用するか定義することができます。

html
<div id='app'>
</div>
js
new Vue({
  el: '#app'
})

変数

data

Vueインスタンス内のdata要素に変数を定義することができます。格納した変数はhtml側で{{ }}をつけると呼び出すことができます。

html
<div id='app'>
  <p>{{ message }}</p>
</div>
js
new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJS!'
  }
})
スクリーンショット 2019-08-25 17.34.48.png

computed

関数の戻り値を変数として利用する場合はVueインスタンス内のcomputed要素に定義します。

html
<div id='app'>
  <p>{{ datetime }}</p>
</div>
js
new Vue({
  el: '#app',
  computed: {
    datetime: function(){
      return new Date();
    }
  }
})
スクリーンショット 2019-08-25 17.36.03.png

関数

Vueインスタンス内のmethods要素に関数を定義することができます。html側に関数名を記載することで呼び出すことができます。(@clickについては後述)

html
<div id='app'>
  <p>{{ message }}</p>
  <button @click='reverse'>反転</button>
</div>
js
new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJS!'
  },
  methods: {
    reverse: function(){
      this.message = this.message.split('').reverse().join('');
    }
  }
})

ezgif.com-video-to-gif.gif

ディレクティブ

htmlタグの中に定義できるVue.js独自の属性のことです。

v-bind

タグ属性の値をVueインスタンス内で定義した変数で表現する際に使います。

html
<div id='app'>
  <a v-bind:href='url'>Qiita</a>
</div>
js
new Vue({
  el: '#app',
  data: {
    url: 'https://qiita.com'
  }
})

ezgif.com-video-to-gif (1).gif

v-bind::に省略することもできます。

html
<div id='app'>
  <a :href='url'>Qiita</a>
</div>

v-on

イベントのトリガーと呼び出す関数を定義する際に使います。

html
<div id='app'>
  <p>{{ message }}</p>
  <button v-on:click='reverse'>反転</button>
</div>
js
new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJS!'
  },
  methods: {
    reverse: function(){
      this.message = this.message.split('').reverse().join('');
    }
  }
})

ezgif.com-video-to-gif.gif

v-on:@に省略することもできます。

html
<div id='app'>
  <p>{{ message }}</p>
  <button @click='reverse'>反転</button>
</div>

v-model

双方向バインディング(「入力フォーム⇆Vue変数」の同期)を実現する際に使います。

html
<div id='app'>
  <input type='text' v-model='message'>
  <p>{{ message }}</p>
</div>
js
new Vue({
  el: '#app',
  data: {
    message: 'Hello VueJS!'
  }
})

ezgif.com-video-to-gif (2).gif

v-if

条件に応じて表示させるhtml要素を動的に変更する際に使用します。

html
<div id="app">
  <button @click="countUp">ボタン</button>
  <p>{{ count }}</p>
  <p v-if="isMultipleOf4">4の倍数</p>
  <p v-else-if="isMultipleOf2">偶数</p>
  <p v-else>奇数</p>
</div>
js
new Vue({
  el: "#app",
  data: {
    count: 0
  },
  computed: {
    isMultipleOf4: function(){
      return this.count%4==0;
    },
    isMultipleOf2: function(){
      return this.count%2==0;
    }
  },
  methods: {
    countUp: function(){
      this.count += 1;
    }
  }
})

ezgif.com-video-to-gif (3).gif

v-for

配列やオブジェクトの中身を反復表示させる際に使用します。

html
<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{ fruit }}</li>
  </ul>
</div>
js
new Vue({
  el: "#app",
  data: {
    fruits: ['りんご','バナナ','ぶどう']
  }
})
スクリーンショット 2019-08-25 19.21.28.png

コンポーネント

コンポーネントとは再利用可能なVueインスタンス要素です。
複数のコンポーネントを作成して、それを部品のように組み立てることで1つのWebページを作ることができます。

js側の書き方

コンポーネントの要素をオブジェクトで書きます(component変数の部分)。
書き方はVueインスタンス内での定義方法とほぼ同一です。
※data部のみ、Vueインスタンスが生成されるときの初期変数を関数で返してあげるようにします。

Vueインスタンスでコンポーネントを利用可能にするには二通りの書き方があります。
一つはVue.component([コンポーネント名],[コンポーネント要素])で全てのVueインスタンスで有効にする方法。
もう一つはVueインスタンス内のcomponents部に記載することで、特定のVueインスタンスで有効にする方法です。
どちらでも構いませんが、個人的には後者の方がどのVueインスタンスでどのコンポーネントが使用されているか分かりやすくて良いと思います。

js
var component = {
 data: function(){
   return {
     count: 0
   }
  },
  template: "<p>{{count}}<button @click='increment'>+1</button></p>",
  methods: {
  	increment: function(){
    	this.count += 1;
    }
  }
}

//方法1
Vue.component("sample-component",component)
new Vue({
  el: "#app",
})

//方法2
new Vue({
  el: "#app",
  components: {
  	"sample-component": component
  }
})

html側での書き方

html内で先ほど指定したコンポーネント名でタグを書くだけで、その部分が丸っとコンポーネントに置きかわります。

html
<div id="app">
  <sample-component></sample-component>
</div>

ezgif.com-video-to-gif (4).gif

再利用可能なので、このように複数配置することもできます。

html
<div id="app">
  <sample-component></sample-component>
  <hr>
  <sample-component></sample-component>
  <hr>
  <sample-component></sample-component>
</div>
スクリーンショット 2019-08-30 9.43.38.png
343
347
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
343
347

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?