VSCodeでVueのコード整形ツール(Prettier)の設定をシングルクォーテーションにしたい。 問題 古い記事では、以下のように書かれていることが多かった。 メニューから Code > Preference > Settings を開く。 検索バーで SingleQuote と検索して出てきたものをチェック。 自分の環境ではこの設定を行なっても整形時にダブルクォーテーションのままだった。 解決策 Pritterはアップデートがあったらしく、共通の設定ファイルを利用せずにPritter専用ファイルから指定するよう変更されたらしい。 プロジェクトルートディレクトリに.prettierrcを作成して以下を記述する。 .prettierrc { "singleQuote": true } これでフォーマッターのショートカット Shift+Option+F を押すと、シングルクォーテーションで整形されるようになった。 参考 https://stackoverflow.com/questions/59243558/vscode-not-formatting-ts-js-files-with-single-quotes https://prettier.io/docs/en/configuration.html

概要 plunkerでvueやってみた。 練習問題、やってみた。 練習問題 vuetifyとaxiosを使って、get,post,put,deleteを実装せよ。 サンプルコード new Vue({ el: "#app", data() { return { dialog: false, isCreate: true, editedItem: { id: 0, name: '', email: 0 }, headers: [{ text: 'ID', value: 'id' }, { text: '名前', value: 'name', }, { text: 'メルアド', value: 'email' }, { text:'修正/削除', value:'delete', sortable:false }], serverDatas:[], } }, computed: { formTitle() { return this.isCreate ? 'New Item' : 'Edit Item' } }, watch: { dialog(val) { val || this.close() } }, methods: { deleteItem(item) { confirm('削除しますか') && this.deleteUser(item) }, editItem(item) { this.isCreate = false this.editedItem = item this.dialog = true }, close() { this.dialog = false }, save() { if (!this.isCreate) { this.update() } else { this.create() } this.dialog = false }, update() { axios.patch('https://jsonplaceholder.typicode.com/users/' + this.editedItem.id, { name: this.editedItem.name, email: this.editedItem.email }).then(response => this.users.unshift(response.data)).catch(error => conalert(error)) }, create() { axios.post('https://jsonplaceholder.typicode.com/users', { name: this.editedItem.name, email: this.editedItem.email }).then(response => this.serverDatas.unshift(response.data)).catch(error => alert(error)) }, deleteUser(item) { axios.delete('https://jsonplaceholder.typicode.com/users/' + item.id).then(response => console.log(response)).catch(error => alert(error)) const index = this.serverDatas.indexOf(item) this.serverDatas.splice(index, 1) }, }, created() { axios.get('https://jsonplaceholder.typicode.com/users').then( res => { this.serverDatas = res.data }).catch(e => { alert(e) }).finally(()=>{ //alert("通信完了") }) } }) 成果物 以上。

RailsとVue.jsの組み合わせ方を学習したいと思い、Techpitさんでこちらの教材を学習。 Rails × Vue.js でメモアプリを作成しながらモダンな開発を学ぼう！ 1回目に学習した際は何の問題もなく構築できたのですが、約２週間後に復習しようと思い2回目の学習を実施したところ、Hello Vue!と出力する部分で 苦労しましたが、何とか解決できたのでメモします。 エラーが出た箇所 rails webpacker:install:vue してルーティング、コントローラー、ビューをいじり、Hello Vue!とブラウザに表示する エラー内容 Webpacker::Manifest::MissingEntryError webpacker can't find hello_vue in ~/memo-app/public/packs/manifest.json. Possible causes: 1. You want to set webpacker.yml value of compile to true for your environment unless you are using the webpack -w or the webpack-dev-server. 2. webpack has not yet re-run to reflect updates. 3. You have misconfigured Webpacker's config/webpacker.yml file. 4. Your webpack configuration is not creating a manifest. 1回目に作成したmemoアプリを確認したところ、どうもpublicフォルダ以下にpacksフォルダとmanifest.jsonファイルが生成されていないことが原因のようでした（上の４）。 なので、「vue.js manifest.json」「Webpacker::Manifest::MissingEntryError manifest.json」と思いつく限りのキーワードで検索をかけ、日本語・英語問わず調べ、 ① 解決方法として提示されていることを試す ↓ ② Webpacker::Manifest::MissingEntryError webpacker can't find hello_vue in ~/memo-app/public/packs/manifest.json のエラー表示 ↓ ③ アプリ削除 ↓ ①に戻る と、ひたすら試したのですが、無常にも全く解決しませんでした・・・。 無限ループに陥り、もうダメかと思っていたところ、 ・コマンド実行のたびにwebpackのバージョンが云々みたいな内容が何回も表示されていたのに気づいた ・何かしらのバージョンが変わったことでできなくなったのでは？（RailsチュートリアルにGemのバージョンが変わると動かなくなることがよくあると書いてあったので） と思い、Gemfileのwebpackerのバージョンを変えてみるかと思い立つ。 解決法 webpackerの最新バージョンはv6.0.0みたいですが、これはベータ版みたいなので、とりあえず5.0.0~5.1.0にしてみました。 Webpacker v6.0.0.beta.6の現時点の変更点について Gemfile # gem 'webpacker', '~> 4.0' gem 'webpacker', '~> 5.0' # 4を5に変える その後、再び下記コマンドを実行 ターミナル $ bundle install $ rails webpacker:install $ rails webpacker:install:vue $ rails server publicの下にpacksとmanifest.jsonが生成されました。 localhost:3000/homeに移動すると、、、 無事Hello Vue！が表示されました！！ 原因 詳しい原因は正直よくわかりません。すみません。 ただパッケージ間のバージョンの問題なのかなと推測します。 ちなみにエラー解決に要した時間は15時間でした笑 心折れそうでしたが、とりあえず自力で解決できていい経験になりました。

タイトルにある通りVue.js入門ということで、今からVue.jsを学び始める方向けに、実際にVue.jsを使うとどんなことができるのかを掻い摘んで解説していきます。 今回は「Vueの基本的な使い方」、「Vue.jsの可能性を広げるディレクティブ」の二本構成で解説に入りたいと思います。 Vue.js導入 ここではVue.jsを扱う上で最低限必要な記述を説明しています。 <!-- 2の処理 --> <div id="app"> {{ hello }} </div> <!-- 1の処理 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <!-- 3の処理 --> <script> new Vue({ el: "#app", data: { hello: "こんにちは" } }) </script> 基本的な導入の流れです。 VueのCDNを読み込みます。 id="app"のdivタグ内がVue.jsの適用範囲になります。そしてマスタッシュ記号 {{ }} 内のhelloには、Vueインスタンスのdataで登録されたhelloの値を取得します。 Vueのインスタンスを生成します。elはVue.jsの適用範囲とするidを指定します。dataにはhtmlと連携するデータをオブジェクトに格納できます。 この場合ページには「こんにちは」と表示されます。 ディレクティブ ディレクティブとは、接頭辞 v- が付いたVue.jsの特別な属性のことを指します。 ディレクティブを設定することで様々な機能を追加できます。 今回は主要なディレクティブを厳選して実例を交えながら解説していきます。 v-on イベント処理 ここではv-onを利用してボタンを押すとカウントアップされるような機能を実装していきます。 <div id="app"> <p>{{ number }}</p> <button v-on:click="countUp">カウントアップ</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { number: 0, }, methods: { countUp: function() { this.number = this.number + 1 } } }) </script> v-onを利用すると様々なイベントを設定ことができます。 今回はボタンを押してカウントアップさせる機能なので、クリックイベントを使用します。 v-on:click="countUp"をbuttonタグの属性として追加することで、Vueインスタンスに登録されたcountUpメソッドを実行します。 Vueインスタンス側にcountUpメソッドを登録するには、methodのオブジェクト内に定義してあげる必要があります。 countUpメソッドの処理の内容としては、this.numberで現在のnumberの値を取得できるので、ここでは現在の値に1を足し合わせています。 また、v-onは省略できてv-on:click="countUp"を@click="countUp"と書くこともできます。 v-if 条件分岐 ここではv-ifを利用して条件分岐の処理を実装します。 <div id="app"> <p>{{ number }}</p> <button v-on:click="countUp">カウントアップ</button> <p v-if="number">trueだと表示されて、falseだと非表示になります。</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { number: 0, }, methods: { countUp: function() { this.number = this.number + 1 } } }) </script> v-ifの値にはnumberの値をブーリアン形式で取得します。 初期値は0になっているので、この場合はfalseを値として返すため<p v-if="number">trueだと表示されて、falseだと非表示になります。</p>は非表示になります。 numberがカウントアップされるとtrueを値として返すため<p v-if="number">trueだと表示されて、falseだと非表示になります。</p>は表示にされます。 v-for 繰り返し処理 ここではv-forを利用してリストを表示します。 <div id="app"> <ul> <li v-for="pref in prefs">{{ pref.name }}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { prefs: [ { name: "北海道" }, { name: "青森" }, { name: "宮城" }, { name: "秋田" }, { name: "岩手" }, { name: "山形" }, { name: "福島" }, ], } }) </script> v-forは繰り返したい要素に設定します。今回はリストを表示したいので、liタグに属性を設定しましょう。 また予めprefsに配列でデータを格納してあげます。 v-for="pref in prefs"の処理ですが、prefsは定義されている値の数だけ繰り返し処理が実行されます。そしてprefには繰り返し一回毎の値が入っています。 マスタッシュ記号 {{ }} 内にはpref.nameとして都道府県の名前を表示してあげます。 v-bind HTML属性との連携 ここではv-bindを利用してhtml属性とVueのデータを紐付ける処理を実行します。 Vue側からhtml属性に値を渡してあげます。 <style> .red { color: red; } </style> <div id="app"> <p v-bind:class="color">クラス名をデータ側から指定できます</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { color: "red" } }) </script> v-bindを利用するとVueインスタンスのデータとhtmlの属性を連動できます。 v-bind:class="color"とすると、Vueインスタンスのcolorの値とpタグのクラス属性の値が連動します。 したがってpタグのclass属性にredが追加され、テキストが赤色になります。 ここまで学習してきた流れでいくとv-bind:class="{{ color }}"と書けばVueインスタンスのcolorの値が取得できそうですが、この記述ではエラーになってしまいます。 なぜかというと、マスタッシュ記号 {{ }} は属性の値として使用できないとVueのルールで定められているからです。 また、v-bindは省略できてv-bind:class="color"を:class="color"と書くこともできます。 v-model 双方向バインド ここではv-modelを利用してhtmlとVueのデータの双方向の連携を実現します。 <style> .red { color: red; } .blue { color: blue; } .green { color: green; } </style> <div id="app"> <p v-bind:class="color">データの値をhtml側から操作できます</p> <input type="text" v-model="color"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> new Vue({ el: "#app", data: { color: "" // ブランクにしておきます } }) </script> v-modelはhtmlとVueのデータの双方向の連携が実現できます。このディレクティブはVueの醍醐味と言っても過言ではありません。 主にformのinput要素などで使われます。 inputタグにv-model="color"属性を設定すると、input要素に入力したテキストの値をVueインスタンスのcolorの値として操作することができます。 inputタグにredを入力するとVueインスタンスのcolorの値がredになり、pタグのクラスにredが渡されテキストが赤色に変化します。 以上になります。 今回は主要なディレクティブを厳選して紹介しましたが、他にも様々なディレクティブやVue.js独自に用意されたタグなどがありますので、この際に勉強してみてはいかがでしょうか。 それではドロンとさせていただきます。

コンポーネントが増えて、あるコンポーネントのボタンをクリックすると兄弟コンポーネントの子コンポーネント、甥コンポーネント？の関数を発火したかった。 parent ┬ children1 - grandchild └ children2 children2.vue <template> <div> <v-btn color="indigo" @click="hello">hello</v-btn> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ methods:{ hello(){ this.$parent.$emit('hello'); } } }) </script> grandchild.vue <script lang="ts"> import Vue from 'vue'; export default Vue.extend({ mounted(){ this.$parent.$parent.$on('hello',this.hello);//$parent.$parentでhelloが発火したときにhello関数が発火。 }, methods:{ hello(){ console.log('hello') } } }) </script> this.$rootでやるのもいいが極力使わないほうがよさそう。