Category "Vue.js"を表示しています。
2019.5.13 月
Vue.jsの醍醐味は双方向バインドを簡単にできるところ。vueで設定したモデル(変数や配列)に変更を加えるというところで、なかなかまとめているサイトがなかったのでまとめてみました。 create (insert) read update delete create html <!--html--> <div id="todoList"> <form> <input type="text" v-model="newItem"> <button v-on:click="createItem">Create</button> </form> ... js new Vue({ el: '#todoList', da...
2018.9.20 木
プロジェクトを作成する 直接vue.jsをダウンロードして読み込む方法もありますがnpmで管理した方が楽です。 vueを使うディレクトリの作成。ここではPROJECT_DIR mkdir -m 755 PROJECT_DIR cd PROJECT_DIR node.jsのバージョンの確認 node -v v9.2.0 vueをnpmでインストールする npm install vue@csp これで準備は完了です。 ソースを書く <!DOCTYPE html> <html> <head> <script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></sc...
2018.5.23 水
Vueを使うと普通にコーディングしている限りではjQueryが用なしになってしまいます。jQueryで必要になるのはAjaxぐらいの機能しかなく、それだけの機能のためにjQueryを使うのもなになので、Ajaxは別のエージェントを使うことに自然となってくるわけです。SuperAgentとaxiosで迷うところなのですがFrontのエンジニアに聞いてみたところ、 axios => コーラ SuperAgent => ペプシ・コーラ なのだそうなので、ここではあえてaxiosを使います。 axiosのインストールとセットアップ npmで入れると楽。 npm install --save-dev axios axios@0.18.0が入りました。 Get jsonを取得するだけだったら...
2018.5.23 水
https://jp.vuejs.org/ Vue.jsを触ってみました。Documentがしっかりしているのでほとんど何も準備はいらないです。 Hello Vue! html <div id="app"> {{ message }} </div> vue var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); Hello Vue!が表示されます。 Bladeとの競合 phpのテンプレートエンジンのblade(主にLaravel)ではvueと同じ{{foo}}という使い方に近いかたちで{{$foo}}を使います。全く質の異なるものですが、同じ記号を使うことで競合しPHPの方でエラーが出てし...