Home
Vue.Jsの勉強初日。
数日前から初めてはいたけどガッツリ勉強に入ったのは今日から。
バージョン３から勉強しようと思ったけど、まだまだバージョン２が主流だと思い。
バージョン２から始めることとした。
やったこと
基本となる構文を勉強した。
具体的には…
１．たにぐち まこと氏のYouTube「vue.js入門」を見ながらコードを書いた。
２．Vue.js公式サイト（version2）の「はじめに」を見ながらコードを書いた。
つまったこと
コンポーネントのprops
■例
props: [‘todo’]
そもそもの意味？
なんで配列の書き方なのか？
ってとこでつまったが、開発の時はスルーぽい非推奨な書き方のようなので解決とした。
総括
書いてある意味はググったりして理解できたと思う。
ただし自分で書くことは出来ない。今のとこはこれで良い。
Vue.jsに触れることが大事と思うことと、詰まって止まらない＆挫折しないため。
考えて書き続けることだね。
また、今日書いたコード以外にも基本構文はあるかと思うので、そこも調べて網羅しないといけないね。
メモ
用語
el
エレメントの略
制御するIDを指定
data
Vueアプリケーション内で利用できるデータ（変数）を表す
リアクティブ
「その値が監視され、変更が検知される状態のこと」を指します。
#appってDOM要素（値）を制御できる
コンポーネント
日本語にすると「部品」
再利用可能なVueインスタンス要素
WPテンプレのheader.php,footer.php,sidebar.phpみたいなもの「コンポーネント指向」
独自の HTML 要素を定義できる
Props
Propsを利用することで親コンポーネントから子コンポーネントに文字列、数値、配列やオブジェクトなどの値を渡す時に使う。
コンポーネント(Vue.component)内で使うもの。
参考リンク：
https://public-constructor.com/vue-props-best-practice/
https://www.i-ryo.com/entry/2019/08/22/062356
https://jp.vuejs.org/v2/guide/components-props.html
コンポーネントの親子関係
親＝コンポーネントを利用する側
子＝コンポーネントを利用される側
キャメルケース
アルファベットで複合語やフレーズを表記する際、各単語や要素語の先頭の文字を大文字で表記する手法のことである。
例）dataTable
ケバブケース
文字と文字の区切りを-で表現するやり方。「チェインケース」とも言う。
例）data-table
基本的に下記の方針でOK
https://qiita.com/kozzzz/items/5f36a2a830c187a75a51
https://qiita.com/ngron/items/ab2a17ae483c95a2f15e
コンポーネントは「パスカルケース」
JavaScriptでは「キャメルケース」
HTMLでは「ケバブケース」
v2とv3の違いがある
※CDNと基本的な書き方
V2
var app = new Vue({
el: ‘#app’,
data: {
message: ‘Hello Vue!’
}
})
V3:関数＆コールバックで定義
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount(‘#counter’)
忘れがちなタイプミス
■１
var app = new Vue({
「Vue」頭文字を大文字にしないと動かない
■２
data :{
message : “宣言的レンダリング”
}
「data」のあとの「：」セミコロンを忘れがち
■３
文字列の時にクォーテーション忘れがち
ディレクティブ
https://012-jp.vuejs.org/api/directives.html#v-text
Vue.js によって提供された特別な属性を示すために v- 接頭辞がついています。
v-bind 属性
データバインディング
属性にデータを割り当てる
v-if
v-else-if
v-else
v-show
条件分岐
v-for
繰り返し
v-on
要素にビエントリスナを割り当てる
v-model
双方向バインディング
v-cloak
瞬間マスタッシュ記法が表示されるのを回避する
JavaScriptリファレンス
new
「インスタンスを作成する時」にnew演算子は使われる
Date().toLocaleString()
結果 2021/4/14 23:38:18
//「message」の文言を、分割、逆に並べて、くっつける
methods:{
reverseMessage: function(){
//「message」の文言を、分割、逆に並べて、くっつける
this.message = this.message.split(”).reverse().join(”)
}
}
調査すること
@click
ディレクティブ v-on
※イベントとmethodsについて
※thisが示すもの
業務でVue.jsを使うケースを想定
一般的な？？ VueCLIを用いた単一コンポーネントファイルによる開発
Props
https://jp.vuejs.org/v2/guide/components-props.html
ざっくり分かったような
スコープするため？
今日書いたコード
See the Pen
gOgzzKa by kosaeru (@kosaeru)
on CodePen.
明日やること
まとめ
自分でコードを書くことはできないけど順調だと思う。初日だからね。
あと、フロントエンジニアの方が選択肢が多くて沼のようで大変かもって思った。
バックエンドの勉強、PHPとRubyも触れておこうかな（汗）
