Home
Vue.js3日目。
YouTubeを見ながら基本構文を書いていった。
繰り返しているため理解度は高まったかと思う。
YouTubeをチェック
よしぴー氏の「超Vue.js 2 入門 完全パック – Vueでアプリを作りたい方必見！ (Vue Router, Vuex含む)」を見ながらコードを書いていった。
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/
真偽
|
1 2 3 4 5 |
{{ ok ? 'YES' : "NO" }} data:{ ok: true } |
okが
trueだったら「YES」と表示
falseだったら「NO」と表示
メソッドを使って文字列を返す
|
1 2 3 4 5 6 7 |
{{ sayHi() }} methods:{ sayHi: function(){ return this.message; } } |
メソッドからdataのmessageを返す時は「this.」をつけることがお約束
インスタンス内で自分のインスタンのプロパティにアクセスする時は必ずつける
v-text
|
1 2 3 4 5 6 7 8 |
<a v-text="message"></a> data: { message : "Hello World" } //実行結果 <a>Hello World</a> |
v-once
一度だけ描画。その後は変えない
|
1 2 |
// 例 <p v-once>{{ message }}</p> |
v-html
※取扱い注意
XSS（クロスサイトスクリプティング）という脆弱性あり
ユーザーが投稿できるデータなどはここでは使わない
回避方法：サニタイズする
▼Vueのv-htmlでXSSを回避する
https://qiita.com/tnemotox/items/b4b8f0f627e23dd62447
|
1 2 3 4 5 6 7 8 |
<div v-html="html"></div> data:{ html: "<h1>h1です</h1>" } // 実行結果 h1です |
v-bind
<要素 v-bind:属性名=値または式>
|
1 2 3 4 5 6 |
// グーグルリンクをつくる <a v-bind:href="url">Google</a> data:{ url: "https://google.com" } |
省略できる
|
1 2 3 4 5 |
<a v-bind:href="url">Google</a> ↓ 省略 ↓ <a :href="url">Google</a> |
※省略するしないは自由だが、書き方を統一させる
属性も動的にできる
[]で囲む
|
1 2 3 4 5 |
<a :[gege]="url">Google</a> data:{ url: "https://google.com", gege:"href" } |
※注意：キー名を大文字にしない
ブラウザが大文字を小文字にするため
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
オブジェクトで書くことができる
|
1 2 3 4 5 |
<a :href="urlTwiiter" :id="number">Twitter</a> ↓ オブジェクトでまとめる ↓ <a v-bind="{href:urlTwitter, id:number}">Twitter</a> |
データにオブジェクトを書くこともできる
|
1 2 3 4 5 6 7 8 |
<a v-bind="titterObjects">Twitter</a> data:{ titterObjects: { href:"https://twitter.com, id:number", id:31 } } |
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 2 3 4 5 |
<button v-on:click="countUp(3)">カウントアップ</button> methods:{ countUp: function(times){ this.number +=1 * times } |
|
1 2 3 4 5 6 7 |
<p v-on:mousemove="changeMousePosition(10, $event)">マウスをのせてください</p> methods:{ changeMousePosition :function(dividNumber,event){ this.x = event.clientX /dividNumber; this.y = event.clientY /dividNumber; } } |
イベントオブジェクトで引数を扱う
ダラーイベント
１．html関数名のとこに(10, $event)→÷１０
２．jsのfunction() （）の引数エリア内に式
３．オブジェクトに計算式
イベント修飾子
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.
まとめ
引き続き動画の続きを見ながらコードを書いていって基本構文を学んでいこう。
よしぴーさんの動画が分かりやすくのでUdemyの講座も見てみようかと検討中。
