学習メモ

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その6

7 Vuex によるデータフローの設計・状態管理 もスキップ。ざっくり読みましたが、データをどう持たせて処理するのが良いのかの参考になりました。 8 中規模・大規模向けのアプリケーション開発 ① 開発環境のセットアップ ② 設計 ③ 実装 を実際に手を動かさず…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その5

5.3 カスタムディレクティブ 5.4 描画関数 5.5 ミックスイン はスキップ。もう少し基礎的な部分を理解したらもう一度読み直そうと思います。。 6 単一コンポーネントによる開発 6.2 単一コンポーネントとは Vue.js では、上記のような単一ファイルコンポーネ…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その4

5 Vue.js の高度な機能 5.1 トランジションアニメーション 5.1.1 transition ラッパーコンポーネント transition コンポーネントは、自身が囲んでいるコンポーネントあるいは要素が出入り(enter/leave)する際にトランジションを追加します。出入りは、以下…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その3

4 Vue Router を活用したアプリケーション開発 4.2 ルーティングの基礎 4.2.2 ルーティング設計 ルート と ルーターコンストラクタ を用います。 <div id="app"> <router-link to="/top">トップページ</router-link> <router-link to="/users">ユーザー一覧ページ</router-link> <router-view></router-view> </div> <script src="https://unpkg.com/vue@2.5.17"></script>

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その2

3 コンポーネントの基礎 3.2 Vue コンポーネントの定義 3.2.1 グローバルコンポーネントの定義 <div id="app"> <fruits-list-title></fruits-list-title> <fruits-list-description></fruits-list-description> <fruits-list-table></fruits-list-table> <fruits-list></fruits-list> </div> // グローバルコンポーネント Vue.component("fruits-list…

【学習メモ】Vue.js入門 基礎から実践アプリケーション開発まで その1

Vue.js入門 を読んでいます。 ネコ本、イヌ本を読んだので実践編と勝手に意気込んでいましたが、どうやら逆で概要や考え方的な内容からの記載が多く、より深く学べそうな気がします。 Vue.js入門 基礎から実践アプリケーション開発まで作者: 川口和也,喜多啓…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その11

Chapter13 JSON データを表示させてみよう 01 JSON ファイルの読み込み方 JSON を読み込む <div id="app"> <input type="file" v-on:change="onFileChange" /> <p>読み込みデータ:<br />{{ loadData }}</p> </div> new Vue({ el: "#app", data: { loadData: "" }, methods: { onFileChange: function(e) { file = e.target.files[0]; if (…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その10

Chapter12 部品にまとめるとき 01 部品にまとめる:コンポーネント 部品にまとめるときは、component ある部品が HTML 上で「どのように表示されるのか」をオブジェクトとしてまとめるには、template オプションを使います。そして、そのオブジェクトに名前…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その9

Chapter11 ToDoリストを作ってみよう <div id="app"> <div v-for="todo in todos"> <label> <input type="checkbox" v-model="todo.done"> <span v-bind:class="{donestyle:todo.done}">{{ todo.text }}</span> </label> </div> </div>

【学習メモ】動かして学ぶ!Vue.js 開発入門 その8

Chapter10 アニメーションするとき 01 表示/非表示時にアニメーションする:transition 表示/非表示時にアニメーションするときは、transition CSSスタイル 要素が現れるとき .v-enter:現れる前の状態 .v-enter-active:現れている最中 .v-enter-to:現れ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その7

Chapter9 Markdownエディタを作ってみよう 02 Markdownエディタを作る <div id="app"> <textarea v-model="input"></textarea> <div v-html="convertMarkdown"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.4.0/marked.min.js"></script> new Vue({ el: "#app", data: { input: '' }, computed: { // inputが変…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その6

Chapter8 データの変化を監視するとき 01 データを使って別の計算をする:算出プロパティ マスタッシュタグの中に「JavaScriptの式」を書くのではなく「何を表示するのか」を書くほうがわかりやすくなります。それを「名前」で表したものが「computedオプシ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その5

Chapter7 Google Charts と連動させてみよう 02 Google Chartsと連動させる <div id="chart_div" style="height: 500px;"></div> <div id="app"> <ul> <li v-for="(item,c) in dataArray" v-if="c>0">{{ item[0] }}:{{ item[1] }} <button v-on:click="addOne(c)">1票足す</button> </li> </ul> </div> v-if="c>0"はデータを2つ目以降からの表示にするため(['種類',…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その4

Chapter6 条件とくり返しを使うとき 01 条件によって表示する:v-if 条件で表示するときは、v-if <div id="app"> <label><input type="checkbox" v-model="myVisible">表示する</label> <p v-if="myVisible">チェックボックスはON</p> <hr> <label><input type="checkbox" v-model="myVisible">表示する</label> </hr></div>

【学習メモ】動かして学ぶ!Vue.js 開発入門 その3

Chapter5 ユーザーの操作をつなぐとき 01 イベントとつなぐ:v-on イベントとメソッドをつなぐときは、v-on メソッドの作り方 メソッド(命令文)は、Vue インスタンスに methods オプションを追加して作ります。 methods オプションでは、「どんな命令があ…

【学習メモ】動かして学ぶ!Vue.js 開発入門 その2

Chapter3 属性の指定をするとき 01 要素の属性をデータで指定する:v-bind 用意したデータで HTML の属性を指定したいときは、v-bindを使います。 <div id="app"> <figure><img src="face1.png" /></figure> <figure><img v-bind:src="fileName" /></figure> <p><a href="https://yuheijotaki.com">リンクを直接指定</a></p> <p><a v-bind:href="myURL">リ…</a></p></div>

【学習メモ】動かして学ぶ!Vue.js 開発入門 その1

Vue.js の初心者向けの本が新しく出ていたので読みながらコード書きながら気になった箇所、覚えたい箇所をメモしていきます 動かして学ぶ!Vue.js開発入門 (NEXT ONE)作者: 森巧尚出版社/メーカー: 翔泳社発売日: 2019/01/15メディア: 単行本(ソフトカバー…

【学習メモ】基礎から学ぶ Vue.js その5

第 7 章 より大規模なアプリケーション開発 Vue CLI の導入 Vue CLI をグローバルにインストール npm install -g vue-cli バージョン確認 vue --version プロジェクトの作成 vue init webpack my-app # vue init [テンプレート名] [プロジェクト名] プロジェ…

【学習メモ】基礎から学ぶ Vue.js その4

第 6 章 トランジションとアニメーション 基本的なトランジションの使い方 <div id="app"> <button v-on:click="show=!show">切り替え</button> <transition><div v-show="show">トランジションする要素</div></transition> </div> .v-enter-active, .v-leave-active { transition: opacity 1s; } .v-enter, .v-leave-to { opacity: 0; } var app = new Vue({ el: "#app", d…

【学習メモ】基礎から学ぶ Vue.js その3

第 5 章 コンポーネントで UI 部品を作る コンポーネントの登録 <div id="app"><my-component></my-component></div> Vue.component("my-component", { template: `<p>MyComponent</p>` }); var app = new Vue({ el: "#app" }); ローカルに登録 そのコンポーネントのスコープ内だけでの使用を制限する場合 var MyCompo…

【学習メモ】基礎から学ぶ Vue.js その2

第 3 章 イベントとフォーム入力の受け取り 第 4 章 データの監視と加工 インラインメソッド <div id="app"><button v-on:click="handleClick">click</button></div> var app = new Vue({ el: "#app", methods: { handleClick: function() { alert("clicked"); } } }); フォーム入力 双方向データバインディング type="text" <div id="app"></div>…

【学習メモ】基礎から学ぶ Vue.js その1

基礎から学ぶ Vue.js という本を読みながら Vue.js を触り始めたのでメモしておきます。 すべては長そうなのでポイントだけにしようと思いますが、とりあえず 2 章までで使いそうなものは改変して書こうと思います。 基礎から学ぶ Vue.js作者: mio出版社/メ…

【学習メモ】[Udemy] JavaScriptエンジニアのためのES6完全ガイド 勉強メモ その2

概要 【世界で 2 万人が受講】JavaScript エンジニアのための ES6 完全ガイド | Udemy を学習したのでメモしておきます。 その 1の続きです。 構文編 constとlet const - JavaScript | MDN let - JavaScript | MDN 変更される可能性がない場合(定数)はcons…

【学習メモ】[Udemy] JavaScriptエンジニアのためのES6完全ガイド 勉強メモ その1

概要 【世界で 2 万人が受講】JavaScript エンジニアのための ES6 完全ガイド | Udemy を学習したのでメモしておきます。 動画内で図解を用いたくわしい解説や小テストがフェーズごとにあります。 こちらに記載しているコードは自分なりに発展させたものにな…