Vue.jsの勉強日記|3日目:YouTubeで基本構文を書く

Vue.js

Vue.js3日目。
YouTubeを見ながら基本構文を書いていった。
繰り返しているため理解度は高まったかと思う。

YouTubeをチェック

よしぴー氏の「超Vue.js 2 入門 完全パック – Vueでアプリを作りたい方必見! (Vue Router, Vuex含む)」を見ながらコードを書いていった。

アバター
ME

1時間30分以上ある動画の半分ほど進めた。
この動画は実践的なアドバイスがあって非常に良いと思った。

methods、computed、fiterの違い

methods メソッドとは?

アプリケーションで利用する関数を列挙する場所

その他のアプローチ方法
・computed → 算出プロパティ(戻り値あり)
・filter(戻り値あり)

違い
https://www.wakuwakubank.com/posts/504-vue-sfc-script/
https://dev83.com/vue-computed-methods/
ブラウザでキャッシュするかしないか
methodsは
処理が呼び出されるとつねに処理を実行する。
・常に再描画されると実行します。

computedは

参照するプロパティが変更した時にのみ再計算され、変更のない場合は、以前算出した値を即座に返す。
・依存するものが更新されたときにだけ、処理を再実行します。
・それ以外は、キャッシュが利用されます。

filterは

https://se-tomo.com/2018/10/26/vue-js%E3%81%AE%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF%E3%81%A8%E3%81%AF/
・テキストを変換する処理を担っている
・文字を丸めたり、カンマを入れる処理に使用
・「算術プロパティ」ではデータの加工を行って返す事を目的としていましたが、「フィルタ」ではテキストベースの加工

methodsキャッシュしない 主にユーザーのアクション処理に利用
computed キャッシュする  主に画面表示に項目に利用(関連するデータで再計算したい場合やデータの見せ方を変更した場合など)
filter  キャッシュしない アプリケーション共通の処理で利用(部品利用)

☆参考 ショッピングカート
https://jsfiddle.net/hasa83/9gtjfaw0/

真偽

okが
trueだったら「YES」と表示
falseだったら「NO」と表示

メソッドを使って文字列を返す

メソッドからdataのmessageを返す時は「this.」をつけることがお約束
インスタンス内で自分のインスタンのプロパティにアクセスする時は必ずつける

v-text

v-once

一度だけ描画。その後は変えない

v-html

※取扱い注意
XSS(クロスサイトスクリプティング)という脆弱性あり
ユーザーが投稿できるデータなどはここでは使わない

回避方法:サニタイズする
▼Vueのv-htmlでXSSを回避する
https://qiita.com/tnemotox/items/b4b8f0f627e23dd62447

v-bind

<要素 v-bind:属性名=値または式>

省略できる

※省略するしないは自由だが、書き方を統一させる

属性も動的にできる

[]で囲む

※注意:キー名を大文字にしない
ブラウザが大文字を小文字にするため

NG : [someAttr] →大文字あり
OK : [someattr] →大文字なし
https://jp.vuejs.org/v2/guide/syntax.html#%E5%8B%95%E7%9A%84%E5%BC%95%E6%95%B0%E3%81%AE%E5%BC%8F%E3%81%AE%E5%88%B6%E7%B4%84

オブジェクトで書くことができる

データにオブジェクトを書くこともできる

v-on

イベントが起こった時の処理
v-on:イベント名=”ハンドラ名”

▼イベントの種類
https://blog.capilano-fw.com/?p=2787

HTMLの方にJSを書くこともできるが↓がスマートなのでベターのようだ
メソッドイベントハンドラ
methods:{イベントハンドラ名: function(){処理}}

省略できる
@click

イベントオブジェクトの取得方法

イベントオブジェクトとは?
→イベントの情報が入ったオブジェクト
https://qiita.com/yuta-38/items/d8baa4db6a9c1688ff89

function(event)
→他の文言でも動くが「event」の方がベターのようだ

引数

イベントオブジェクトで引数を扱う
ダラーイベント
1.html関数名のとこに(10, $event)→÷10
2.jsのfunction() ()の引数エリア内に式
3.オブジェクトに計算式

イベント修飾子

https://fujiya228.com/vue-v-on-modifier/

    .stop ★よく使われる
    .prevent ★よく使われる
    .capture
    .self
    .once
    .passive

https://techblog.roxx.co.jp/entry/2019/02/08/122914

stop
イベントの伝搬停止 event.stopPropagation()を呼ぶ
バブリング(伝搬)を止める

prevent
プリベント = さまたげる
デフォルトの処理停止 event.preventDefault()を呼ぶ

キー修飾子

キーボードの動きに対して使える修飾子

    .enter
    .tab
    .delete (“Delete” と “Backspace” キー両方をキャプチャします)
    .esc
    .space
    .up
    .down
    .left
    .right

http://www.tt-blog.org/vuejs/vuejs-keyup/

お勉強用に書いたコード

See the Pen
vue20210416
by kosaeru (@kosaeru)
on CodePen.

まとめ

アバター
ME

引き続き動画の続きを見ながらコードを書いていって基本構文を学んでいこう。
よしぴーさんの動画が分かりやすくのでUdemyの講座も見てみようかと検討中。

RELATED POSTS