vue.jsのindexについて
vue.jsでこの書き方できるんだと思ったら、そうでもなかったのでメモ。
<li v-for="todo in todos"> {{todo.text}} <input type="submit" value="削除" v-on:click="remove(todo.index)" /> </li>
これで動いた気がしたから、いけるんだ！って思ったら、挙動がおかしかった。。
todo.indexのリストの値を削除するっていうclickのメソッドなんだけど、 一番最後のliを削除しようとすると、一番上のliが消える・・
んん？
値がうまく取れていないみたいでした。
<li v-for="todo, index in todos"> {{todo.text}} <input type="submit" value="削除" v-on:click="remove(index)" /> </li>
やっぱり、横着せずにちゃんと書かないとね・・
Vue.js勉強会資料作成中(その1)
不肖ながら会社でVue.jsの勉強会を開くことになったので、 作成途中の資料をそれとなく載せておきます。(第1回前編)
Vue.js勉強会 vol.1
Hello Worldから始めるVue.js
対象者
Vue.jsというかJavaScript初心者。 デザイナーも含めるので、基礎の基礎からやってみます。
JavaScriptってなに
PHP と JavaScript の ちがい
| 項目 | JavaScript | PHP |
|---|---|---|
| 実行環境 | ブラウザで動くので、ファイルを作成するだけでOK。 | サーバーが必要。ファイルだけでは動かない。 |
| 実行タイミング | 必ずイベントを指定する。ページロード時・クリック時、など | ページ表示のタイミングのみ。 |
| HTMLの変更部分 | ページ全部を書き換えなくてもいい。変えたい部分を変更するだけでOK。(非同期) | 1箇所を書き換えるだけでも、１ページ丸々再度描画しないといけない。(同期) |
ページ全部を変えたい時はPHP。 ちょっとだけ変えたい時はJavaScript。
何が違うんですか？
- JavaScript
- jQuery
- Vue.js
ライブラリとフレームワークのちがい
jQueryっていうライブラリ
よく使うものを集めたものがライブラリ。 もちろんjQuery以外もたくさんある。
jQureyは、JavaScriptをより扱いやすく、簡単に書けるようにしたもの。
そのライブラリの決まった記述で呼び出して扱う。
[参考コード] https://jsfiddle.net/pocchi/udhacmdo/8/
簡単なhoverの処理ですが、 jQueryで4行、JavaScriptで8行になってます。
[引用] https://webkikaku.co.jp/blog/webdesign/jquery_start/
[参考] http://semooh.jp/jquery/
Vue.jsというかフレームワーク
すでに決まっている設計に基づき、開発者は基本的には、そのひな形に沿ってコードを書いて行く。
[参考コード] https://jsfiddle.net/chrisvfritz/50wL7mdz/
ライブラリが部品なら、フレームワークはひな形 なので、一緒に使うことも可能。
[参考・引用] http://itpro.nikkeibp.co.jp/article/lecture/20070205/260697/?rt=nocnt http://pikurusux.hatenablog.com/entry/2015/05/28/123326
Vue.jsと他のJSフレームワーク
他にももちろんいっぱいJSフレームワークはあります。
などなどなど・・・いっぱいあるので、 開発に合わせて選択すること、 流行り廃れをなんとなく知っておくが必要。
Vue.jsの良きところ
- 学習コストが比較的低め
- 小中規模のシステムに向いている
- 他フレームワークの良いところをあわせもち、現在も吸収していっている
- 日本語リファレンスが充実していてわかりやすい。
なので、JSフレームワークこと初めには良いんじゃないでしょうか。
jQuery日本語リファレンスのあの『ヌー』をJavaScriptで書き換えてみた
みんながお世話になっているjQueryの日本語リファレンス。これの「ヌー」。
//jQuery 4行
$('.semooh a').hover(
function(){ $(this).text('ヌ？'); },
function(){ $(this).text('ヌー'); }
);
これを、JavaScriptに書き換えてみた。 一応、想定しているhtmlはこんな感じ。
<div class="semooh"> <a>ヌー</a> </div>
//JavaScript 8行
var semooh = document.getElementsByClassName("semooh");
var aElm = semooh[0].getElementsByTagName('a')[0];
aElm.addEventListener( "mouseover", function(){
this.innerHTML = "ヌ？";
});
aElm.addEventListener( "mouseout", function(){
this.innerHTML = "ヌー";
});
こんな感じ。 もっといいやり方があれば教えてください。
firefoxで:beforeが効かない(css)
chromeだと:beforeの擬似要素が表示されるのに、firefoxだと表示されない現象に悩まされたのでメモ。
原因はinputに:beforeが書いてあったせい。
<input type="radio icon" />ラジオボタン
.icon::before { content: "#"; }
ラジオボタンなんかで、装飾をするのにiconフォントなんか使いがちだけど、
<label> <input type="radio" /> <i class="icon icon-radio"></i> <p>ラジオボタン</p> </label>
みたいに、iconフォントでは一般的な記述(?大体サンプルで載ってるやつ)で擬似要素を分けるか、<label>か<p>に擬似要素のクラスをつけてしまうのが無難そう。
他にも擬似要素に対応していないタグがあるって調べたら出てきました。
先人で詳しく調べられている方々を参考に
imgとかinputなどの置換要素にはbefore, afterは使えないよ - しるてく
chromeで表示されてるのにってとこでソース比較したり何やりして結構時間使ったので、戒めにこちらに記載して残します。
express4系+mongoDBチュートリアルしてみた
やってみたのはこちらの記事。
とりあえずmongoDBの概要と、expressでのDB連携をやってみたかったので、restfulなかんじで。
記事にはinstallの工程なかったけど、
これも使ってたよー。
