Vue

Vue

link

バインド

構文

<a v-bind:href="url">リンク</a>
new Vue(
{
   :
   data: {
      url: 'http://typea.info'
   }
});

省略形

<a :href="url">リンク</a>

算出構文

new Vue(
{
   :
   computed: {
     url: function() {
       return this.baseUrl + "/hoge";
     }
   }
});

メソッドでも同様のことが行えるが、メソッドが再描画に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティが変更された場合にのみ評価される点が異なる

イベント処理

メソッド名

<button v-on:click ="doSomething">クリック</button>
new Vue({
  :
  methods: {
    doSomething: function() {}
  }
});

メソッド呼び出し

<button v-on:click ="doSomething('someArgs')">クリック</button>

省略構文

<button @click ="doSomething('someArgs')">クリック</button>

Vue Cli

• https://cli.vuejs.org/guide/

Vuetify

• https://vuetifyjs.com/ja/

アプリケーション作成

Vue.js Cliのインストール

> npm install @vue/cli -g

プロジェクトをひな型から作成

> vue create {my-app-name}

• 作成されたら

> cd {my-app-name}
> npm run serve

Layout

Vuetify |

icon

• https://material.io/tools/icons/?style=baseline

Tips

ファイルアップロード

• http://tech.aainc.co.jp/archives/10714

Visual Studio Code

Vetur 拡張

• https://qiita.com/nyallpo/items/c50909926e465fabdb55