誰向けですか？
・Vue.js超初心者
・Vue.jsの基本構文は覚えたけど次は何すればいいの？
・リロードしたら消えちゃう！！
↑という方向けです。自分自身の学習のためにも記事を書かせていただきます！記述で間違いなどがありましたら教えてくださるとありがたいです🙇♂️
このパートの完成イメージ
とりあえずinputに書いてbuttonを押すと配列(items)に追加できるようにしよう！
次回以降で順にCSSで見た目、watchやmountedを使用して保存できるようにします。
このパートですること
1.HTMLを書いてVueで操作できるようにする
2.Vueで配列の作成やinputをバインディングする
3.関数を作成して追加、削除できるようにする
1.HTMLの記述
index.html
<divid="app"><div><!-- v-modelはこのinputをVueとバインディングさせる役割 --><inputv-model="message"><!-- @click=""の中はVueで記述するメソッド(＠はv-on:の省略です) --><button@click="add_item()">追加</button><button@click="all_del_item">全削除</button><!-- v-for( 配列, index(配列内の要素に振られた添字)を(item,idx)と表している ) --><ol><liv-for="(item,idx) in items">
{{ item }} <button@click="del_item( idx )">削除 </button></li></ol></div></div>Vue.jsの記述
main.js
const myApp = new Vue({
// id="app"をVueでマウントする
el: '#app',
//何の処理もない配列やオブジェクトなどをおく場所(もしdataに処理を加えたい場合はcomputedを使う)
data: {
//配列の初期状態,良い朝の流れである
items: ['起きる', '洗顔', '歯磨き',],
//inputの初期状態(既に何か書かれていたら変なので空にしておく)
message: ''
},
これではまだmessageの追加や削除ができないので、data{},の続きにmethodsを記述する。
// Vueアプリケーション内で使用する関数を定義する場所
methods: {
// itemsに追加するメソッド、{ itemsにmessageをpush(追加)する }
add_item: function () { this.items.push( this.message ) },
// 削除ボタンを押した時のメソッド、{ items(自身)を1つsplice(削除)する }
del_item: function ( _idx ) { this.items.splice( _idx, 1 ) },
// itemsを全て削除するメソッド、spliceの数を大きい数字にすれば全て消えるでしょう
all_del_item: function ( _idx ) { this.items.splice( _idx, 10000 ) }
},
#まとめ
実際に記述してinputに書いた文字が追加・削除できたでしょうか？
次のパートではこの寂しい見た目をCSSで装飾しましょう！(SCSSかBootstrapで予定しています)
この記事を読んでくださったあなたの成長を応援させていただきます！！！
