Vue.js勉強会資料作成中(その2)
Vue.js勉強会資料作成中(その1) - カメ飼ってる新米エンジニアの覚書き
のその2です。
では、はじめてみましょう!
Vue.jsの始め方(初心者用)
htmlを作成し、CDN読み込んじゃう
<!-- Vue.jsの読み込み --> <script src="https://unpkg.com/vue"></script>
jsFiddleってやつ
https://jsfiddle.net/chrisvfritz/50wL7mdz/
今回はこれ使います。
Fork
を押して、自由に書き換えましょう
Run
で実行されます。保存はUpdate
。
保存しなくてもRun
できます。
URL
を覚えておけば、いつでもアクセスできます。
他にも手段があるよ
3.vue-cliってのを使う(nodeを使うよ)
4.npmでインストール(nodeを使うよ)
[参考] https://jp.vuejs.org/v2/guide/installation.html
(ここでデザイナーさんにCDNって何?って言われた)
messageを変更してみよう
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/
v-if
で出し分け
<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-
ってなに
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も勝手に変わる
つまり、状態を管理しやすい !
v-for
でリストを表示する
<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つずつ移し替えている
TODOリストを作ってみましょう!
TODOリストのTODOリスト
- やることを入力する
- やることリストを見る
- やることが終わったら消す
TODOリストのTODOリスト
- やることを入力する
- やることリストを見る–>すでにできている!
- やることが終わったら消す [以後の参考・引用] http://notsleeeping.com/archives/131
やることを入力できるようにしよう
<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 in todos"> {{todo.text}}<!-- この下から変更! --> <input type="submit" value="削除" v-on:click="remove(todo.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/10/
何が起こっている?
コンポーネント化してみましょう!
Sketchでいうシンボルに近い
<div id="app"> <!-- 中略 --> <ol> <list-component v-for="todo in todos" v-bind:key="todo" v-bind:text="todo.text" v-bind:text="todo.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/12/
削除が動かない!
メソッドも渡してあげよう! [参考]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/15/