読者です 読者をやめる 読者になる 読者になる

MotomichiWorksBlog

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

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その0013 兄弟にあたるオブジェクトが発したイベントをリスニングする(兄弟にイベントを伝搬する)$broadcast

参考にさせて頂いたページ Instance Methods - vue.js バージョン Vue.js v0.11.5 参考にした過去記事と$broadcast vue.jsその0012 インスタンスの親子関係 $parent - MOTOMICHI WORKS BLOGで$parentとか_children[0]とか_children[1]について書きました。 v…

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

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

vue.jsその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その0010 チェックボックスをチェックしたら or テキストフォームに一文字でも入ったらボタンを有効化する

参考にさせて頂いたページ Vue.jsでチェックされたら or 入力されたら送信可能にするボタンを実装する方法 | tech.ewdev.info バージョン Vue.js v0.11.5 v-attrの中に条件式を入れられる v-attrは <button v-attr="disabled: !agree">Submit</button> とか <button v-attr="disabled: textValue == ''">Submit</button> みたいな感じで、条件式がtrueのときdi…

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

参考にさせて頂いたページ Options - vue.js バージョン 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その0008 Component Systemを使用して、html要素のコンポーネントを作る

参考にさせて頂いたページ vue,jsについて Component System - vue.js 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita Custom Elementsについて Custom Elements: HTML に新しい要素を定義する - HTML5 Rocks バージョン Vue.js v0.11.…

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

参考にさせて頂いたページ Instance Methods - vue.js 体で覚えるVue.js - インスタンスメンバ編 〜 JSおくのほそ道 #024 - Qiita 体で覚えるVue.js - ViewModel生成編 〜 JSおくのほそ道 #022 - Qiita バージョン Vue.js v0.11.5 サンプルソース <div id="sample"> <p v-on="click:hoge">click here</p></div>…

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

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

vue.jsその0005 Optionsについて

参考にさせて頂いたページ Options - vue.js バージョン Vue.js v0.11.5 オプションを渡してインスタンスを初期化 インスタンスを初期化する際にどのようなオプションを渡すかを今回は書いていきます。 例として以下のような感じでelやdataなどのオプション…

vue.jsその0004 Directivesについて

参考にさせて頂いたページ Directives - vue.js Directives - vue.js 体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023 - Qiita バージョン Vue.js v0.11.5 概要・書式 Directives - vue.js によると基本的に以下のような感じに書くとのことで <element prefix-directiveId="[argument:] expression [| filters...]"> </element>…

vue.jsその0003 インスタンス初期化後にdataのプロパティを追加または削除する($addと$delete)

参考にさせて頂いたページ お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (2/4):CodeZine Options - vue.js 参考ページを元にdataのaプロパティを出力してみた vue_sample.htmlの記述内容 messageだったところをaに変更した。 <div id="demo"></div>…

vue.jsその0002 text, unescapedText, onetimeText (Mustache Bindings)

参考にさせて頂いたページ yyx990803/vue · GitHub Getting Started - vue.js お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (2/4):CodeZine バージョン Vue.js v0.11.5 sample_vue.jsの記述内容 messageに格納する文字列にdi…

vue.jsその0001 vue.jsのダウンロードとデモをやってみる

参考にさせて頂いたページ vue.js yyx990803/vue · GitHub お手軽データバインディングライブラリ「Vue.js」を使いこなそう(基礎編) (1/4):CodeZine バージョン Vue.js v0.11.5 ダウンロードして、読み込む GitHubのページから、vue-master.zipをダウン…