JavaScript勉強会

JavaScriptの学習日記

Vue.js

静的サイトジェネレーターの人気ランキング「StaticGen」

Webサイトを作るとき、表示速度を早くするために、静的ページを中心にしたいです。 静的ページ=早い:Webサーバーに置いたHTMLファイルをそのまま表示 動的ページ=遅い:アクセスのたびにプログラムでHTMLを生成して表示 Webサイトのコンテンツ制作を管理…

Vue.jsの「el」とは?

Vue.jsの学習メモ。 jsstudy.hatenablog.com Vue.jsの基本的なコードを見ると、「el」というプロパティーがあるけど、これって何なんだろう?と思いました。 var app = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) ↑この「el: '#app'」と…

Vue.js テキストのバインディング

Vue.jsの学習メモ。 jsstudy.hatenablog.com テキストのバインディング (p.36) Vue.jsを使って、最も基本的な処理である、画面に文字を表示させるという処理を実現してみます。 (サンプルコード) https://cr-vue.mio3io.com/guide/chapter1.html#テキスト…

Vue.jsのキーコンセプト

Vue.jsの本「基礎から学ぶ Vue.js」を読んでたけど、途中でやめてたので復習! 最初に読んだ部分を忘れたので、少し戻りますw jsstudy.hatenablog.com データをDOMに変換するのがVue.jsの役目 データ駆動、リアクティブ・プログラミング テンプレート、ディ…

Vueアプリの起動

Vue.jsの勉強メモ。 jsstudy.hatenablog.com Vueの起動 (p.37) Vueアプリケーションの作成 アプリケーションの作成をはじめるには、コンストラクタ関数Vueを使ってルートとなるVueインスタンスを作成します。 var app = new Vue({ // オプション }) 返り値は…

Vue Devtoolsのインストール

今日はVue.jsのお勉強。「基礎から学ぶ Vue.js」を読んでます。 jsstudy.hatenablog.com (p.36) 学習用のひな形ファイルを用意 CHAPTER 1 | 基礎から学ぶ Vue.js ↑上記のような「index.html」「main.js」を作って、Chromeで開き、コンソール画面を見ると、以…

基礎から学ぶ Vue.js 【目次】

JavaScriptフレームワークの「Vue.js」の使い方を学ぶために「基礎から学ぶ Vue.js」という本を読んでみます。 基礎から学ぶ Vue.js 作者: mio 出版社/メーカー: シーアンドアール研究所 発売日: 2018/05/29 メディア: 単行本(ソフトカバー) この商品を含…

JavaScriptフレームワークの本

Amazonを見ていたら、JavaScriptの新刊がいろいろありました。 その中で気になった本をいくつかメモ。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロン…

Vue.jsでGet/Setの作成 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-3-2 Get/Setの作成 HTML CSS JavaScript 実行結果 Computedプロパティとメソッドの違い まとめ 4-3-2 Get/Setの作成 前回、Computedプロパテ…

Vue.jsのComputedプロパティ 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-3-1 Computedプロパティ Computedプロパティとは? SwiftのComputedプロパティ HTML CSS JavaScript 実行結果 まとめ 4-3-1 Computedプロパテ…

Vue.jsのフィルターを使う 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-8 フィルターを使う Vue.js バージョン1のフィルター HTML CSS JavaScript 実行結果 Vue.js バージョン2のフィルター HTML CSS JavaScript …

Vue.jsでJavaScript式を使う 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-7 JavaScript式を使う HTML CSS JavaScript 実行結果 createdフック まとめ 4-2-7 JavaScript式を使う (p.129) Mustacheタグには、dataの値…

Vue.jsでHTMLの表示 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-6 HTMLの表示 HTML CSS JavaScript 実行結果 まとめ 4-2-6 HTMLの表示 (p.127) ここまでは単純なテキストを表示していましたが、HTMLのコー…

Vue.jsでイべントとメソッドの利用 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-5 イべントとメソッドの利用 HTML CSS JavaScript 実行結果 v-on属性 まとめ 4-2-5 イべントとメソッドの利用 (p.125) テキストを入力など…

HTML側からVueに値を設定する 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-4 HTML側からVueに値を設定する HTML CSS JavaScript 実行結果 v-model属性 v-bind属性 ディレクティブとは? まとめ 4-2-4 HTML側からVue…

Vueオブジェクト 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-2-1 HTMLファイルを用意する HTMLファイル スタイルシート Mustacheタグ 4-2-2 スクリプトを作成する JavaScript 4-2-3 Vueオブジェクト まと…

技術評論社の連載記事「Vue.js入門 ― 最速で作るシンプルなWebアプリケーション」が分かりやすい!

Vue.jsの学習メモ。 分かりやすい解説記事がありました! gihyo.jp 入門書 「JavaScript フレームワーク入門」の第4章「Vue.js」を読み終えました。 この本の説明とサンプルコードは、Vue.jsのバージョン1だったので、最新のバージョン2で動かすとたまにエラ…

JavaScriptにおけるMVC(MVVM) 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-1-1 JavaScriptにおけるMVC(MVVM) MVCパターン MVVMパターン MVCとMVVMの違い データバインディングとは? まとめ 4-1-1 JavaScriptにおけ…

Vue.jsの基本 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。 今日は「JavaScript フレームワーク入門」の第4章を読んでみます。 jsstudy.hatenablog.com 4-1 Vue.jsの基本 公式サイト 日本語ドキュメント 参考資料 Googleトレンド まとめ 4-1 Vue.jsの基本 (p.113) Vue.jsは、MVVM(Model-View-View…