jtk

学習メモ

【学習メモ】動かして学ぶ!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 を学習したのでメモしておきます。 動画内で図解を用いたくわしい解説や小テストがフェーズごとにあります。 こちらに記載しているコードは自分なりに発展させたものにな…