「Vue」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==Vue== {{amazon|B07BS62Z94}} ==バインド== ====構文==== <a v-bind:href="url">リンク</a> new Vue( { : data: { url: 'http://typea.info…」) |
(→算出構文) |
||
(同じ利用者による、間の3版が非表示) | |||
1行目: | 1行目: | ||
− | ==Vue== | + | ==[[Vue]]== |
{{amazon|B07BS62Z94}} | {{amazon|B07BS62Z94}} | ||
==バインド== | ==バインド== | ||
====構文==== | ====構文==== | ||
− | + | <a v-bind:href="url">[[リンク]]</a> | |
− | new Vue( | + | new [[Vue]]( |
{ | { | ||
: | : | ||
13行目: | 13行目: | ||
}); | }); | ||
====省略形==== | ====省略形==== | ||
− | + | <a :href="url">[[リンク]]</a> | |
====算出構文==== | ====算出構文==== | ||
− | new Vue( | + | new [[Vue]]( |
{ | { | ||
: | : | ||
25行目: | 25行目: | ||
}); | }); | ||
<blockquote>メソッドでも同様のことが行えるが、メソッドが再描画に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティが変更された場合にのみ評価される点が異なる</blockquote> | <blockquote>メソッドでも同様のことが行えるが、メソッドが再描画に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティが変更された場合にのみ評価される点が異なる</blockquote> | ||
+ | |||
==イベント処理== | ==イベント処理== | ||
====メソッド名==== | ====メソッド名==== | ||
− | + | <button v-on:click ="doSomething">クリック</button> | |
− | new Vue({ | + | new [[Vue]]({ |
: | : | ||
methods: { | methods: { | ||
35行目: | 36行目: | ||
}); | }); | ||
====メソッド呼び出し==== | ====メソッド呼び出し==== | ||
− | + | <button v-on:click ="doSomething('someArgs')">クリック</button> | |
====省略構文==== | ====省略構文==== | ||
− | + | <button @click ="doSomething('someArgs')">クリック</button> | |
− | ===Vue Cli=== | + | ===[[Vue]] Cli=== |
*https://cli.vuejs.org/guide/ | *https://cli.vuejs.org/guide/ | ||
− | ==Vuetify== | + | ==[[Vuetify]]== |
*https://vuetifyjs.com/ja/ | *https://vuetifyjs.com/ja/ | ||
===アプリケーション作成=== | ===アプリケーション作成=== | ||
− | =====Vue.js Cliのインストール===== | + | =====[[Vue]].js Cliのインストール===== |
− | + | > [[npm]] install @vue/cli -g | |
=====プロジェクトをひな型から作成===== | =====プロジェクトをひな型から作成===== | ||
− | + | > vue create {my-app-name} | |
*作成されたら | *作成されたら | ||
− | + | > cd {my-app-name} | |
− | + | > [[npm]] run serve | |
==Layout== | ==Layout== | ||
− | [Vuetify] | + | [[Vuetify]] | |
====icon==== | ====icon==== | ||
*https://material.io/tools/icons/?style=baseline | *https://material.io/tools/icons/?style=baseline | ||
− | ==Tips== | + | ==[[Tips]]== |
===ファイルアップロード=== | ===ファイルアップロード=== | ||
*http://tech.aainc.co.jp/archives/10714 | *http://tech.aainc.co.jp/archives/10714 | ||
− | ===Visual Studio Code=== | + | ===[[Visual Studio Code]]=== |
====Vetur 拡張==== | ====Vetur 拡張==== | ||
*https://qiita.com/nyallpo/items/c50909926e465fabdb55 | *https://qiita.com/nyallpo/items/c50909926e465fabdb55 |
2021年10月10日 (日) 13:39時点における最新版
目次
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 拡張
© 2006 矢木浩人