2019-07-01から1ヶ月間の記事一覧
webpack + babelでの開発環境に加えて、eslint + prettierの設定まで。 パッケージのインストール react + react-dom npm install react react-dom ちなみにreact-domはreactをDOM向けにコンパイルするパッケージで、 DOM以外の環境などにコンパイルする際に…
チェックボックス、ラジオボタン、複数セレクト、テキスト入力など。 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…
