VeeValidateを使ってVueアプリでバリデーションをする - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
【Vue.js】知識ゼロから１日全力でVue.jsを勉強してみた【オススメ資料まとめ】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2019.09.12 追記 後日談を書きました(外部ブログ) 結局、ど初心者が1日でVue.jsを学ぶとどこまで理解できるの？ – 過去企画を振り返ります Vue.js 1 Day BootCamp! みなさま、こんにちは！どんぶらっこ(@don-bu-rakko)です。 今私が通っているプログラミングスクールでは周囲がVue.jsをどんどん学び始めています。その結果、仲間の話している内容がわからなくなって辛い毎日を過ごしているわけです。 こんな状態はいかん！ ということで、私もVue.jsを本腰入れて学習することを決意しました。 しか
Vue.jsまとめ【初心者】 - Qiita
概要 Vue.jsを初めて触る人に向けたサンプルと解説です。 React.jsと比較する形で書いています。 Vue.jsとは 原作者であるEvan You氏が中心となって開発中の、Javascriptフレームワークです。 日本語の公式サイトがあるため、初心者にもかなり分かりやすいです。 Vue.js 環境構築 vue-cliというコマンドラインツールが主流です。 Vue CLI 単一ファイルコンポーネント VueはReactと同じく、パーツ単位でHTMLをまとめるコンポーネント指向ですが、.vue拡張子の単一ファイルコンポーネントによって、その「パーツを構成するために必要な HTML・CSS・JSをひとまとめに」して独立した1つのファイルで扱うことができます。 それぞれ<template>、<script>、<style>が担当します。 <template> <div class="say
Vue.jsを100時間勉強して分かったこと - Qiita
Vue.jsを100時間ほど勉強して分かったことを整理します。 勉強時間の内訳は、 Udemyの Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) をだいたい全て完了（85時間） 実際に自分でコードを書いてみた（15時間） です。 学習開始時のレベルは、JavaScript・jQueryはそれなりに扱うことができ、過去に少しだけReactを勉強したことがある感じでした（専門は Ruby on Rails）。 Vue.js 自体の構文 まず、Vue.js 自体の基本的な構文を整理します。 Vue インスタンス Vue インスタンスの書き方は次のような感じです。 new Vue({ el: "#app", data: { name: "Kei", age: "30", counter: 0 }, methods: { increas
Vue.js「コンポーネント」入門 - Qiita
はじめに Vue.jsの「コンポーネント」をなんとなく理解できたので、まとめてみました。 Vue.jsの初歩的な知識はある前提です。 この辺↓が分かっていればとりあえずOKかと。 5分でわかるVue.js基礎の基礎 環境 Vue CLIを使います。 使ったことない方はインストールをお願いします。 ※参考：Vue CLI スタートガイド プロジェクトを立ち上げるとこんな感じの構成でファイルが作られていると思います。 基本的に編集していくのはApp.vueとcomponentsフォルダです。それ以外はデフォルトのまま触らなくて大丈夫です。 ターミナルで を実行すると開発用サーバが立ちます。 その状態でhttp://localhost:8080/にアクセスすると、下のような画面が表示されます。 vueファイルに変更を加えると、その変更内容がこのページに即座に反映されます。 試しにApp.vueの
最新のVue3.0でウェブ開発はどう変わるか？ - Qiita
こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ
ライブラリ不要！Vue.jsとSVGで簡単に動かせるUIを作る - Qiita
はじめに Vue.jsを普段開発で使っていて、SVGとの相性がすごく良いと感じてます。 Vue.jsのドキュメントでもアニメーションなどの紹介もされていますが、 今回はブラウザで編集可能なGUIの土台として、 使えそうなTipsを書いていきたいと思います。 Vue.jsのプロジェクトを作成していく 今回使っていくのはVueCLI v3.xの環境で開発していきます。 標準でプロジェクト作成のUIなども付いており、非常に開発しやすいです。 SVG内でズーム・パン風の機能を実装してみる 早速ですが、SVG内でズーム・パン風の機能を作って見たいと思います。 下記のような感じになります。 （MacBookProなどのノートPCですと二本指で開いてズームしたり、 二本指でスライドして、移動したりして、操作が実感しやすいと思います。） コードで実際に実装するとこのような形です。 移動の場合は差分値分移動
これからVueを勉強しようと思っている人への道しるべ（勉強方法）を書く - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンドに興味があって、Vueをやってみたい...!という人、きっと多いかと思います。（きっと、きっとね） ただ、どうやってVueを勉強し始めればいいのかわからない、という人もまた多いはず。Javascript自体あんまり触ったことないし...って人もいると思います。 そこで、これからVueを新たに勉強する人向けに、何を、どの順番で勉強すればいいのかの道しるべ的なものを書いていきます。 対象読者はこんな感じ。 ・RubyやPHPはよく書くけど、Javascriptあんまよくわからない ・jQueryチョット書ける ぜひ参考にしても
【Vue.js】Web API通信のデザインパターン (個人的ベストプラクティス) - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに Vue.jsを使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモ
Vue.js おすすめライブラリ 21選（おまけ+1） - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どーも、8ビットエンジニアです。 今更感はいなめませんが、まとめます。 対象者 ・これからVue.jsを勉強する人 ・Vue.jsに興味がある人 ・npm or yarn をある程度理解している人 機能側 1. vue-chartjs vue-chartjsはvueのChart.jsのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。 デモ 公式ドキュメント 2. vue-fa Vue.js で使用するアイコンですね。 FontAwesome5 を使用しています。 公式ドキュメント 3. vee-validate
Vue.jsメモ：属性、ループ内呼び出し、など - Qiita
Vue.js勉強したメモ。 まずはVue.jsのサイトにあるガイドの「はじめに」をコピペでテスト。そこからちょっとずつ変更を加えていって学んだこと。バージョンはVue.js v2.3.3です。 学んだこと： 例の{{ }}はMustache（ムスターシュ）記法と呼ぶ。 MustacheはHTMLアトリビュート（属性）には使えない。 ループ内からメソッド呼び出しは、わかってしまえば簡単。 クラスの動的変更の便利な方法。 参考ページ： Vue.jsオフィシャルページ：はじめに Qiitaの記事：Vue.jsから手軽に始めるJavaScriptフレームワーク コード（HTMLとJavaScript） <div id="project-list"> active project: {{ active }} <ul> <li v-for="project in projects" v-bind:cl
vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 - Qiita
Vuexについて、とりあえず必要ないしなんだか分かりづらいからと使わないでいたのですが、 この度いざ使ってみたところ、最初こそ引っかかるもののの、結構すんなりはいってきました。 ただ、この「最初こそ引っかかる」部分ができる人にとっては些細すぎるし、 引っかかって躓いてしまう人にとっては大変な部分だと思うので、 コードのどことどこに関連があるのか図解してみようと思います。 まずは、よくVuexの説明ででてくるこのイラストを見てほしいのですが、 私は一度にたくさんの要素が出てきすぎてしまって、一旦理解するのを後回しにしていました。 しかし、順を追っていけばそんなに難しくなさそうなので、この記事を書いてみました。 実際にシンプルなカウンタを作ってみたので、このコードを図解してみましょう。 サンプルコード コンポーネントとストアのサンプルコードは下記になります。 <template> <div i
LaravelからVue.jsを使う最短レシピ - Qiita
以下古い情報です この記事は2018年3月に書かれた記事で、Laravel5.4をベースに記載しています。 （執筆時点では2020年4月ですが）今からこの手順通りにはできませんので、こちらの記事に移動してください。 Laravel7からVue.jsを使う最短レシピ - Qiita Laravel から最短でVue.jsを使う インストールから動かして本番投入まで一通りっていうのが見つからなかったのでまとめてみる。 知らないとわかんないよそんなの！みたいな罠がそこかしこに。 TL;DR bladeテンプレートの修正とコマンドをいくつか実行すれば使える bladeのいじるとこ クローンしたら割りといい感じになるリポジトリつくった fruitriin/laravel-vue-example 今回の環境 macOS High Sierra PHP 7.2 (composerがインストールされている
Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。
サーバレスアプリ開発をjQueryでがんばらないためのVue.js - Qiita
サーバレス構成のWebアプリ開発を担当し、そこでVue.jsを使ってみたので採用した経緯と、Vue.jsの何を使ったかを紹介する。 これまでのWebアプリ開発 JavaのWebアプリ開発ならThymeleafやFreemarkerなどのテンプレートエンジンを使用していた。 サーバレスだと、HTMLとJavaScriptで表示の処理を行うため、JavaScriptの処理が増える。 よく使われるのはjQueryによってDOMを操作し、HTMLを動的に変更する方法だろう。 jQueryのDOM操作は辛いよ jQueryを使ったことがあればお分かりだと思うが、jQueryによるDOM操作は「このイベントで、このvalueがxxxなら、このDOMを変更する」という手続き型のコードになる。 JavaScriptの処理が増えると、この手続き型のコードが増えてデータと状態の管理が煩雑になる。 また、Jav
Vue.js ( Nuxt.js ) でアニメーションやってみたら最高だった話。 - Qiita
Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか？ 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし！Vue.jsのデータ駆動と
Vue.js用テストライブラリ「avoriaz」入門 - Qiita
背景 Vue.js本家からは公式のテストライブラリは提供されておらず、非公式でvue-test, avoriaz, vue-testing, revue, vue-unit等が公開されています。それらの中で一番Star数が多いavoriazついて調査した内容をまとめます。 前提 Karma + Mocha + Chaiを利用する 以下のHelloコンポーネントをテスト対象とする <template> <div id="hello"> <img src="http://vuejs.org/images/logo.png"> <h1>{{ msg }}</h1> <h2 class="subtitle">Essential Links</h2> <h2>Ecosystem</h2> <h3>nickname: {{ user.nickname }}</h3> </div> </template
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件 - Qiita
Vue + Laravel + Bootstrap でページネーション付きテーブルを作成する - Qiita
Laravel5.7でVueを利用した開発をしてみる - Qiita