Vue.jsをCDNで始める方法【コピペで遊べるVue.jsの実装例もあります】タグ JavascriptjQueryProgrammingRubyRuby_on_RailsVue.js入門副業
ファイルを読み込んでプレビュー表示してみる。（Vue.js始めるおれおれアドベントカレンダー2016 – 12日目） | Ginpen.com
Vue.js始めるおれおれアドベントカレンダー2016 – 12日目 昨日のフォームのやつで「ファイルはアレだよ」という話になってたので、アレするのを試してみました。 デモ コード コードは抜粋しか記載してないのでGitHubの方で確認してください。 選択したファイルをプレビュー表示 ファイル情報の取得 App.vue <input @change="file_change" ref="file" type="file" multiple /> <ul v-if="form.files.length > 0"> <li v-for="(file, index) in form.files"> #{{index + 1}} <ul> <li>名前: {{file.name}}</li> <li>サイズ: {{file.size.toLocaleString()}} bytes</li> <l
Vue.jsの便利な機能coumptedとは？ - Qiita
前提 Vue.jsを使い始めて。便利だな〜と最近重宝しているのが算出プロパティ（computed）という仕組みです。 メソッドとは似ているようでも少し違う、computedの基本的な使い方を説明します。 算出プロパティ（computed）って何？ フォームのサンプルを使って説明します。 よくある情報登録フォームをVue.jsで作成しました。 入力される値の型チェック、未入力チェック（バリデーション）にcomputedを使っています。 実装要件 各項目についてバリデーションを実装し、エラーの場合はエラーメッセージ（オレンジ文字色）を各項目部分に表示 同じくエラーの場合は、Nextボタンをdisabledにする 必須項目が未入力の場合もNextボタンをdisabledにする computedの実行イメージ 項目をTelに絞って流れを図解してみます。 Telの入力値が数値ではなかったらエラーメッ
Vue.js：v-modelと$emitを使ってデータを読み書きする子コンポーネントをつくる - Qiita
Vue.js：v-modelと$emitを使ってデータを読み書きする子コンポーネントをつくる (2019/10/13追記)JavaScriptVue.js 追記(2019/10/13) 以下の項を修正・追加しました。 修正 v-modelを使う要素をラップする 今更で恐縮ですが、以前紹介していたものよりもっと簡潔で良いと思われる方法を追記しました。 追加 複雑なコンポーネントを薄くラップする Vue 2.2.0+の話です。 最近仕事でVueを使い始めました。フレームワークには珍しくブラックボックス感があまり無く、ツールを介しながら直接DOMやJSを扱っているような見通しの良さと自由度があり、今のところ気に入っています。あと公式のドキュメントがすごく読みやすく情報豊富…なので大抵のことは公式ガイドが解決・解説してくれるのですが、実際扱うまでピンと来なかった親子間のデータ受け渡しについて書き留
Vueのライフサイクルを完全に理解した - Qiita
Vueのライフサイクルについて 今回はVueのライフサイクルについて説明したいと思います。 Vueのライフサイクルは以下のようになっております https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイアグラム このようにVueではインスタンスが作られてから、削除されるまでの間で、ライフサイクルフックを実行することができます。 ここでは、インスタンスのライフサイクルごとに説明したいと思います。 インスタンス作成時 インスタンス作成時には以下の2つのフックを実行されます beforeCreate <script> export default { data(){ return{ hoge:"a" } }, beforeCreate () { console.log('hoge is: ' + this.hoge) } } </script> /
Vue.js実装のWebアプリにlazy loadを導入する
概要画像が多いVue.js実装のwebアプリに`vue-lazyload`を導入してンダリングタイムの短縮を実施したので、使用したライブラリの紹介をします。 使ったものhttps://github.com/hilongjw/vue-lazyload A Vue.js plugin for lazyload your Image or Component in your application. （これ系では一番スターついてる 2018/05） インストール$ npm install vue-lazyload -D（`-D`は` — save-dev`の省略オプション） CDNもあります。 https://unpkg.com/vue-lazyload/vue-lazyload.js <script src=”https://unpkg.com/vue-lazyload/vue-lazyloa
Vue.js で json を読み込む - Qiita
静的なデータをコンポーネントと別ファイルで管理したい時にどうぞ。 Vue-cliを使っている場合 例えばassetフォルダ内にjsonファイルを用意して、それをcomponentsフォルダ内のコンポーネントから読み込むときは以下のように書けば良い。
インストール | Vuex
インストール #直接ダウンロードする / CDN #https://unpkg.com/vuex@4 Unpkg.com で NPM ベースの CDN リンクが提供されています。上記リンクは常に NPM の最新のリリースを指します。https://unpkg.com/vuex@4.0.0/dist/vuex.global.js のような URL によって特定のバージョン/タグを利用することもできます。 Vue のあとで vuex を取り込むと自動的に Vuex が導入されます: <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script>
ベジェ曲線を描画してVue.jsの素晴らしさを体感する - Qiita
ハイパーテキストをマークアップするのがHTMLなら、グラフィックをマークアップするのがSVGです。簡単なコードであれば形をイメージできるうえに、JavaScriptから手軽に操作できます。 WebGLを含むCanvasは、できる事の幅でいえばSVGよりもはるかに上ですし、ベジェ曲線も用意されていますが、線を引くだけなら大げさな気がします。あとレスポンシブ対応が地味にめんどくさい。サクサク動くゲームとか、ゴリゴリ動くリッチなサイトをCanvasで作れる人はすごくすごいと思います。 そんなこんなで、今回はSVGを使います。 Vue.jsとSVG SVGの実体はXMLなので、HTMLのようにVue.jsから操作できます。ベジェ曲線に必要な座標を変数として定義しておいて、それをリアルタイムで変更できるようにすれば、いい感じのベジェ曲線がVue.jsとSVGで実現できそうです。高まります。 実装 プ
Webpackで始めるVue.js | log.pocka.io
#まえがきこの記事はWebpackを使って単一ファイルコンポーネント(Single File Component)のVueアプリケーションを作るチュートリアルです。 公式の日本語ドキュメントはかなりしっかりしています。 しかし、vue-cliを使わない通常の開発フローに沿ったチュートリアルや、単一ファイルコンポーネントの使い方等、実際に使うにあたって必要な情報がかなり少ないです。 本記事ではその部分のカバーをすることを目的とします。 対象読者は フロントエンド開発の知識がある(JSやCSSのコンパイル等) npmを用いた開発フローをある程度知っている Vue.jsの名前くらいは知っている 最近のJavascriptがある程度書ける くらいの人を想定しています。 #つくるものこのチュートリアルでは、Vue.jsを使ったカウンターアプリを作ります。 JSファイルのビルドにはWebpackを、各
はじめに — Vue.js
最終更新日: 2020年11月7日 Vue.js とは？Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。 あなたが Vue についてもっと深く学ぶ前に概要を知りたいのなら、中核となる原則とサンプルプロジェクトを元に説明するビデオを作成しているので、それを見るとよいでしょう。 あなたが経験豊富なフロントエ
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue CLI UIが想像以上に便利だった話 - Qiita
Vue CLI
(vue.js) inputフォームの初期値(value属性)を、vueのdataの内容にしたい
【Vue.js】コンポーネントのtemplateの書き方まとめ - Qiita