はじめに こんにちは！ 松本 佑大（まつもと ゆうだい）と申します！ 今回はv-bindについてアウトプットしていきます！ V-bindとは v-baindとは要素に含まれる属性を動的に設定・変更することが出来る設定方法です。 オプションに指定したデータを、データバインディングすることでテキストが表示されます。 データバインディングとはデータと描画を同期する仕組みのことです。 書き方 基本的な書き方は以下のようになります。 <div id ="app"> <input type ="text" v-bind:value="message"> </div> Vue.js var app = new Vue({ el:'#app', data:{ message:'Hello vue.js!' } }) このように、inputのvalue属性にmessageプロパティをバインドすることで、上記のようにinputの入力欄にHello vue.js! と表示することができます。 ※属性にマスタッシュ構文は使用できません まとめ 属性へのデータバインディングでは、 ❌ マスタッシュ構文 {{ 〇〇〇〇〇〇 }} ではなく、 ⭕️ v-bind:value="〇〇〇〇〇〇" を使用しましょう！ 最後に 今回はv-bindについてアウトプットしました。 もし認識の仕方が間違っていましたら、コメント等頂けると幸いです。 今後ともQiitaにてアウトプットしていきます！
Vue.jsを使用して、ユーザビリティなフォームの作成。 完成例 通常時 フォーカス後 このように、フォーカス後にフォームの色をグレーから白に変えていきたいと思います。 inputタグにV-onイベントを設定 フォーカスされた時に@focusinを発火させ、startEditingを実行 フォーカスされていない時は@focusoutを発火させ、finishEditingを実行 <input v-model="title" type="text" class="text-input" placeholder="Add new list" @focusin="startEditing" @focusout="finishEditing" > data() { return { title: '', // 通常時はフォーカスしていないのでfalseに設定 isEditing: false, } }, methods: { addList() { this.$store.dispatch('addlist', { title: this.title }) this.title = '' }, // フォーカスされた時 startEditing() { this.isEditing = true }, // フォーカスしていない時 finishEditing() { this.isEditing = false }, } isEditingの状態がtrueの時だけactiveクラスを動的に追加します .active .text-input { background-color: #fff; } computedでdataにあるisEditingの状態を監視 data() { return { title: '', isEditing: false, } }, // ★ここから追加 computed: { classList() { const classList = ['addlist'] // isEditingがtrueならactiveクラスを追加 if (this.isEditing) { classList.push('active') } return classList }, }, // ★ここまで追加 methods: { 上記で定義したcomputedをformにバインドさせる <form :class="classList" @submit.prevent="addList"> <input v-model="title" type="text" class="text-input" placeholder="Add new list" @focusin="startEditing" @focusout="finishEditing" > <button type="submit" class="add-button"> Add </button> </form> フォーカス後、フォームの色が変わっていたら成功です！
好きなゲーム一覧を作る 元々ブログを作ろうと思っていたのですが、まだまだ知識が足りない・・・ 静的サイトしか作ったことない、あるいは用意されているAPIを使ってページを作ったことしかないので分からないことだらけ・・・ 私がこれから得る知識を得ることでどこまでできるのかな？？付け焼き刃だけどやってみよう！ 目次 ①どうやってmysqlからexpressはデータを持ってくるの？ ②expressとvueはどうやってつなぐの？ ③vuexを使ってmysqlからデータを持ってきたい。 ①どうやってmysqlからexpressでデータを持ってくるの？ サーバーとDBのやりとりをこちらで学びました。 Progate Web開発パス(Node.js) Rubyコースもあったのですが、javascriptが好きなので一旦こちらNode.jsを勉強。 そのかいもあってmysqlとexpressをざっくり理解しました。 mySQL構文をexpressで使っていくイメージでした。 ②expressとvueはどうやってつなぐの？ ここから私のワクワクステージ。 まず最初に参考にさせて頂いたのが下記の記事。 vueとexpressでSPAを作る expressとvueを繋げる方法が分かります。 こちらではPOSTを使ってexpressで指定したメッセージをコンソールに表示させています。 ですが私はここで自分の凝り性を発揮してしまいました。 Vuex使えないだろうか。 色々なVueの本やら記事、動画を見てきましたが、VuexのstoreでAPIと通信することって多いイメージ。①と②の知識があれば自分の好きなデータを好きなように表示できるのでは？？ ③vuexを使ってmysqlからデータを持ってきたい バックエンドの設定 まずはmySQLでデータベースを作ってくださいね。 データベースを作る(プロゲイト) 私は好きなゲーム一覧ができるようにゲーム名だけのデータベースをとりあえず作りました。 それからサーバー側の設定をしていきます。 まずはexpressをnpm installして、その他にも下記をインストールします。 nodemon （変更ファイルを検知して自動でサーバーを再起動してくれるようになります。） cors (サイトのドメインとAPIのドメインが違う場合エラーになってしまうので入れておきます) mysql(expressでmysqlをいじれるようにツールを追加) package.json { "name": "backend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "./node_modules/nodemon/bin/nodemon.js index.js"//変更ファイルを検知して自動でサーバーを再起動してくれるようになります。 }, "author": "", "license": "ISC", "dependencies": { "cors": "^2.8.5", "express": "^4.17.1", "mysql": "^2.18.1", "nodemon": "^2.0.13" } } backend/index.js //それぞれ使えるようにrequireします。 const express = require('express') const cors = require('cors') const mysql = require('mysql'); const app = express() app.use(express.static('../frontend/dist'))※後述 app.use(cors()) const connection = mysql.createPool({ host: 'localhost', user: '自分のもので置き換え', password: '自分のもので置き換え', database: '自分のもので置き換え' }) app.listen(process.env.PORT || 3000) 一応これでexpressとmysqlは繋がっているはず...です。 ちなみにこの状態でhttp://localhost:3000/にアクセスしても何も出てきません。 上記コードのこの部分を見てください。 app.use(express.static('../frontend/dist')) frontend/distを閲覧しているのですがvue側でnpm run buildしてないのでまだないですね。 ちゃっちゃかこの部分も作っていきましょう。 フロントエンドの設定 vue create frontendするとvue-cliが自動でできちゃいますね。 作る際に出てくる設定でvuexだけ入れとけば今回はとりあえず大丈夫でしょう。 インストールしておくものはaxios。 vue-cliでできる/frontend/src/component/HelloWorld.vueは簡単なものに。 とりあえずtemplateをお片付けしますかね。<style>タグも消しちゃいました。 /frontend/src/component/HelloWorld.vue <template> <div class="hello"> <button>get</button> </div> </template> こんな感じで。そしたらnpm run build。 http://localhost:3000/にアクセス。 npm run serveを叩いて http://localhost:8080/にアクセスしてこんな画面が出てきたら成功です。 ここまで準備できたら早速画面にゲーム名が出てくるようにコードを書いていきましょう。 下記コードを追加しましょう。 backend/index.js app.get('/test', (req, res) => { connection.query( 'SELECT*FROM 自分のテーブル名', (error, results) => { res.send(results) } ) }) 私はポート番号を指定する記述の上に書きました。 クライアントでhttp://localhost:3000/testにアクセスするとexpressがmysqlにアクセスしてデータを持ってきてくれるわけですね。 試しにhttp://localhost:3000/testをブラウザで叩くとデータが表示されています。 ここで出てくるVuex。 frontend/src/store/index.jsを下記のように書いてみましょう。 frontend/src/store/index.js import { createStore } from 'vuex' import axios from 'axios' axios.defaults.baseURL = 'http://localhost:3000/' export default createStore({ state: { games: {} }, mutations: { gamesSet (state, games) { this.state.games = games } }, actions: { async testGetting (state) { const games = await axios.get('/test') this.commit('gamesSet', games.data) } }, modules: { } }) vuexではactionsでAPI通信をするようになっているのでactionsメソッドに処理を書きましょう。返ってきたデータをstateで状態管理するためにmutationでセットします。 (ここのルールが中々複雑で最初は面倒だなとか思ってしまう。) いよいよ上記で作ったtestGetting()を画面を操作して呼んでみましょう。 /frontend/src/component/HelloWorld.vue <template> <div class="hello"> <button @click="get">get</button> </div> </template> <script> export default { name: 'HelloWorld', data () { return { } }, methods: { get () { this.$store.dispatch('testGetting').then(() => { this.games = this.$store.state.games }) } } } </script> 上のコードではgetと書いてあるボタンをクリックするとget関数が呼ばれます。 その中ではthis.$store.dispatch('testGetting')しています。 ご存知のようにstoreにあるactionsを呼ぶには決まった呼び方がありますね。dispatch。 最後に/frontend/src/component/HelloWorld.vueのtemplateを修正してリストを画面に表示しましょう！ /frontend/src/component/HelloWorld.vue <template> <div class="hello"> <button @click='get'>get</button> <ul> <li v-for="game in games" :key="game">{{game.name}}</li> </ul> </div> </template> this.$store.dispatch('testGetting')で取ってきた値をthis.gameに格納することで<li>タグのv-forが動き、一覧が表示されているはずです。 どうでしょうか、表示されましたか？？ 以上となります！ まとめ Vue初学者によるアップアップしながら書いた記事なので、間違った部分もあるかもしれません。 でも自分で立てたDBに繋いでデータをやりくりするできて感動でした。 実際に業務でこんな使い方するかは分かんないけども。。。 この知識を生かして今度はデータを追加できるようにしようと思います。 機能を増やしているので、参考になるかは分かりませんがgithubを置いておきます。 https://github.com/AS-box/backend-test お疲れ様でした！ 参考にさせて頂いたサイト vueとexpressでSPAを作る データベースを作る(プロゲイト) express.jsのcors対応 [Node.js][Express]Jsonレスポンスを返す Expressでbody-parserがいらない理由: “bodyparser is deprecated” Vuex とは何か？
問題 Type of the default value for '〇〇' prop must be a function というエラーが出た。 中身は以下のような感じ sample.vue <script> export default { props: { 〇〇: { type: Array, default: [], }, }, } </script> 解決法 defaultの部分を修正する！ sample.vue <script> export default { props: { 〇〇: { type: Array, default: () => [], }, }, } </script>
