Vue.jsとは？

https://lab.aratana.jp/entry/2017/12/09/000000
↑参考資料

jQueryは少し触ったことがありますが、動きをつけたい部分にちょこっと使用していただけのため、そこまでJavaScriptに詳しいわけでもなく....。

本当に漠然とした理解なのですが、動きをつけたい部分をそれぞれコンポーネントとして分けて記載し、それをhtmlで記載した部分の骨組みの中で呼び出して使用するという感じでしょうか。
今回はすべてVue.jsでの実装になるので混乱していますが、パーツ利用だともう少し理解しやすいのかなーと思ったり。
知識的にはほぼない状態のスタートなのではやく慣れていきたいです。

よく出てくるメソッドのメモ

v-bind 属性を反映する

下記（HTML側）は、この要素のclass属性を、VueインスタンスのisActiveプロパティによって更新して保存するという処理になっている。


//例） HTML側。この場合、isActiveが真偽値となっており、trueだとactiveクラスが生成される。
<div class="app">
  <div v-bind:class="{ active: isActive }"></div>
</div>

//例）　js側
new Vue({
  el: 'app',
  data: {
    isActive: true
  }
});

v-for(htmlとjsにそれぞれの記載が必要)　配列の繰り返しを扱う


//例） HTML側。listsという配列の入ったメソッドを、listというメソッドに代入して繰り返し処理
<div id="app2">
  <li v-for="list in lists" :key="list.id">
    {{ list.name }}
  <li>
</div>

//例）　js側
var vueApp= new Vue({
  el: '#app2',
  data: {
    lists: [
      { name: 'Vue.js' },
      { name: 'Angular.js' },
      { name: 'React' }
    ]
  }
});

vueApp.lists.push({ name: 'Nuxt.js'})
//この記載でvueAppの中の配列listsにname:'Nuxt.js'を追加できる。

v-model(htmlとjsに) 入力を反映する

//例） HTML側
<div id="app4">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

//例） js側
new Vue({
  el: '#app4',
  data: {
    message: 'Hello Vue!'
  }
})

local-strageとは？？

Cookieとかsessionみたいなもの。
検索機能つけるときに。
https://qiita.com/RunEagler/items/4496161d3b709659a897