Vue.jsとflaskを使うとマスタッシュが衝突する問題&解決法
先日flaskとVue.jsを使って開発をしていたらflaskとVue.jsのマスタッシュが衝突してしまい6時間くらいハマってしまったので解決方法を残しておきます flaskを使っていてVue.jsが反応しなければ試してみる価値があると思います。 Vue.jsとflaskのマスタッシュが衝突するVue.jsとflaskはこんな感じで書いていきますが、よく見てみるとVue.jsとflaskの両方でマスタッシュ構文が使われています。 これが衝突してしまい、Vue.jsのマスタッシュ構文が機能しなくなります マスタッシュ構文 → {{ }} Vue.jsのexample <div id="app"> <p>{{ message }}</p> </div> <script> var app = new Vue({ el: "#app", data:{ message: "Vue.js" } })
【Python】Flask + Vue.js マスタッシュ構文を使い分ける
マスタッシュ構文とはまずは、マスタッシュ構文とはどのようなものなのか解説します。 マスタッシュ構文は変数を波括弧2つ {{}} で囲みます。 Flaskの環境において、Pythonで書いたソースコードから値を渡して表示することができます。 Vue.jsも、同様に値を渡して表示を行うことができます。 それぞれサンプルを見てみましょう。 Flaskでマスタッシュを使ったサンプル from flask import Flask,render_template app = Flask(__name__) @app.route("/") def index(): return render_template("index.html", flask_message = 'Flaskのメッセージ') if __name__ == '__main__': app.debug = True app.run(
【Vue】メソッドを外部のjsファイルに移動する方法。外部ファイルの処理結果をvueに戻す。 - Qiita
メソッドを外部のjsファイルに移動する方法について。 変数を外部ファイル（.js）に切り出してexport defaultでインポートする方法はこちら 今回は応用編として、.vue内のメソッドを外部ファイルに切り出す方法。 流れと考え方 操作の流れは、vueのデータをjsに渡して、処理後に戻す作業になる。 (1).vue -> (2).js -> (3).vue (1) .vueの処理 ・vueのメソッドを実行 ・メソッド内で変数を定義し、jsファイルにプロパティ名でデータを渡す。 (2) .jsの処理 ・vueのデータを引数としてプロパティで受け取り処理を実行後、戻り値で返す。 (3) .vueの処理 .jsから戻ってきた値を、vueの値(this.xxx)に代入する。 ▼考え方 Inputする（渡す）データとOutputする（戻す）データの受け渡しを意識することが大切。
Vue.js で外部 JS ファイルの関数を呼び出す - プログラムを書こう！
この記事は 2021 年 03 月 03 日に投稿しました。 目次 はじめに Vue.js で外部 JS ファイルの関数を呼び出す おわりに リンク 1. はじめに こんにちは、iOS のエディタアプリPWEditorの開発者の二俣です。 今回は業務で使用しているVue.jsで外部 JS ファイルの関数を呼び出す方法についてです。 目次へ 2. Vue.js で外部 JS ファイルの関数を呼び出す Vue.jsで外部 JS ファイルの関数を呼び出すには、以下のような実装にします。 実装例 外部 JS ファイル(export.js) // 関数を定義します。 function func1() { console.log("Good morning!"); } // 別の関数を定義します。 function func2() { console.log("Good afternoon!"); }
CSVを簡単に扱えるPapa Parse
小ネタ。 業務で、jsonをCSVにパースしてダウンロードを行う処理が必要になった。（フロントエンドで） 今まで愚直に以下のような構成でコーディングしていた。 jsonをcsv用の文字列に編集（mapとかforEachを使って一個ずつ処理していく） 変換、拡張子、出力ファイル名などのconfigを作っておく BLOBに変換するnew Blob([csv], { type: 'text/csv;charset=utf-8;' }); 隠しaタグを用意してあげてブラウザからダウンロードさせる これを書くと結構なコード量になる。 そんな中会社の同僚にPapa Parseというライブラリを教えてもらった。 これがだいぶ優秀だった。 https://www.papaparse.com/ ドキュメントが詳しいのとDEMOが分かりやすいので、一度目を通せば何ができるかがすぐ分かる。 CSV to JSO
VueでCSV→JSON変換。vue-papa-parseの使い方 | とあるエンジニアのエソラゴト
個人開発をしている時に、「Vueを使い、CSVファイルをアップロードすると、JSON形式に変換してくれる処理」を書きました。 検索しても、「CSV→JSONへの変換が簡単に出来るライブラリの使い方」について、詳しく書いている記事がありませんでした。ということで、「vue-papa-parse」というライブラリがすごく使いやすかったので、今回はその共有となります。 非常に簡単に変換処理が書くことが出来ましたので、vue-papa-parseの使い方はこの記事でマスターできます。 最終的には、以下のようなものを目指します vue-papa-parseを使うことで、非常に短い行数で書けます。とても便利なので、ぜひマスターして下さい。
七転八起 - vuejsでwebsocketを使用したチャットのサンプル
<?php use Ratchet\Server\IoServer; use MyApp\Chat; use Ratchet\Http\HttpServer; use Ratchet\WebSocket\WsServer; require dirname ( __DIR__ ) . '/vendor/autoload.php'; $server = IoServer::factory ( new HttpServer( new WsServer( new Chat () ) ), 8080 ); $server->run (); <?php namespace MyApp; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; class Chat implements MessageComponen
[Vue.js] Vue CLI 3 で electron-vue の環境を構築する方法
こんにちは。最近、 Beat Saber というVRゲームに興味がある1 k-so16 です。 以前登壇した v-kansai meetup では、electron-vue を利用したアプリケーションの作成について発表しました。作成当時はVue CLIのバージョンは2.x系で、 Vue CLI 3 が出る前でした。 久々に electron-vue で何か作ろうかなぁと思い、 Vue CLI 3 がインストールされている私の個人用の開発環境2で electron-vue の環境構築をしようとしたところ、環境構築が出来ませんでした。 そこで、Vue CLI 3 で electron-vue の環境構築をする方法を調べてみました。本記事では、Vue CLI 3で electron-vue の環境を構築する方法を紹介します。 本記事で想定する読者層は以下の通りです。 Vue CLI の基礎的な使
![[Vue.js] Vue CLI 3 で electron-vue の環境を構築する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/5c0d6298b3d753acb0222d3ce0f03d7e03ef95c6/height=288;version=1;width=512/https%3A%2F%2Fmseeeen.msen.jp%2Fstatic%2Ffbd721602a7b4b0f20954887dee86f59%2FHERO.png)
Vueを学び、SPA対応のポートフォリオサイトを自作するまでの道のり - Qiita
昨日1/28にVue, Vuex, Vue Routerを使って、SPA対応のポートフォリオサイトを自作しました！ここまで形になったこと、本当に嬉しかったです。 自作ポートフォリオサイト もともと1週間でVue.jsを使ったポートフォリオを作った記事をみて、「すげぇ…自分もVueでポートフォリオサイト作成を第一目標にしよ！」と思ったんですね。 それで、Vueでの自作ポートフォリオサイトを１つの目標にしたんですが、想像以上に私には難しく１ヶ月くらいかかりました(^p^) あと、２回ほど心が折れました(^p^) そんな過去の私のようにVueで心折れそうな方々が減れば…！という一心で、個人的なVue学習の道のりをご紹介します。 追記：2020/3/25 NuxtでJAMStackなポートフォリオに一新した記事を上げました。こちらも参考になれば幸いです！ 【JAMStack】Nuxt×Conten
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vuetify.js 2.2のListコンポーネントについて - Qiita
Vuetifyに入門する - Qiita