RailsGitMySQLCUIHerokuSalesforceAWSAuth0エンジニア転職SEOアフィリエイトプロフィールプライバシーサイトマップこのブログは未経験からのエンジニア転職やプログラミングの勉強方法などを発信する、現役エンジニアによるエンジニアのためのトータル技術ブログです。ブログとご一緒にSNSのフォローもよろしくお願いします。なんだわん?にゃんみそんなことも知らないのかにゃ。フレームワークだにゃん。基本的なことを学びましたので忘備録もかねて記事にしました。Web画面に対してアニメーションとかの動的な動きをつけるためにできたプログラミング言語です。2つのインプットタグに数値を入力してボタンをクリックすると計算が実行されるようなユーザーの動きに対して画面の表示内容が変化するWebアプリなどですね。動的にWebの表示画面を変化させる仕組みを「データバインディング」といいます。構成されたリソースとして生成し、再利用可能にすることでスムーズな開発機能を実現することができます。以下のコードをブラウザで確認してみてください。world」が表示されたのが確認できます。次にブラウザでデベロッパーツールを開きコンソールに以下の文字列を入してください。'vueの文字列を変更します'リアルタイムでデータがバインドされ画面のデータが変更されていることを確認できます。内のコードを下記のように修正します。要素に書き込みを行っています。要素の内容を変更したいときは毎度その要素を取得し更新内容を記述する必要があります。これではコードの記述量が増え、タイプミスでのエラーの可能性も高まってしまいます。データの状態に対してDOMを構築するということです。書き込み処理を記述しなくても画面の内容が変化するのはこの仕組みがあるからです。任せちゃえという便利な仕組みを利用することが基本的な使い方となります。最大のメリットはその圧倒的な学習コストの低さです。利用すればファイル1つ読み込めばすぐにでも始められます。使用しているエンジニアさんがこうおっしゃっていました。インストールしないでもCDNで十分出し、そういう現場いっぱいありますよ。始めるお手軽の開発の勉強がすでに体系的な学習になっているというのはとても良いメリットですよね。大規模なプロダクトにも対応できるなどの柔軟性も持ち合わせていますので汎用性も非常に優れています。id="app"></div>アプリケーションを表示するためにどの要素に対して配置するかを決めます。記述を行っていきます。マウント配置されたテンプレートの要素とアプリを紐付けることです。セレクタを設置し要素と紐付けました。先ほどのコードでは以下の部分です。'#app',ディレクティブテンプレートとロジックの紐付けを行う部分です。今回は触れてませんが、以下のような記述があったらそうです。v-bind:key="id"></div>「v-」と始める記述のところです。変数「id」として返します。正確にはデータオブジェクトのプロパティ(オブジェクトの情報)だそうです。属性値として文字列「id」を返します。json形式で記述された「:」でつながれた部分です。データの型のようなイメージでしょうか。以下の部分になります。World'}各オプションにより制約や使い方がドキュメントで丁寧に説明されてますので参考にしてください。https://012-jp.vuejs.org/api/options.html012-jp.vuejs.orgさいごにさいごまで読んでいただきありがとうございます。基本的なところをしっかりと自分の言葉として落とし込んでおきたく今回記事にしましたが、少しでも役に立てば幸いです。次回からいろんな実装例などを公開していきますので引き続きよろしくお願いします。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。Mixでフロントエンドの画面遷移を行う方法VueRouter×LaravelMixを使ったフロントエンドでの画面遷移の方法。Laravelでサーバー処理を画面はVue.jsと処理を分けてSPAサイトを構築したい人のための基礎知識を書きました。Transitionでクロスフェードなスライダーをつくる方法Vue.jsを使用したスライドの実装方法を解説。ボタンクリックで切り替わるスライドでなく、時間経過で自動で画像がスライドするホームページのヘッダーなどで使用する想定で作りました。2020.05.26JavaScript【jQuery】テーブルデータを取得しCSV出力する方法jqueryを使ってテーブルデータを取得してCSV出力する方法です。全件CSV出力はもちろん、検索結果のみのCSV出力とテーブルデータが可変する場合でも現在表示されているテーブルデータをCSVにするプログラムなので対応が可能です。2020.08.28JavaScript【JavaScript】Date関数での日付処理まとめこんにちは、あっきー(IwswAkht)です。JavaScriptでよく使うけど忘れがちなDateオブジェクトの処理についてまとめます。APIを使ってJavascript、jQueryから動画を再生する方法を解説します。(ミュート)の方法を記載。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。元キャバクラ店長から未経験でエンジニアに転職した異端児。自分の経験を元に、エンジニア転職や未経験からでも挫折しないプログラミングの勉強方法の発信をしてます。転職して半年たって思うこと。2020.11.10【簡単】アマゾンアフィリエイトリンクのつくり方【ヨメレバ・カエレバではないよ】2020.08.30。