今回は輪読担当ではありませんが、ひとまずメモをまとめたのでアップします。データの登録と更新(初心者歓迎!)のための読書メモとなります。テンプレートにおける条件分岐v-if``v-showディレクディブは付与した要素の描画・表示に条件を適用する。要素を繰り返して描画するみたまんま、こんな感じで繰り返し描画できる。v-bind:key="item.id">要素にユニークなキー属性を追加するのが望ましい。キーが無いと要素全部の更新が入る。SQLのidを入れる位に考えると良い。絡めて、比較演算子で条件付けて、特定条件での表示などもできる。後から追加されたプロパティの更新リストに要素を追加push,unshiftを使うthis.list.push(要素)以下、サンプル、ボタン押下でフォーム内の名前のモンスターがリストに追加される。}これなら大丈夫Vue.setメソッドを使用して明示的に更新できる。})プロパティを追加するthis.$setメソッドは持ってないプロパティをリアクティブデータとして追加するために使用できる。hpが0になると消える処理になる。50未満で表示される。}})出力結果<span>h</span><span>o</span><span>g</span><span>e</span>これを利用するとテキストアニメーションが作れるらしい外部からデータを取得する外部データはJSONやWebAPIで取得する必要がある。JSONを外部データから取り込んでみる。javascriptライブラリのaxiosのCDNを読み込む1行を追加する。空配列[]が一瞬だが、適用されている。ここが表示されるまでに、ローディングアニメーション処理とか入るとカッコよくなる。$refsDOMにアクセスするには、インスタンスプロパティ$el,$refsを使用する。<canvas>要素などにアクセスしたい時などに使用する。した状態で、非表示・再表示すると、カウントが0にもどってしまう。これは、DOMに対して加算をしたのみなので、DOMが消えると、値も消えてしまうため。指定なら仮想DOMなのでこうはならない。}})こんな風にmessageでバインドできる。自分がコントロールできない外部やユーザー要因のデータ部分に使うと脆弱性ありありなので使い所には注意が必要。}})こんな風にhtmlがそのまま出力する事ができる。--><span>hello<strong>Vue.js!</strong></span>v-cloakインスタンスの準備ができると自動的に取り除かれる。none}以下のやつで画面読み込み時に#app要素を隠せる。インスタンス生成でv-cloak属性が外れてフェードイン表示される。0;}仮想DOMとは?超要約するとDOMツリーの上にもう一枚仮想DOMのツリーを作ってVue.jsでは基本的に仮想側の操作をする。DOM自体が変わったり、変えたりした際は非同期で本来のDOMを変更しているので、タイムラグや、DOMの入れ替え時に反映されない事がある。v-if,v-elseで分岐表示させた際等にこれが起こりうる。付けて別物ということを認識させる事でちゃんと描画されるようになる。$el,$refsが同様の事ができるので、併用はできるけど、まあ、無意味化しつつあるよね。Eloquentで取得し...40歳を過ぎてプログラミングを始めたが50歳を前にして業務委託プログラマーとして半年が経過したWordPress『更新に失敗しました。レスポンスではありません。sakamataはてなブログをはじめよう!sakamataさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。