Vue.js備忘録 （その1）

<!-- Vue 2 開発バージョン、便利なコンソールの警告が含まれています -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- Vue 2 本番バージョン、サイズと速度のために最適化されています -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<!--Vue 3 -->
<script src="https://unpkg.com/vue@next"></script>

<!-- id="app"のdiv要素内をVue.jsが制御します -->
<div id="app">
   <p>{{ message }}</p>
</div>

<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello'
}
})
</script>

<!-- id="app"のdiv要素内でVue.jsが使えます -->
<div id="app">
   <p>{{ message }}</p>
</div>

<script>
const app = Vue.createApp({
//dataオプション
  data: () => ({
    message: 'Hello'
  })
})
//マウントする
app.mount('#app')
</script>

//dataにアロー関数を使わなかった場合
data: function() {
 return {
 message: 'Hello'
    }
 } 
//省略した書き方
data() {
 return {
 message: 'Hello'
    }
 } 

//数値・配列・オブジェクトの例
data: () => ({
    message: 'Hello',
    count: 10,
    user: {
      name: '花子',
      age: 20,
    },
    colors: ['Red', 'Green', 'Yellow']
  })
})

watch: {
 監視対象: function (newVal, oldVal) {
 　　　//実行したい内容
    },
  }
});

//watchで書きた時
data: () => ({
    firstName: '',
    lastName: '',
    fullName: ''
  }),
  watch: {
    firstName: function(value) {
      this.fullName = value + ' ' + this.lastName
    },
    lastName: function(value) {
      this.fullName = this.firstName + ' ' + value
    }
  }
})
//computedで書いた時
data: () => ({
    firstName: '',
    lastName: ''
  }),
computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

watch: {
    プロパティ名: {
      handler: function() {
         // プロパティ名のオブジェクトが変更された時の処理をここに記述
      },
      deep: true
   }	
 }

mounted() {
  this.$nextTick(function () {
    // レンダリング後に実行したいコード
  })
}

<!-- id="app"のdiv要素の中を編集 -->
<div id="app">
    <input type="text" v-bind:value="message">
</div>

<div id="app">
    <input type="text" v-model="message">
　　 <p>{{ message }}</p>
</div>

<div id="app">
  <span v-if="toggle">Hello</span>
</div>

const app = Vue.createApp({
  data: () => ({
//toggleがfalseの時に、Helloは消えます
    toggle: true
  })
})
app.mount('#app')

<div id="app">
    <button v-on:click="toggle = !toggle">クリック</button>
<!-- 適用したい要素をtransitionタグで囲みます -->
<!-- name="fade"　fadeはCSSのプレフィックス（先頭の文字）です -->
    <transition name="fade">
      <p v-show="toggle">Hello</p>
    </transition>
  </div>

const app = Vue.createApp({
  data: () => ({
    toggle: true
  }),
})
app.mount('#app')

/*transitionタグのname属性のプレフィックスfade-がついています*/
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

<div id="app">
  <ul>
    <li v-for="color in colors">{{ color }}</li>
  </ul>
</div>

const app = Vue.createApp({
  data: () => ({
     colors: ['Red', 'Green', 'Yellow']
  })
})
app.mount('#app')

<div id="app">
  <ul>
    <li v-for="(value, key) in colors">
      {{ key }}: {{ value }}
    </li>
  </ul>
</div>

const app = Vue.createApp({
 data: () => ({
    colors: {
       red: '赤色',
      green: '緑色',
      yellow: '黄色'
    }
  })
})
app.mount('#app')

<div v-for="item in items" v-bind:key="item.id">
  <!-- content -->
</div>

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

<div id="app">
  <button v-on:click="onClick">クリック</button>
  <p>{{ message }}</p>
</div>

<script>
const app = Vue.createApp({
 data: () => ({
    message: 'Hello'
  }),
//methodsにonClick関数を定義、thisはdataオブジェクトのこと
 methods: {
    onClick: function() {
      this.message='Good bye'
    }
  }
}).mount('#app')
</script>

<div v-cloak>
  {{ message }}
</div>

[v-cloak] {
  display: none;
}

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>
<div v-on:click="toggle = !toggle"></div>

<!-- これはNG 文です -->
{{ var a = 1 }}

<!-- これはNG　フロー制御はいずれも動作しません　三項演算子を使用します -->
{{ if (ok) { return message } }}

<button v-on:[eventName]=""> ... </button>

<!-- id="app"のdiv要素内がレンダリング対象 -->
<div id="app">
  <!-- .prevent修飾子　イベントでページのリロードを止めるため -->
    <form v-on:submit.prevent>
        <!-- v-modelでデータバインディング -->
      <input type="text" v-model="newItem" />
      <button v-on:click="addItem">追加</button>
    </form>
    <ul>
      <li v-for="(todo, index) in todos">
      <!-- 完了のチェックbox　チェックするとisDoneはtrue -->
      <input type="checkbox" v-model="todo.isDone" />
      <!-- 完了済みのスタイルを変更 -->
         <span v-bind:style="{ 'text-decoration': todo.isDone ? 'line-through' : 'none' }">{{ todo.item }}</span>
       <!-- 削除ボタン -->
        <button v-on:click="deleteItem(index)">削除</button>
      </li>
    </ul>
   <!--未完了todoの数 / todoの数を表示 -->
   <p>{{ remaining.length }}/{{ todos.length }}</p>
    <!-- dataオブジェクトを表示 -->
    <pre>{{ $data }}</pre>
  </div>

const app = Vue.createApp({
  data: () => ({
//inputとされる値
    newItem: '',
//todoを管理する配列
todos: [{item:'タスク１', isDone: false} ,{item:'タスク２', isDone: false}]
  //  todos: []
  }),
  methods: {
//todos配列にtodoを追加する関数
    addItem: function(event) {
   //todosの配列に、todoオブジェクトを追加、削除する(完了未完了も一緒に管理する)
    let todo = {
        item: this.newItem,
        isDone: false
    }
   //空の時は追加しない
      if(this.newItem === '') return
      this.todos.push(todo)
   //追加後、inputを空にする
      this.newItem = ''
   },
//todos配列からtodoを削除する関数
    deleteItem: function(index) {
      this.todos.splice(index, 1)
    }
  },
//算出プロパティーで、未完了のtodoを取得
 computed: {
      remaining: function () {
        return this.todos.filter(function (todo) {
          return !todo.isDone;
        });
      }
    }
})
app.mount('#app')

<div id="app">
   <hello-component></hello-component>
</div>

const app = Vue.createApp({

})
app.component('hello-component', {
  template: '<p>Hello!</p>'
})
app.mount('#app')

 <div id="app">
    <hello-component></hello-component>
 </div>

//コンポーネントを定義して
const helloComponent = {
  template: `<p>Hello</p>`,
}
const app = Vue.createApp({
//コンポーネントオプションに追加
  components: {
    //キーがコンポーネント名：値が定数名
    // 'hello-component': helloComponent
    //省略記法だけでもOK
      helloComponent
  }
})
app.mount('#app')

<div id="app">
    <!-- post-title属性で'Hello props!'を渡す -->
    <hello-component post-title="Hello props!"></hello-component>
 </div>

const helloComponent = {
    template: `<p>{{ postTitle }}</p>`,
//コンポーネントの定義にpropsを追加
    props: ['postTitle'],
}
const app = Vue.createApp({
  components: {
    'hello-component': helloComponent
  }
})
app.mount('#app')

//配列
props: ['postTitle']
//オブジェクト
props: {
  postTitle: String,
}

<div id="app">
    <!-- 親のテータの値を動的に渡す -->
    <hello-component v-bind:post-title="parentTitle"></hello-component>
</div>

const helloComponent = {
    template: `<p>{{ postTitle }}</p>`,
    props: ['postTitle'],
}
const app = Vue.createApp({
 data() {
      return{
     //親のデータの値
        parentTitle:'親のタイトル'
       }
    },
  components: {
    'hello-component': helloComponent
  }
})
app.mount('#app')

<div id="app">
    <!-- 親の配列のデータを渡す key属性は必須 itemとlistを紐付ける-->
    <color-list
      v-for="list in lists"
        :key="list.color"
        :item="list">
     </color-list>
</div>

const colorList = {
    template: `<ul><li>{{ item.color }}</li></ul>`,
 //props　itemはlistsの各オブジェクト
    props: {
        item: {
         type: Object
        }
    },
}
const app = Vue.createApp({
    data() {
        return {
            lists: [
                { color: 'Red' },
                { color: 'Green' },
                { color: 'Yellow' }
            ]
        }
    },
  components: {
    'color-list': colorList
  }
})
app.mount('#app')

<div id="app">
    <!-- 子供のカスタムイベントが発火したら、メソッドを実行します-->
    <emit-test v-on:child-event="parentMethod"></emit-test>
    <p>値：{{childData}}</p>
</div>

const emitTest = {
    template: `<div>
        <button @click="childMethod">子のボタン</button>
        </div>`,
    methods: {
        childMethod: function () {
        //カスタムイベントを登録する　第二引数は渡す値
         this.$emit('child-event', '子の値')
      }
    }
}
const app = Vue.createApp({
    data() {
      return{
           childData: ''
       }
    },
  components: {
    'emit-test': emitTest
    },
//カスタムイベントが発火した時の処理　引数で子供のデータを受け取る
  methods:{
    parentMethod: function (e) {
      this.childData = e
    }
  }
})
app.mount('#app')

<input
  :value="message"
  @input="message = $event.target.value"
/>
<!-- Vue ２ -->
<custom-input
  :value="message"
  @input="message = $event"
/></custom-input>
<!-- Vue 3 -->

<custom-input
  :model-value="message"
  @update:model-value="message = $event"
></custom-input>

<div id="app">
    <!-- コンポーネントでv-model -->
    <custom-input v-model="searchText">
    </custom-input>
    <p>入力した値：{{ searchText }}</p>
</div>

const customInput = {
    props: {
        modelValue: {
           type: String
       }
    },
    template: `<div>
       <input type="text" v-bind:value="modelValue" v-on:input="childEvent">
        </div>`,
    methods: {
        childEvent: function (e) {
         this.$emit('update:modelValue', e.target.value)
      }
    }
}
const app = Vue.createApp({
    data() {
      return{
           searchText: ''
       }
    },
  components: {
    'custom-input': customInput
    }
})
app.mount('#app')

 computed: {
      プロパティ名:{
       get: function () {
      　　return ・・・
   　　 },
       set: function (newValue) {
     　　　//newValueの処理
    　　}
      }
    }

<div id="app">
<!-- カスタムイベントで子から入力した値を受け取る -->
    <custom-input v-on:child-event="parentValue =$event">
    </custom-input>
     <p>入力した値：{{ parentValue }}</p>
</div>

const customInput = {
    template: `<div>
       <input type="text" v-model="childText">
        </div>`,
    data() {
      return{
           childValue:''
       }
    },
    computed: {
      childText:{
        get: function(){
            return this.childValue
        },
         //入力された値を受け取る
        set: function(value){
            this.childValue = value
            //カスタムイベントを登録して、値を親に送る
            this.$emit('child-event', value)
        }
      }
    }
}
const app = Vue.createApp({
    data() {
      return{
           parentValue: ''
       }
    },
  components: {
    'custom-input': customInput
    }
})
app.mount('#app')

<div id="app">
    <child-component>親のABC</child-component>
</div>

const childComponent = {
    template: `<div>
      <p>ABC</p><slot></slot><p>DEF</p>
        </div>`,
}
const app = Vue.createApp({
  components: {
    'child-component': childComponent
    }
})
app.mount('#app')

<div id="app">
    <child-component>
        <!-- v-slotの引数に名前を指定 -->
        <template v-slot:first>最初</template>
        <template v-slot:last>最終</template>
        名前はついていません
    </child-component>
</div>

const childComponent = {
    template: `<div>
      <slot name="first"></slot>
      <slot></slot>
      <slot name="last"></slot>
        </div>`
}
const app = Vue.createApp({
  components: {
    'child-component': childComponent
    }
})
app.mount('#app')

<div id="app">
    <todo-list>
        <!-- v-slotに値を指定して、slotPropsを利用します *引数のdefaultは名前なしのslot-->
        <template v-slot:default="slotProps">
            {{ slotProps.todo }}
        </template>
    </todo-list>
</div>

const todoList = {
    template: ` <ul>
      <li v-for="(item, index) in items">
        <slot v-bind:todo="item"></slot>
      </li> </ul>`,
    data() {
      return {
       items: ['タスク１', 'タスク2', 'タスク3']
    }
  },
}
const app = Vue.createApp({
  components: {
    'todo-list': todoList
    }
})
app.mount('#app')

# インストール 
npm install -g @vue/cli
# インストールされていか確認
vue -V

<template>
<Hoge />
</template>

<script>
import Hoge from './Hoge.vue'
export default {
 name: 'ファイル名と同じ名前'
//テンプレートで利用可能なコンポーネント（importしたコンポーネント）
 components:{ Hoge }　

}
</script>

<style scoped>
/* scopedでスタイルの有効範囲をテンプレート内にします */
</style>

// Vue 3 分割代入で必要なメソッドを読み込む
import { createApp } from 'vue'
import App from './App.vue'
//createAppの後に他のメソッドチェーンできます（例：.use(プラグイン)）
createApp(App).mount('#app')

// Vue 2.x 以前
import Vue from 'vue'
import App from './App.vue'
//Vueインスタンスを作成
new Vue({
render: h => h(App)
}).mount('#app')