「Vue」の版間の差分
ナビゲーションに移動
検索に移動
(ページの作成:「==Vue== {{amazon|B07BS62Z94}} ==バインド== ====構文==== <a v-bind:href="url">リンク</a> new Vue( { : data: { url: 'http://typea.info…」) |
|||
| 4行目: | 4行目: | ||
==バインド== | ==バインド== | ||
====構文==== | ====構文==== | ||
| − | + | <a v-bind:href="url">リンク</a> | |
new Vue( | new Vue( | ||
{ | { | ||
| 13行目: | 13行目: | ||
}); | }); | ||
====省略形==== | ====省略形==== | ||
| − | + | <a :href="url">リンク</a> | |
====算出構文==== | ====算出構文==== | ||
new Vue( | new Vue( | ||
| 24行目: | 24行目: | ||
} | } | ||
}); | }); | ||
| − | + | <blockquote>メソッドでも同様のことが行えるが、メソッドが再描画に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティが変更された場合にのみ評価される点が異なる</blockquote> | |
==イベント処理== | ==イベント処理== | ||
====メソッド名==== | ====メソッド名==== | ||
| − | + | <button v-on:click ="doSomething">クリック</button> | |
new Vue({ | new Vue({ | ||
: | : | ||
| 35行目: | 35行目: | ||
}); | }); | ||
====メソッド呼び出し==== | ====メソッド呼び出し==== | ||
| − | + | <button v-on:click ="doSomething('someArgs')">クリック</button> | |
====省略構文==== | ====省略構文==== | ||
| − | + | <button @click ="doSomething('someArgs')">クリック</button> | |
| 46行目: | 46行目: | ||
===アプリケーション作成=== | ===アプリケーション作成=== | ||
=====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==== | ||
2020年2月15日 (土) 08:06時点における版
目次
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";
}
}
});
<blockquote>メソッドでも同様のことが行えるが、メソッドが再描画に際して常に評価されるのに対して、算出プロパティはそれが依存するプロパティが変更された場合にのみ評価される点が異なる</blockquote>
イベント処理
メソッド名
<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
icon
Tips
ファイルアップロード
Visual Studio Code
Vetur 拡張
© 2006 矢木浩人
