diadia

興味があることをやってみる。自分のメモを残しておきます。

Vue.jsの最初のメモ

Javascript vue.js

内容

  1. ドキュメント
  2. 基本的な使い方
  3. vueの内容の書き方

1.ドキュメント

https://jp.vuejs.org/

2.基本的な使い方

HTMLとjavasciptのパートがあり、それを書けばvue.jsを書いたことになると現状認識している。

HTMLで書くこと

https://jsfiddle.net/5grs0976/1/
上記のコードのように、HTMLではscriptタグにVue.jsを使う旨を記述する。これはjQueryやBootstrapを使う際の記述するのと同じだから特に難しいことはない。 今回は以下のものを記述する。これはvue.jsの公式サイトに書いてあるのでそれを拾ってくると良い。
https://jp.vuejs.org/v2/guide/

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js></script>

そして反映したい内容を記述する。

https://jp.vuejs.org/v2/guide/

<p id="vm">
{{ message }}
</p>

反映したい内容は上記のように{{ }}を通して表示する。この方式はdjangoのテンプレートシステムに似ている。{{}} を使う際には条件があり、テキストコンテンツに限定されるらしい。

JavaScript

vueの内容を書く。

3.vueの内容の書き方

インスタンスの生成

javascriptのフレームワークであるvueのインスタンスの生成は以下のように行う。インスタンスの引数として連想配列を渡すことになる。 今回は空の連想配列を引数としているが、キーとしてel, dataなどたくさんありキーがvueの動作を決定している。

var vm  = new Vue({})
#ちなみにjavascriptArrayインスタンスの作成方法は以下の通り。
var lst = new Array("電気代","水道代","wifi料金");