昨日書きかけだったapiをvueを使って表示させる部分の流れについて書いておこうと思います！ (クリックしたコメントをapiをたたいて取得してvueで表示させるだけのものです) foremanを導入 webpackerとrailsの起動を簡単にできるようにしてくれるforemanとい…

せっかくrailsでapiを作ったので、vueを導入して表示できるようにしたいと思いました。 vueを入れる流れを書いておこうと思います。 流れ gemを追加 Gemfileに以下を追記してbundle installします。 gem 'webpacker', github: 'rails/webpacker' webpackerを…

今日は前から気になっていた、Nuxt.jsを触ってみました！！ Nuxt.jsとは vue.jsでアプリを作るためのフレームワークです。 手順 ①npm install -g vue-cli vueのコマンドラインツールをインストールします。 ~ $ npm install -g vue-clinpm WARN deprecated c…

算出プロパティcomputedとは 算出プロパティは、関数によって算出したデータを返すことができるプロパティです。 基本の使い方 computedを使うと、マスタッシュ構文の中でメソッドを続けて書いた時と同じように、 messageの文字列を反転させて表示することが…

フィルタでは引数を利用することができます。 構文 オブレクトが第１引数になります。 html側 {{ オブジェクト | フィルタ名( 第２引数, 第３引数)}} js側 Vue.filter('フィルタ名' function( 第1引数, 第2引数, 第3引数 ){ //処理}) 例 index.html <div id="app"> <p> {{text</p></div>…

フィルタは１つだけでなく、複数連結させて使うことができます。 構文 {{ オブジェクト | フィルタ１ | フィルタ２ }} 例 １つめのフィルタで日本円→USドルへ変換、２つ目のフィルタでカンマ区切りにするフィルタを定義し、連結させて表示させてみます。 ind…

v-bindディレクティブは頻繁に使用するため、省略記法が用意されています。 「v-bind」の部分は省略して、「:」だけでも書くことができます。 構文 通常の書き方 <a v-bind:href="url">Link</a> 省略記法 <a :href="url">Link</a> 例 index.html <div id="app"> <p> <a v-bind:href='url'>Link</a> </p> <p> <a :href='url'>省略記法Linl</a> </p></div> index.js var app = new Vue({ el:…

グローバルフィルタ構文 Vueインスタンスを定義する前に、以下のようにVue.filterにフィルタを定義することで、全てのコンポーネントからフィルタを使用できるようになります。 Vue.filter(filterName, function(value){ //処理 }) new Vue({ //省略 }) 全て…

フィルタとは フィルタとは、フォーマットを整えるなどテキストの変換処理に特化した機能です。 Vue.jsでは、式の終わりに任意のフィルタを追加することができます。 ローカルフィルタ構文 基本的には以下のような構文になります。 htmlファイル側 {{ 式 | f…

Vue.jsでは、データバインディング内部でJavaScript式を利用することができます。 使えるのは単一の式のみです。 以下のように、式でないものや、単一でないものは使えません。 {{ var x = 1 }} {{ if(ok) return message }} 例 index.html <div id="app"> <p> {{message}} </p> <p> </p></div>…

v-textディレクティブを使う場面 ・マスタッシュタグを使用せずに、ディレクティブを使用したいときにv-textディレクティブを使用します。 例(上のpタグはマスタッシュタグ、下がv-textで表示) index.html <div id="app"> <p> {{message}} </p> <p v-text="message"> </p> </div> index.js var app = new Vue({ e…

v-cloakディレクティブを使用する場面 ・ページを表示開始してから、Vueインスタンスの作成が終わるまでの間に、マスタッシュタグなどのコンパイル前のテンプレートが表示されてしまうのを防ぎたいときに使用します。 例(v-cloakを使用したチラつき防止) イ…

v-htmlディレクティブを使用する場面 ・プレーンなHTMLを挿入したいとき使用します。 →指定した要素のinnerHTMLを更新できます。 例(v-html使わない・v-html使用の比較) 上のpタグはv-htmlディレクティブを使用せず普通にマスタッシュ構文でdata属性のmessag…

v-preディレクティブを使用する場面 ・要素と全ての子要素のコンパイルをスキップしたいときに使用します。 →生のマスタッシュ構文を表示させたいとき。 →XSS対策 →ディレクティブの無い大量のノードをスキップすることで、コンパイルのスピードをあげたいと…

v-coneディレクティブを使用する場面 ・初回だけテンプレートを評価し、それ以降は静的なコンテンツとして扱いたいときに使います。 例(v-once使わない) マスタッシュ構文で表示させているHello Vue.js!! という文字を、Click!! ボタンを押したら文字が反転…

Vue.jsの勉強でTODOアプリを作りました。 hayashiyoshino.github.io 機能としては、以下のような非常にシンプルなものです。 ・入力されたものがリスト表示されます。 ・実行したものにチェックを入れるとリストに打ち消し線が入ります。 ・削除ボタンを押す…

コンポーネントとは ・ページを構成するUI部品のことです。 ・テンプレートとそのロジックから構成されます。 ・よく使う機能をコンポーネント化することで再利用性が高くなったり、コードの見通しがよくなることで、開発効率の改善に繋がります。 構文 Vue.…

ディレクティブの続きです。 v-model v-modelを要素に追加すると、双方向データバインディングを行うことができます。 双方向データバインディング 双方向データバインディングとは、dataオブジェクトの値を変更すると、テンプレートの値を変更するだけでな…

ディレクティブについての続きです。 v-on v-onディレクティブを要素に追加することで、イベント処理を行うことができます。 構文 v-on:イベント名 = "メソッド名" 例 ボタンをクリックしたら現在時刻をページに表示します。 index.html <div id="app"> <button v-on:click="onclick"> Click! </button> <p> {{now}} </p> </div>…

ディレクティブについての続きです。 v-for v-forディレクティブを要素に追加すると、オブジェクトの繰り返しを行うことができます。 構文 <要素名 v-for="バリュー in オブジェクト"> {{ 表示したいバリュー }} </要素名> <要素名 v-for="(バリュー, キー) in オブジ…

ディレクティブとは v-で始まる特別な属性のことです。 その名前の通り、vue.jsに何らかの指令を行う仕組みです。 ディレクティブの例 ・v-bind ・v-if ・v-show ・v-for ・v-on ・v-model v-bind v-bindを要素に追加すると属性のデータバインディングをして…

a要素を設置して、Vue.js公式サイトへのリンク作成し、 dataオプションにurlプロパティを作成、初期値はhttps://jp.vuejs.org/、 a要素の属性hrefに、v-bindを使ってrulプロパティの値をデータバインディングします。 index.html (body部のみ) <div id="app"> <p> <a v-bind:href="url">Vue.js</a> </p> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> in…

Vue.jsを試してみているのでそのメモです。 とりあえず今回は"Hello Vue.js"とVue.jsを使って出力させてみます。 準備(ファイル作成) 以下のような構成でファイルを作成します。 vue_sample |--index.html |--index.js |--styles.css HTMLファイルにVue.jsを…