Vue.jsで社用登録データフォームを作ってみた

  • 2017年8月31日
  • by 
Vue.jsで社用登録データフォームを作ってみた

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。
「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。

なお、今回の作業フローは以下のような感じになります。

  • 「Vue.js」でスタイルを書き換える
  • 「Vue.js」で入力フォームと入力データをjson形式で送信

さらに詳しく「Vue.js」を知りたい方は、下記公式サイトをご参照ください。
<参照:「Vue.js」公式サイト

手順1:「Vue.js」でスタイルを書き換える

まずはdivのスタイルを書き換えてみましょう。
以下のようなコードになります。

上記コードの解説をすると……
1:「div」にidを付与する
2:「input」要素にはv-modelでname値やid値のような値を振る
   例) v-model=”borderColor”
3:出力したい値に「{{…..}}」を書く

これが終わったら次に「script」を書いてみましょう。

今回はjQueryを使っていたので、jQueryのリンクと「Vue.js」のリンクが必要となります。

ソフトバンク・au・ドコモの方は、公式のオンラインショップを利用すれば頭金不要で通常のショップよりお得に購入できます。

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでもこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...
『Maven』でSeleniumライブラリの管理をしよう②... こんにちは。M.Sです。 前回の続編になります。 <前回のおさらい『「Maven」でSeleniumライブラリの管理をしよう①』> なお、今回は「pom.xml」を編集し、以下のアクションをSeleniumで行ってみようと思います...