| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

Vue

提供: MyMemoWiki
ナビゲーションに移動 検索に移動

Vue

バインド

構文

<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

Vuetify

アプリケーション作成

Vue.js Cliのインストール
> npm install @vue/cli -g
プロジェクトをひな型から作成
> vue create {my-app-name}
  • 作成されたら
> cd {my-app-name}
> npm run serve

Layout

Vuetify |

icon

Tips

ファイルアップロード

Visual Studio Code

Vetur 拡張