トップ 差分 一覧 ping ソース 検索 ヘルプ PDF RSS ログイン

Vue


RSS 無料英単語

目次



記事一覧

キーワード

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

Tips


 ファイルアップロード


 Visual Studio Code

Vetur 拡張



YAGI Hiroto (piroto@a-net.email.ne.jp)
twitter http://twitter.com/pppiroto

Copyright© 矢木 浩人 All Rights Reserved.