Vue.js
※ セクション8~10はわざわざ纏める必要あるか微妙だったので、一旦パス。 144. フィルターを使用して、一般的なテキストフォーマットを作成する フィルター…テキストをフォーマットするためのもの。文字を全部大文字にするみたいな。 今まではcomputedでやっ…
87. 親子間のデータの受け渡しの必要性を理解する 親コンポーネント アプリケーションのApp.vueは親コンポーネント⇄LikeNumber、LikeHeaderは子コンポーネント →App.vueではLikeNumber、LikeHeaderを使っている。 (src/App.vue) <template> <div> <LikeHeader></LikeHeader> <h2>{{ number }}</h2> <LikeNumber :total-number="number" @my-click="incrementNumber"></LikeNumber> </div></template>
74. コンポーネントを使用して、再利用可能なVueインスタンスを作る 第一引数はコンポーネント名 第二引数はコンポーネントに関する情報をオブジェクトでセットする コンポーネントの中でデータを使う時は、データを関数にする必要がある。 以下はグローバル…
67. なぜVue CLIを使う必要があるのか Vue CLI(コマンドラインインターフェイス)...大規模な本格的な開発に必要。 なぜ必要？ ファイルの分割 →大規模な開発で、ファイルを分けたり、くっつけたりしたい。 最終的なコードの軽量化 →改行、空白、コメントアウ…
50. イントロダクション Vueインスタンス Vueインスタンスって複数作れるの？他のjsからアクセスできるの？とかの内容 51. Vue インスタンスは複数作ることができる Vueインスタンスはなるべく複数使用しない方がいい 完全に独立してるなら使ってもおk。 #ap…
37. v-elseを使って、v-ifがfalseの場合の処理を書く <div id="app"> <p v-if="ok">Hello</p> </div> new Vue({ el: '#app', data: { ok: true, } }) 38. v-else-ifを使って、複雑な条件式を作る <div id="app"> <p v-if="ok">OK</p> <p v-elseif="maybeOk">maybe OK</p> <p v-else>Not OK</p> </div> new Vue({ el: '#app', data: { ok: false, maybeOk:…
はじめに 以下にUdemyの動画、超Vue.js2のメモを備忘録として書き連ねていきます。セクション毎に記事を分けます。 1. Vueの良いところ 簡単、柔軟、高性能 HTMLファイル内の一部にVueを取り入れる、一つのファイルをVueだけで作る、アプリ全てをVueにするSP…
下記の例文にthisを使ってみる 以下が例文。sayHi関数の結果を出力しているだけ。 <div id="app"> <p>{{ SayHi() }}</p> </div> new Vue({ el: "app", data: { message: "Hello world!", }, methods: { sayHi: function() { return 'Hi' ; } } }) 出力結果 Hi さあ、thisを使おう sayHi…
はじめに 今日もとりあえずVueの内容について殴り書きしていく。 componentとは Webサイトの画面はヘッダー、メイン、フッターなど色々な部品から構成されている。そこで、コンポーネントという機能を使えば、ヘッダーなどの部品(コンポーネント)ごとに、HTM…
v-show <タグ名 v-show="条件式">trueなら表示</タグ名> v-ifとv-showの比較 表示、非表示の動作が異なる。 v-ifはDOMレベルで要素が削除され、消えた部分はコメント化される。 v-showはDOMから要素は削除されず、dispay: none;が設定される。 →DOMへの要素の生成と削…
computedとは 関数で算出したデータを返すことができるプロパティ(getterということ) データの加工を伴った取得ができる。 キャッシュが残るから、処理が早くなる。 computed: { 算出プロパティ: 関数のオブジェクト } fullName: function() { return${this.…
Vueのデータバインディング 追記(6/15) バインディングとは、データとUIを結びつけること 双方向とは、データを更新⇄UIを更新 dataで、データを保持させる →name(プロパティ)とvalueのセット。 {{ }}にはjsの式も書ける → new VueはVue.jsの心臓部分みたいな…
