Vue.jsというかJavaScript初心者。
デザイナーも含めるので、基礎の基礎からやってみます。
項目 |
JavaScript |
PHP |
実行環境 |
ブラウザで動くので、ファイルを作成するだけでOK。 |
サーバーが必要。ファイルだけでは動かない。 |
実行
タイミング |
必ずイベントを指定する。ページロード時・クリック時、などページ表示のタイミングのみ。 |
ページ表示のタイミングのみ。 |
HTMLの
変更部分 |
ページ全部を書き換えなくてもいい。変えたい部分を変更するだけでOK(非同期) |
1箇所を書き換えるだけでも、1ページ丸々再度描画しないといけない。(同期) |
ページ全部を変えたい時はPHP。
ちょっとだけ変えたい時はJavaScript。
[ 参考 ]
http://paiza.hatenablog.com/entry/2015/03/11/Backbone_JS%E3%81%8B%E3%82%89Angular2%E3%81%BE%E3%81%A7%E3%80%81%E5%85%A89%E5%A4%A7JavaScript%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E6%9B%B8%E3%81%8D%E6%AF%94%E3%81%B9
よく使うものを集めたものがライブラリ。パーツ集です。
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/
すでに決まっている設計に基づき、開発者は基本的には、そのひな形に沿ってコードを書いて行く。
[参考コード] 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
他にももちろんいっぱいJSフレームワークはあります。
などなどなど・・・いっぱいあるので、
開発に合わせて選択すること、
流行り廃れをなんとなく知っておくが必要。
- 学習コストが比較的低めで、自分の習熟度に合わせて取り入れられる
- 小中規模のシステムに向いている
- 他フレームワークの良いところをあわせもっている
- 日本語リファレンスが充実していてわかりやすい。
・・・なので、JSフレームワークこと初めには良いんじゃないでしょうか。
https://jsfiddle.net/chrisvfritz/50wL7mdz/
今回はこれを使います。
Fork
を押して、自由に書き換えましょう
Run
で実行されます。保存はUpdate
。
保存しなくてもRun
できます。
URL
を覚えておけば、いつでもアクセスできます。
htmlの
<!-- Vue.jsの読み込み -->
<script src="https://unpkg.com/vue"></script>
で、vue.jsを読み込んでいます。
new Vue({
el: '#app',
data: {
message: 'ここを変更してみて'
}
})
変更後、Run
をクリック!
[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/1/
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<p v-html="message">メッセージ</p>
</div>
v-html
という属性をつければはじめに書いておいて、
置き換えることもできる。
{{生の文字列}}
だが、v-html
はHTMLとして扱える。
[参考]https://jp.vuejs.org/v2/guide/syntax.html#生の-HTML
[こうなってるはず] https://jsfiddle.net/pocchi/rtec7eyh/2/
<div id="app">
<p v-if="message">メッセージ</p>
</div>
new Vue({
el: '#app',
data: {
message: true
}
})
[参考]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ
https://jp.vuejs.org/v2/guide/#条件分岐とループ
[こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/3/
message: false
に変更してみましょう
[変更後はこれ] https://jsfiddle.net/pocchi/rtec7eyh/4/
v- から始まる特別な属性をディレクティブと言います。
単一の JavaScript 式を期待します。
ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を ※DOM に適用すること。
さっきの例だと、
true
で挿入、false
で削除できるってこと
※DOM(Document Object Model)とは、xmlやhtmlの各要素、たとえば<p>
とか<img>
とかそういった類の要素にアクセスする仕組みのことです。このDOMを操作することによって、要素の値をダイレクトに操作できます。
[参考・引用]https://jp.vuejs.org/v2/guide/syntax.html#ディレクティブ
http://piyo-js.com/05/dom.html
Vue.js側で値を変化させれば、
それにつられてHTMLも勝手に変わる
** つまり、状態を管理しやすい ! **
<div id="app">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'JavaScriptを勉強する' },
{ text: 'Vueを勉強する' },
{ text: '何かすごいものを作る' }
]
}
})
[こうなっているはず] https://jsfiddle.net/pocchi/rtec7eyh/5/
todos
の中身をtodo
の中に上から1つずつ移し替えている
- やることを入力する
- やることリストを見る-->すでにできている!
- やることが終わったら消す
<div id="app"><!-- この下から追記 -->
<input v-model="inputText" type="text" />
{{inputText}}<!-- この上まで追記 -->
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {/* この下から追記 */
inputText: null,
todos: [/* この上まで追記 */
{ text: 'JavaScriptを勉強する' },
{ text: 'Vueを勉強する' },
{ text: '何かすごいものを作る' }
//以下省略
[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/1/
フォームに入力すると値が取得できることは確認できた!
次は保存ボタンをつけたい!
<div id="app">
<input v-model="inputText" type="text" />
<input type="submit" value="保存" v-on:click="save"/>
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
/* --inputTextとtodosは中略-- */
},/* この下から追記 */
methods:{
save: function(){
this.todos.push({text: this.inputText});
}
}
})/* この上まで追記 */
[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/6/
後は削除するにはどうしたらいいのか!
<div id="app">
<input v-model="inputText" type="text" />
<input type="submit" value="保存" v-on:click="save"/>
<ol>
<li v-for="todo, index in todos">
{{todo.text}}<!-- この下から変更! -->
<input type="submit"
value="削除"
v-on:click="remove(index)" />
</li><!-- この上まで変更! -->
</ol>
</div>
methods:{
save: function(){
this.todos.push({text: this.inputText});
},/* <-コンマをつけて、この下から追記 */
remove: function(index){
this.todos.splice(index, 1);
} /* ここまで追記 */
}
[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/16/
1つの部品を再利用することができる。
<div id="app">
<!-- 中略 -->
<ol>
<list-component
v-for="todo, index in todos"
v-bind:key="todo"
v-bind:text="todo.text"
v-bind:text="index"
></list-component>
</ol>
</div>
new Vue({の上に追加
Vue.component('list-component', {
template: '<li>{{text}}
<input
type="submit"
value="削除"
v-on:click="remove(index)" />
</li>',
props:['text','index']
});
[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/17/
メソッドも渡してあげよう!
[参考]https://jp.vuejs.org/v2/guide/components.html#カスタムイベントとの-v-on-の使用
<list-component
v-for="todo in todos"
v-bind:key="todo"
v-bind:text="todo.text"
v-bind:index="todo.index"
v-on:remove="remove(todo.index)"
></list-component>
Vue.component('list-component', {
template: `<li>{{text}}
<input type="submit"
value="削除"
v-on:click="$emit('remove')"/></li>`,
props:['text','index']
});
template: `` で囲まれていることに注意!
[こうなっているはず]https://jsfiddle.net/pocchi/3LnLuc4p/18/
以上で、終わりです。
https://jp.vuejs.org/