あっという間に１週間が経ちました、、、😊😂
どうも２度目ましてYUKIです👋🐵
この１週間はとにかくめまぐるしい日々でした〜😵🌀
そして最近の飲みスポットは高円寺！！！
和食と海鮮が好きなのでそこら辺を順番にせめて行ってます🍣🍶✨
友人が高円寺は東京のスラム街とよく言っていましたが🤥🤥
そんな空気は感じない、、、ような、、🤔🙄？？
とにかく美味しいご飯とお酒があるとっても素敵な場所なので😍
これからもお世話になる予定です😌♪♪
さて、今回はフレームワークであるVue.jsを用いて
ちょーちょー簡単なTodoアプリを作成して、理解を深めて行こうと思います☝️💕
Todoアプリを作成する
完成形はこんな感じです↓↓
まずは空の”index.html”と”main.js”を作成🗒
それぞれざっくりと、
“index.html”は画面(ブラウザ)に表示されるもの🖥
“main.js”はその画面に動作をつけるもの🚲
という感じ、、、、
ちなみに今回はデザインのことは想定しないので、
第一回”index.html”
第二回”main.js”
第三回 まとめ
という形で、全3回で書いていこうと思います🤤🤤
それでは”index.html”の完成したソースコードを見ながら
役割を考えていきます☺💭
index.html ソースコード
①この文書がhtml５で作成されることを宣言するもの
記述したことによってこの文書で利用するものは
これらのルールに従ってソースを記述していく
②要素内で使用されている言語を表している
文章を表現する方法として必要な部分（ja:日本語）
③文書のタイトルのヘッダ情報
④文字化け防止、必須ではないが指定したほうが尚よい
⑤ヘッダに表示される、タイトルとなるところ
⑥“body”の中は、実際にブラウザに表示される本体となるところ
⑦“div”は一つのかたまり、グループと考えられる
”id”は固有の名前をつけて判断するもの
⑧見出し
⑨入力されたものが箇条書きになるようにする
⑩“todos”の中身の要素を”todo”の中に入れ込ませる
⑪“prevent”を書くことでページが、リロードされなくなる
⑫入力する部分”text”とその入力されたものを解釈し変換する”v-model”
⑬送信ボタン
⑭外部のvue.jsをロードする
⑮外部のmain.jsをロードする
おわりに
めちゃくちゃ基礎をざっくりという感じになりましたが、意外とノリで使っていた
“prevent”とか意味を知れて良かったです😎✨✨
あと、ここでも出てくる、”v-for”や”v-model”などといった”v-“から始まるディレクティブ*は
今後重要となってくるみたい、、、、、🤭🤭
*ディレクティブ..ソースコードに記述される、それらを解釈変換するソフトウェアへの指示や
指定などを与えるもの
次回は”main.js”をみていきますのでお楽しみに😊💓
また来週〜👋✨
