!!!Vue
{{amazon B07BS62Z94}}
!!!バインド
!構文
リンク
new Vue(
{
:
data: {
url: 'http://typea.info'
}
});
!省略形
リンク
!算出構文
new Vue(
{
:
computed: {
url: function() {
return this.baseUrl + "/hoge";
}
}
});
""メソッドでも同様のことが行えるが、メソッドが再描画に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティが変更された場合にのみ評価される点が異なる
!!!イベント処理
!メソッド名
new Vue({
:
methods: {
doSomething: function() {}
}
});
!メソッド呼び出し
!省略構文
!!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