ki-hi-ro.com

DAILY JOURNAL

Vue.js

16記事の記録。

2022年11月

  1. SFCとは何か？

    Vue.jsには、SFC（Single File Component）という用語があります。 この記事では、SFCとは何か？について解説していきます。 拡張子は「.vue」 SFCの拡張子は「.vue」です。 どうやって.vueファイルを機能させるか？ これまで、CDNでvueのコアファイルを読み込んで、HTMLに少しだけ取り入れるという形で、vue.jsを使用してきました。 拡張子は、.htmlでした。 チュートリアルでは、すでに環境構築がされている https://ja.vuejs.org/tutorial/#step-1 vue.jsが分かりやすくまとめてくれているチュートリアルでは、SFCを手軽に学ぶことができる一方、環境構築をどうすればいいの…

  2. v-on、watch、methods

    vue.jsには、状態を監視する機能があります。 この記事では、ボタンを押すと3秒カウントして、アラートを出すプログラムを作成していきます。 こちらの「chapter8」を参考にしました。 参考書のVue.jsのバージョンは2.5ですが、今回は3系の書き方に変更しました。 今回作成したプログラム 最初は「3秒」と「ボタン」が表示されています。 ボタンを押すとタイマーが動作します。 ボタンを押して2秒たった時の様子 3秒経つとアラートが表示されます。 HTML・JSの記述 HTML・JSの記述で、必要な部分のみ抜粋して書いていきます。 こちらが、HTMLの記述です。 <script src="https://unpkg.com/vue@3/dist…

  4. Vue.jsのバージョン、Evan Youさんの趣味、v-model

    Vue.jsのバージョン Evan Youさんの趣味 v-model について書いていきます。 Vue.jsのバージョン 2013年12月8日の0.6.0から、バージョンアップを繰り返しています。 v2.7.13までのリリース情報 v3.0.0以降のリリース情報 Evan Youさんの趣味 また、コードネームには日本のアニメの名前が使用されており、3.0.0には「ONE PIECE」という名前が付いていました。 https://github.com/vuejs/core/releases/tag/v3.0.0 Vue.jsの作者の「Evan You」さんは、日本のアニメが好きなようです。 https://blog.asial.co.jp/1623 v-…

  5. CDNから直接Vueを使用する方法、宣言的レンダリング、リアクティビティー（カウンター）

    CDNから直接Vueを使用する方法 宣言的レンダリング リアクティビティー（カウンター） について書いていきます。 サンプルコード index.htmlをブラウザで開くと、サンプルが表示されます。 https://github.com/ki-hi-ro/my-vue-js/tree/main/vue-js-1 このようなサンプルです。 CDNから直接Vueを使用する方法 以下の記述を行います。 <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> 公式サイトの該当箇所はこちらです。 https://ja.vuejs.org/guide/quick-s…

2022年10月

  1. Vue.jsの求人情報と報酬

    私はこれまでにWEBエンジニアとして、以下のような仕事を経験しました。 エージェントを通した派遣社員としてのWordPress記事コンテンツ作成業務→ 週3、1日6時間で月10万円ほど 地元名古屋のWEB制作会社からの案件受託→ 例えば、デザインデータからのページ構築の場合、1件3万円ほど クラウドワークスでの案件受託→ LPコーディング1件13,000円や、営業管理ツールのフロントエンド構築2ヶ月で40万円ほど これまでに経験した仕事は主にWEB制作でした。WEB制作は、WEB開発と比べると取得の難易度が低く、競合が多くなりがちです。 例えば、クラウドワークスでは以下のように一つの案件に対して、36人もの人が応募しています。 https://crow…