Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vuejs

vuex2.xその0005 namespaced:trueにしたmodule用のオブジェクト構造をひとつ定義して使いまわす

参考にさせて頂いたページ モジュール · GitBook はじめに namespaced:trueにプロパティ設定したオブジェクトをstore.registerModule()で複数回登録します。 ひとつのmodule用オブジェクト、ひとつのcomponent用オブジェクトを使いまわしできるようにしてみ…

vuex2.xその0004 modulesによるstoreの分割と、mapGetters()でmoduleを跨いだgettersやstateの参照をしやすくする

参考にさせて頂いたページ モジュール · GitBook ゲッター · GitBook はじめに babelは使用せずに、Chromeで動作確認をしています。 参考ページのmapGetters()のサンプルで、オブジェクトのスプレッド演算子(Spread Operator)が使用されていますが、エラー…

vuex2.xその0003 vuex入門的な感じでToDo管理アプリケーションを作る

参考にさせて頂いたページ Vue.js + vuexによるToDoアプリケーションの実装 : アシアルブログ Vuex 入門 · GitBook はじめに APIにリクエストする非同期な処理を想定して、actionsからcommitしています。 実際にAPIとか作ったらもう少し違う実装が適切かもし…

vuex2.xその0002 mapStateのこと

参考にさせて頂いたページ ステート · GitBook はじめに storeを複数使うような規模のものを書いていないのでmapStateはまだ自分には必要なさそうですが、少し書いてみました。 サンプルソースコード こんな感じかなー。と書いてみました。 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8"> <title></title> <meta name="description" content=""> </meta></meta></meta></head></html>

vuex2.xその0001 公式ドキュメントにあるカウンターアプリを作ってみる

参考にさせて頂いたページ 公式ドキュメント Vuex 入門 · GitBook ソースコード Edit fiddle - JSFiddle はじめに 色々な事情でwebpackなどを使用できない環境下でスタンドアローンビルドのvuexを使用するような想定で書いています。 サンプルソースコード …

vue.js 2.x その0003-02 トランジション開始前、進行中、完了後、途中キャンセルのタイミングで任意のjs処理を実行する

参考にさせて頂いたページ 公式ページ トランジション効果 - Vue.js 以前書いた記事 vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる - Motomichi Works Blog はじめに 以前簡単なトランジションのサンプルを作…

vue.js 2.x その0009 watchで配列(array)や連想配列(object)を監視する

参考にさせて頂いたページ vue.js $watch array of objects - Stack Overflow Vue.js tips - $watch を使ってデータの変更を監視しよう | phiary サンプルコード 連想配列のObjectを丸ごと監視したい場合は、処理はhandler: function(){},の方に記述して、de…

vue.js 2.x その0008 テキストフィールドに数字だけ入力を許可する (郵便番号フィールド)

参考にさせて頂いたページ HTML5におけるinput要素のpattern、type属性のおさらい - Qiita サンプルソース 以下のように書いてみました。 <div id="vue-app"> <h1>Vue.jsのサンプル 静的なページ</h1> <input type="text" v-model="postcode1"> - <input type="text" v-model="postcode2"> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: '…

vue.js 2.x その0007 v-forのindexを使って連番のclassを付与する

参考にさせて頂いたページ vue.js, simple v-for / v-bind to add index to class name - Stack Overflow クラスとスタイルのバインディング - Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <ul> <li v-for="(item, index) in items" v-bind:class="['hoge-' + index]"> {{item}} </li> </ul> </div> <script src="js/vue.js"></script> <script> …

vue.js 2.x その0006 refで要素を参照する

参考にさせて頂いたページ Vue.js サンプルコード 以下のように書いてみました。 <div id="vue-app"> <button v-on:click="clicked">click here</button> <div> <my-component ref="hogeElm" /> </div> <div ref="fooElm"> foo<br>foo </div> </div> <script src="js/vue.js"></script> <script> new Vue({ el: '#vue-app', data: { }, components: { 'my-com…

vue.js 2.x その0005 lodashのdebounce()とthrottle()で処理の実行を遅らせる

参考にさせて頂いたページ 公式チュートリアルから始めるVue.js vol.1「Markdown エディタ」 - to-R Media Vue 1.x からの移行 - Vue.js Markdown エディタ - Vue.js lodashの_.throttleと_.debounceの使用例 - Qiita はじめに vue.jsの0.xと1.xではdebounce…

vue.js 2.x その0004 アコーディオンを作る(jQueryのslideToggleみたいなものを作る)

サンプルコード(v-forで出力した要素にそれぞれ) v-forで出力した要素それぞれにアコーディオンを入れるイメージで、以下のように書いてみました。 <style> .accordion{} .accordion__trigger{} .accordion__contents-outer-wrap{ transition: max-height 2s; max-h</style>…

vue.js 2.x その0003-01 トランジション効果 簡単なフェードインとフェードアウトをやってみる

参考にさせて頂いたページ transitionについて トランジション効果 - Vue.js 動的コンポーネントについて コンポーネント - Vue.js サンプルコード 以下のような感じで書いてみました。 <style> .hoge-enter-active, .hoge-leave-active { transition: opacity 2s }</style>…

vue.js 2.x その0002 v-forで表示しているリストの並べ替え

参考にさせていただいたページ sortについて JavaScript つい忘れてしまう配列のソート方法 - Qiita v-forについて リストレンダリング - Vue.js ソースコードサンプル すごく適当にデータを用意して、以下のように書いてみました。 <div id="sort-app"> <h1>Vue.jsの練習 静的なペ</h1></div>…

vue.js 2.x その0001 カスタムフィルタ(Custom Filters)を登録する基本サンプル

参考にさせて頂いたページ カスタムフィルタ - vue.js Vue 1.x からの移行 - Vue.js Vue.js 2.xのフィルタについて調べてみた - Qiita ソースコードサンプル1 ソースコードサンプルは以下の通り。 <div id="filter-app"> <input type="text" v-model="message"> <div>{{message | reverse}}</div> </div> <script src="js/vue.js"></script> <script> Vue.filter('reverse',…

webpackを使ってES2015、Vue.jsのビルド環境を構築する

参考にさせて頂いたページ webpackのすごく基本 webpack で始めるイマドキのフロントエンド開発 - Qiita 以前書いたReact.jsの記事 webpackを使ってES2015、React.jsのビルド環境を構築する - Motomichi Works Blog Vue.jsでの記述例について vue.js + webpa…

vue.js 1.0 その0003 vue-resourceを使ってajax通信をする

参考にさせて頂いたページ GitHub - vuejs/vue-resource: Resource component for Vue.js 今回使用しているバージョン vue-resource 0.7.0 ダウンロード vue-resource.jsをダウンロードします。 サンプル GitHubにある公式ページのドキュメントを参考に書い…

vue.js 1.0 その0002-001 公式ドキュメントを読む(API編) 自分用インデックス

参考にさせて頂いたページ vue.js はじめに 公式ドキュメントを見ただけだとすぐに理解できない所がまだあるので、自分で復習しやすいように自分の個別記事へのリンクを付けたりしてみます。 ちなみに2016年2月16日現在の最新v1.0.16についてです。 インデッ…

vue.js 1.0 その0001-004 算出プロパティ computed

参考にさせて頂いたページ 算出プロパティ - vue.js getterだけの場合 サンプルコード <div id="app"> ファーストネーム : <input type="text" v-model="firstName"> ラストネーム : <input type="text" v-model="lastName"> <span>フルネーム : {{ fullName }}</span> </div>

vue.js 1.0 その0001-003 フォーム入力バインディング select要素

参考にさせて頂いたページ フォーム入力バインディング - vue.js プルダウンに表示されている文字列をバインディングする例 option要素にvalue属性を設定していない場合は、表示されている文字列がそのままバインディングされます。 <div id="app"> <select v-model="aaa"> <option selected>ラベル1</option> <option>ラベル2</option> <option>ラベ</option></select></div>…

vue.js 1.0 その0001-002 コンポーネント 単一スロット、名前付きスロット

参考にさせて頂いたページ コンポーネント - vue.js コンポーネント - vue.js サンプルコード <div id="app"> <my-component> <p>スロットタグの位置に挿入されるタグ</p> <p>スロットタグの位置に挿入されるタグ</p> <p>スロットタグの位置に挿入されるタグ</p> </my-component> <my-component-multiple> <p slot="aaa">slot属性付きだと、components内のslotタグ</p></my-component-multiple></div>…

vue.js 1.0 その0001-001 公式ドキュメントを読む(ガイド編) 自分用インデックス

参考にさせて頂いたページ vue.js はじめに 公式ドキュメントのガイドを見返すときに、「あれはどこに書いてあったかなー?」というのが、左カラムの大きい見出しだけ見てもまだよくわからなかったりするので、小さい見出しを展開したうえで少し要約して、と…

vue.js 0.11.x その0013 兄弟にあたるオブジェクトが発したイベントをリスニングする(兄弟にイベントを伝搬する)$broadcast

参考にさせて頂いたページ http://vuejs.org/api/instance-methods.html バージョン Vue.js v0.11.5 参考にした過去記事と$broadcast vue.jsその0012 インスタンスの親子関係 $parent - Motomichi Works Blogで$parentとか_children[0]とか_children[1]につ…

vue.js 0.11.x その0012 インスタンスの親子関係 $parent

参考にさせて頂いたページ Redirecting... 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita Vue.js v0.11の変更点(予定)まとめ - blog.koba04.com バージョン Vue.js v0.11.5 サンプルソース Redirecting... にならって、以下のよ…

vue.js 0.11.x その0011 Vue.component()で登録したcomponentを入れ子にする

バージョン Vue.js v0.11.5 今回やってみたこと vue.jsその0008 Component Systemを使用して、html要素のコンポーネントを作る - Motomichi Works Blog vue.jsその0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する - Motomichi Wo…

vue.js 0.11.x その0010 チェックボックスをチェックしたら or テキストフォームに一文字でも入ったらボタンを有効化する

参考にさせて頂いたページ http://tech.ewdev.info/2014/02/1615/ バージョン Vue.js v0.11.5 v-attrの中に条件式を入れられる v-attrは <button v-attr="disabled: !agree">Submit</button> とか <button v-attr="disabled: textValue == ''">Submit</button> みたいな感じで、条件式がtrueのときdisabled属性が付くという事ができるんですね。

vue.js 0.11.x その0009 Vue.component()で登録したcomponentにparamAttributesで属性を付与する

参考にさせて頂いたページ http://vuejs.org/api/options.html#paramAttributes バージョン Vue.js v0.11.5 サンプルソース(属性を適用する) 例えば<hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge>みたいな感じで普通に属性を付ければ付く <div id="sample"> <hoge-hoge class="aaaaa" hoge="bbbbb"></hoge-hoge> <p v-component="hoge-hoge" class="ccccc" hoge="ddddd"></p></div>

vue.js 0.11.x その0008 Component Systemを使用して、html要素のコンポーネントを作る

参考にさせて頂いたページ vue,jsについて Redirecting... 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita Custom Elementsについて http://www.html5rocks.com/ja/tutorials/webcomponents/customelements/ バージョン Vue.js v0.11.5…

vue.js 0.11.x その0007 イベントリスニングの開始と任意のタイミングでイベントを発生させる方法

参考にさせて頂いたページ http://vuejs.org/api/instance-methods.html#Events 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita バージョン Vue.js v0.11.5 …

vue.js 0.11.x その0006 Instance Propertiesについて

参考にさせて頂いたページ http://vuejs.org/api/instance-properties.html 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita バージョン Vue.js v0.11.5 Instance Properties var vm = new Vue({/* Options */}); みたいな感じでイ…