Vueの変更点

• 追加された行はこのように表示されます。
• 削除された行はこのように表示されます。

!!!Vue
{{amazon B07BS62Z94}}

!!!バインド
!構文
 <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