はじめに

今回はvueの基礎的な命令を勉強したのでその記録を残しておきます。以下のGitHubにて勉強したさいの記録をあげておきます。

基礎記述について

vue.jsの基礎的な記述方で、記述する側のidの名前を決めてそれをel:で指定し、それらにdata:{}にデータを記述することで、html側にデータの変数名で呼び出すことができる様になる。

Vue側

var app = new Vue({
  el:  '#app',
  data: {
    message: 'Hello Vue.js',
    count: 10,
    user: {
      lastName: 'Yamada',
      firstName: 'Taro'
    },
    colors: ['Red','Green','Blue']
  }
})

HTML側

<div id="app">
  <p>{{ message }}</p>
  <p>{{ count }}</p>
  <p>{{ user.lastName }}</p>
  <p>{{ colors[0]  }}</p>
</div>

v-bindについて

v-bindはdataとhtml側の出力値を結びつける関数である

Vue側

var app = new Vue({
  el:  '#app',
  data: {
    message: 'Hello Vue.js'
  }
})

HTML側

<input type="text" v-bind:value="message"/>

v-ifについて

v-ifを用いることで出力値をフロントエンドに表示するかどうかを条件分岐することができる。
v-ifの場合、フロントエンドに全く記述されない。
Vue側

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

HTML側

<input type="text" v-model="toggle"/>
<p v-if="toggle">Hello</p>

v-showについて

v-showを用いることで出力値をフロントエンドに表示するかどうかを条件分岐することができる。
v-showの場合、フロントエンドに出力されない場合display:noneとなるので出力されないことが多い場合v-ifに比べて負荷が重くなる。
Vue側

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

HTML側

<input type="text" v-model="toggle"/>
<p v-show="toggle">Hello</p>

v-forについて

v-forとは条件を元に複数回出力を繰り返すものである。

Vue側

var app = new Vue({
  el:  '#app',
  data: {
    colors: ['Red','Green','Blue']
  }
})

HTML側

<ul>
  <li v-for="color in colors">{{ color }}</li>
</ul>

v-onについて

v-onは<button>タグ等の処理をjavascriptなどのscript言語のどの処理を呼び出すかを明示することができる。

Vue側

var app = new Vue({
  el:  '#app',
  methods: {
    onclick: function(){
      alert('onclick');
    }
  }
})

HTML側

<button v-on:click="onclick">click</button>

v-modelについて

v-modelはデータと出力を双方向に結びつけることができる関数である。

Vue側

var app = new Vue({
  el:  '#app',
  data: {
    greet: 'Hello v-model'
  }
})

HTML側

<p><input type="text" v-model="greet"/></p>
<p><input type="text" v-model="greet"/></p>

componentについて

componentとしてまとめることでtemplateに書かれた内容を自作のタグとしてhtml側にすぐ呼び出せる様になる。記述方法は以下の様にする。

Vue側

Vue.component('hello-component',{
  template:  '<p>Hello</p>'
})

HTML側

<hello-component></hello-component/>

上記の様に記述することで<p>Hello</p>を呼び出すことができる。

終わりに

今回は学んだことをアウトプットすることで再確認することができた。

KKZooの備忘録

vue.jsの基礎勉強