Vue.jsのきほん

Vue.jsのきほん

基本情報をメモ

Vue.jsの読み込み方

1. CDN
- Content Delivery Netwotk
2. 直接読み込む
- ファイルをダウンロードして配置
3. NPM
- パッケージ管理ソフトの利用

vueインスタンスの作成

var app = new Vue ({

})

new Vueと記載することで、vueインスタンスを作成することができます。

データバインディング

データと描画を同期するシステム。

- 双方向データバインディング
- 単方向データバインディング
- ワンタイムデータバインディング

テンプレート

HTMLベースのテンプレート構文を使用した、描画部分に関する記述のこと。 所謂、V(view)に相当する。

dataオブジェクトにオブジェクトや配列を設定する方法

var app = new Vue({
  el: '#app',
  data: {
    user: {
      lastName: 'Yamada',
      firstName: 'Taro',
      prefecture: 'Tokyo'
    },
    colors: ['Red', 'Green', 'Blue']
  }
})

<div id="app">
  <p>
  {{ user.prefecture }} -> 'Tokyo'
  </p>
  <p>
  {{ colors[1] }} -> 'Red'
  </p>
</div>

ディレクティブ

v-で始まるもの

v-bind
v-if
v-show
v-for
v-on
v-model

この辺が有名

v-bind

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

<div id="app">
  <!-- NG（マスタッシュ構文はテキストコンテンツのため属性の場合はv-bindにする） -->
  <!-- <input type="text" value="{{ message }}"/> -->
  <input type="text" v-bind:value="message"/>
</div>

--> input枠にHello Vue.js!と表示される

v-if

要素の表示非表示ができる

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

<div id="app">
  <p v-if="toggle">
  Hello
  </p>
</div>

--> toggleの値がfalseなので何も表示されない

falseの時はDOMから削除される。 要素を頻繁に表示非表示するときはv-ifではなくv-showがベター

v-show

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

<div id="app">
  <p v-show="toggle">
  Hello
  </p>
</div>

---> toggleの値がtrueなのでHelloと表示される

toggleの値がfalseの時はcssのdisplay:noneとされる。

v-for

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

<div id="app">
  <ol>
    <li v-for="color in colors">{{ color }}</li>
  </ol>
</div>

--> 

v-on

var app = new Vue({
  el: '#app',
  data: {
    now: ''
  },
  methods: {
    onclick: function() {
        // alert('onclick!');
      this.now = new Date().toLocaleString();
    }
  }
})

<div id="app">
  <button v-on:click="onclick">
  Click!
  </button>
  <p>
  {{ now }}
  </p>
</div>

---> clickボタンが押されるとonclickメソッドが呼ばれて、現在時刻が表示される

v-model

双方向データバインディングのv-modelではdataオブジェクトの値を変更-> テンプレートの値変更に加えて、dataオブジェクトの値変更 <- テンプレートの値変更も可能になります。

コンポーネント

コンポーネントとはページを構成するUI部品のこと よく利用する、機能をコンポーネント化することで再利用性が高く、コードの見通しが良くなります。 -> 開発効率のUPが見込めます。

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

var app = new Vue ({
  el: '#app'
})

<div id="app">
  <hello-component></hello-component>
</div>

---> hellocomponentの<p> Hello </p>が表示されます。

参考

https://www.udemy.com/course/learn-vuejs/