vue
Nuxt.jsはVue.jsアプリケーションを作成するためのフレームワーク。 Nuxt.jsを使うことによって、トップノッチなテクノロジーを素早く、簡単に、整理された状態で導入することができる。 Nuxt.jsの主要な3つの機能としては、以下がある。 SSR (サーバーサイ…
一般的なVueコンポーネントの書き方は、オブジェクト志向でclassコンポーネントに慣れている人にとっては特殊な書き方である面が大きいだろう。 vue-class-componentを導入すれば、classスタイルなVueコンポーネントが書ける。 vue-class-componentの特徴 me…
チェックボックス、ラジオボタン、複数セレクト、テキスト入力など。 inputs.vue <template> <div id="app"> <h4>Check Boxes</h4> <input type="checkbox" id="checkbox" v-model="checked" /> <label for="checkbox">This box is {{ checked ? 'checked' : 'unchecked' }}</label> <hr /> <h4>Radio Buttons</h4> </hr></div></template>
たまに見返したいので。dark.min.cssは下記のものを使用。 github.com tobuy.vue <template> <div> <h1>Vue tobuy list</h1> <form @submit.prevent="addItem" autocomplete="off"> <input type="text" v-model="itemToAdd" @keypress.enter="addItem" /> <button>{{ buttonText }}</button> </form> </div></template>
フォームの初期状態 下記のようなファイル構成。 . ├── app.js └── index.html index.html <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue form validation</title> </meta></meta></meta></head></html>
rapid prototyping setup VueのSFC (Single File Component) で軽く何かを試したいとき、いちいちvue-cliを使うのは面倒。 そこでvue-cliの一部機能であるcli-service-globalを使うことで、rapid prototypingができて便利。 vue-cliのインストール まずはVue…
