2019/05/06
疲れを取るのに丸二日必要なのしんどいな。 でも楽しかった。
Vue.jsチュートリアル
- 初心者に
vue-cliはおすすめしないらしい（特に、Node.js ベースのツールについてまだ詳しくない場合）。 vue-cliってなんだ
Vue.js を vue-cli を使ってシンプルにはじめてみる - Qiita
FN1807001 | Vue CLI 3入門 01: Vue CLIとは | HTML5 : テクニカルノート
Vue CLIは、 Vue.jsの開発を手早く進めるためのシステムです。 つぎのような機能が備わっています。 Vue CLIが目指すのは、Vueエコシステムを支える標準ツールです。 さまざまなビルドツールを適切なデフォルトのもとで円滑に統合し、設定にわずらわされずに、すぐにアプリケーションがつくりはじめられます。
- idが
appのdivに{{ message }}でdataのmessageの値が表示されている。 app.messageで値にアクセスできる。consoleで値を変更できる。
ディレクティブ
v-bind属性はディレクティブ。DOMにリアクティブな振る舞いを与える。app2.messageでアクセスし、値の変更等ができる。
v-if
- テキストをデータに束縛できるだけではなく、DOMの構造にデータを束縛できることを示している。
- 要素が更新などされたとき、自動的にトランジションエフェクト（繊維効果）を適用できる ？？？？？？？？
v-on
methods内でreverseMessageを定義。イベントリスナv-on:clickに設定。reverseMessage内ではDOM操作を行っていない。アプリケーションの状態の更新のみを行っている。dataのmessageの値のみを更新しているということ。- すべてのDOM操作はVueにまかせている。→？？？？？？
- 背後のロジックを書くのに集中できる。
v-model
- 入力とアプリケーションの状態の双方向バインディングが行える
htmlタグの展開
div#app-6>p>inputで
<div id="app-6">
<p><input type="text"></p>
</div>
が展開されるやつなんていうんだっけ。これ便利だからやり方しらべよ。 ほんとうはこうなってほしい↓。
<div id="app-6">
<p></p>
<input>
</div>
