Vue.js学習用

<p>{{ message }}</p>

new Vue({
  data: {
    message: 'Hello World!'
  },
  methods: {
    sayHi: function() {
      this.message;
    }
  }
})

<a v-bind:href="url">Google</a>
<a :href="url">Google</a>
<a :[attr]="url">Google</a>
<a v-bind="{ href: url }">Google</a>
<a v-bind="anObject">Google</a>

new Vue({
  data: {
    url: 'https://www.google.com',
    attr: 'href',
    anObject: {
      href: 'https://www.google.com'
    }
  }
})

<p v-on:mousemove="changeMousePosition">マウスを乗せてください。</p>

new Vue({
  ...
  methods: {
    changeMousePosition: function(event) {
    }
  }
})

<p v-on:mousemove="changeMousePosition(10, $event)">マウスを乗せてください。</p>

new Vue({
  ...
  methods: {
    changeMousePosition: function(divideNumber, event) {
    }
  }
})

<input type="text" v-model="message">

new Vue({
  data: {
    message: 'こんにちは'
  }
})

data: {
  counter: 0
},
computed: {
  lessThanThreeComputed: function() {
    return this.counter > 3 ? '3より上' : '3以下'
  },
},
methods: {
  lessThanThreeMethod: function() {
    return this.counter > 3 ? '3より上' : '3以下'
  }  
}

data: {
  counter: 0
},
watch: {
  counter: function() {
    const vm = this; // 非同期関数の中でthisにアクセスできないので。
    setTimeout(function() {
      vm.counter = 0
    }, 3000)
  }
}

<h1 :class="{ red: isActive, 'bg-blue': false }">Hello</h1>
data: {
  isActive: true
}

<h1 :class="classObject">Hello</h1>
data: {
  isActive: true
},
computed: {
  classObject: function() {
    return {
      red: isActive,
      'bg-blue': false
    }
  }
}

<h1 :class="[color, bg]">Hello</h1>
data: {
  color: 'red',
  bg: 'bg-blue'
}

<h1 :style="{ color: textColor, 'background-color': bgColor }">Hello</h1>
data: {
  textColor: 'red',
  bgColor: 'blue'
}

<h1 :style="styleObject">Hello</h1>
data: {
  styleObject: {
    color: 'red',
    'background-color': 'blue'
  }
}

<h1 :style="[baseStyles, styleObject]">Hello</h1>
data: {
  styleObject: {
    color: 'red',
    'background-color': 'blue'
  },
  baseStyles: {
    fontSize: '60px'
  }
}

<p v-if="ok">OK!</p>
<p v-else-if="maybeOk">maybe OK!</p>
<p v-else>Not OK...</p>

data: {
  ok: false,
  maybeOk: true
}

<ul>
  <li v-for="(fruit, index) in fruits">({{ index }}) {{ fruit }}</li>
</ul>
data: {
  fruits: ['りんご', 'バナナ', 'ぶどう']
}

<ul>
  <li v-for="(value, key, index) in object">({{ index }}) {{ key }} - {{ value }}</li>
</ul>
data: {
  firstName: '太郎',
  lastName: '山田',
  age: 21
}

<ul>
  <template v-for="fruit in fruits">
    <li>{{ fruit }}</li>
    <hr>
  </template>
</ul>

<ul>
  <li v-for="n in 10">{{ n }}</li>
</ul>

<ul>
  <div v-for="fruit in fruits">
    <p>{{ fruit }}</p>
    <input type="text">
  </div>
</ul>
<button @click="remove">先頭を削除</button>

methods: {
  remove: function() {
    this.fruits.shift()
  }

<div v-for="fruit in fruits" :key="fruit">

vm.$mount('#app')

new Vue({
  ...
}).$mount('#app') // とも書ける

render: function(h) { // 仮想DOMを扱うときによくhと表現されるらしい
  return h('h1', 'こんにちは、' + this.name);
}

Vue.component('hello', {
  template: '<p>Hello</p>'
})

var component = {
  data: function() { return { ... } },
  template: '<p>いいね( {{ number }} )</p>'
}
components: {
  'my-component': component;
}

// 親コンポーネント
<LikeNumber :totalNumber="number"></LikeNumber>
data() {
  return {
    number: 10
  }
}

// 子コンポーネント
props: {
  totalNumber: Number
}
// or
props: {
  totalNumber: {
    type: Number,
    required: true // or default: 10
  }
}

// 親コンポーネント
<LikeNumber :totalNumber="number", @my-click="number = $event"></LikeNumber>

// 子コンポーネント
methods: {
  increment() {
    this.$emit("my-click", this.totalNumber + 1)
  }
}

// 親コンポーネント
<LikeNumber :totalNumber="number", @my-click="incrementNumber"></LikeNumber>
methods: {
  incrementNumber(value) {
    this.number = value
  }
}

// 子コンポーネント
methods: {
  increment() {
    this.$emit("my-click", this.totalNumber + 1)
  }
}

// 親コンポーネント
<LikeHeader>
  <h1>トータルのいいね数</h1>
  <h2>{{ number }}</h2>
</LikeHeader>

// 子コンポーネント
<template>
  <div>
    <slot></slot>
  </div>
</template>

// 親コンポーネント
<template v-slot:title>
  <h2>こんにちは</h2>
</template>
<template v-slot:number>
  <p>{{ number }}</p>
</template>

// 子コンポーネント
<slot name="title"></slot>
<slot name="number"></slot>

// 親コンポーネント
<template v-slot:title="slotProps">
  <h2>{{ slotProps.user.firstName }}</h2>
</template>

// 子コンポーネント
<slot name="title" :user="user"></slot>
data() {
  return {
    user: { firstName: "Jack", lastName: "Donald" }
  }
}

<LikeHeader v-slot="slotProps">
  <p>{{ slotProps }}</p>
</LikeHeader>

<component :is="currentComponent"></component>

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

<input v-model="eventData.title">
data() {
  return {
    eventData: { title: "タイトル" }
  }
}

:value="eventData.title"
@input="eventData.title = $event.target.value"

<input v-model.lazy="...">

<textarea v-model="eventData.detail">

// 単体
<input type="checkbox" id="isPrivate" v-model="eventData.isPrivate">
<label for="isPrivate">非公開</label>
isPrivate: false // Boolean

// 複数
<input type="checkbox" id="10s" value="10代" v-model="eventData.target">
<label for="10s">10代</label>
<input type="checkbox" id="20s" value="20代" v-model="eventData.target">
<label for="20s">20代</label>
target: [] // Array

<input type="radio" id="free" value="無料" v-model="eventData.price">
<label for="free">無料</label>
<input type="radio" id="paid" value="有料" v-model="eventData.price">
<label for="paid">有料</label>
price: "無料"

<select v-model="eventData.location">
  <option v-for="location in locations" :key="location">{{ location }}</option>
</select>
locations: ["東京", "大阪", "名古屋"],
eventData: { location: "東京" }

// 親コンポーネント
<EventTitle v-model="eventData.title"></EventTitle>
<EventTitle :value="eventData.title" @input="eventData.title = $event></EventTitle> // 上のタグの実態

// 子コンポーネント
<input id="title" type="text" :value="value" @input="$emit('input', $event.target.value)">
props: ["value"]

Vue.directive("border", {
  bind() { /* ディレクティブが初めて対象の要素に紐づいた時 */ },
  inserted() { /* 親Nodeに挿入された時 */ },
  update() { /* コンポーネントが更新される度、子コンポーネントが更新される前 */ },
  componentUpdated() { /* コンポーネントが更新される度、子コンポーネントが更新された後 */ },
  unbind() { /* ディレクティブが紐づいている要素から取り除かれた時 */ }
})

Vue.directive("border", function(el, binding) {
  el.style.border = "solid black 2px"
})

Vue.directive("border", function(el, binding) {
  el.style.borderWidth = binding.value.width
  el.style.borderColor = binding.value.color
  el.style.borderStyle = binding.arg
  if (binding.modifiers.round) {
    el.style.borderRadius = "0.5rem"
  }
  if (binding.modifiers.shadow) {
    el.style.boxShadow = "0 2px 5px rgba(0, 0, 0, 0.26)"
  }
})

<p v-border:solid.round.shadow="{width: '5px', color: 'red'}">Home</p>

<script>
export default {
  directives: {
    border(el, binding) {
      el.style.xxx = yyy
    }
  }
}
</script>

Vue.filter("upperCase", function(value) {
  return value.toUpperCase()
})
<p>{{ title | upperCase }}</p>

filters: {
  lowerCase(value) {
    return value.toLowerCase()
  }
}

// components/CountNumber.vue
<script>
import { tokyoNumber } from "@/tokyoNumber"

export default {
  mixins: [tokyoNumber]
}
</script>

// src/tokyoNumber.js
export const tokyoNumber = {
  data() { ... },
  filters: { ... }
}

Vue.mixin({
  created() {
    console.log("global mixin")
  }
})

<transition name="fade">
  <p v-if="show">hello</p>
</transition>

<style scoped>
.fade-enter { /* 現れる時の最初の状態 */
  opacity: 0; }
.fade-enter-active { /* 現れる時のトランジションの状態 */
  transition: opacity 5s; }
.fade-enter-to { /* 現れる時の最後の状態 */
  opacity: 1; }
.fade-leave { /* 消える時の最初の状態 */
  opacity: 1; }
.fade-leave-active { /* 消える時のトランジションの状態 */
  transition: opacity 5s; }
.fade-leave-to { /* 消える時の最後の状態 */
  opacity: 0; }
</style>

.v-enter-active {
  animation: slide-in 0.5s
}
.v-leave-active {
  animation: slide-in 0.5s reverse
}

@keyframes slide-in {
  from {
    transform: translateX(100px)
  }
  to {
    transform: translateX(0)
  }
}

<transition
  enter-active-class="animate__animated animate__bounce"
  leave-active-class="animate__animated animate__shakeX"
>

<transition name="fade">
  <p v-if="show" key="bye">さよなら</p>
  <p v-else key="hello">こんにちは</p>
</transition>

<transition name="fade" mode="out-in">...</transition>

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
methods: {
  beforeEnter(el) { /* 現れる前 */ },
  enter(el, done) { /* 現れるとき */ },
  afterEnter(el) { /* 現れた後 */ },
  enterCancelled(el) { /* 現れるアニメーションがキャンセルされたとき */ },
  leaveEnter(el) { /* 消える前 */ },
  leave(el, done) {/* 消えるとき */},
  afterLeave(el) {/* 消えた後 */},
  leaveCancelled(el) {/* 消えるアニメーションがキャンセルされたとき */}
}

<transition :css="false"

beforeEnter(el) {
  el.style.transform = 'scale(0)'
},
enter(el, done) {
  let scale = 0
  const interval = setInterval(() => {
    el.style.transform = `scale(${scale})`
    scale += 0.1
    if ( scale > 1) {
      clearInterval(interval)
      done()
    }
  }, 200)
},
leave(el, done) {
  let scale = 1
  const interval = setInterval(() => {
    el.style.transform = `scale(${scale})`
    scale -= 0.1
    if ( scale < 0) {
      clearInterval(interval)
      done()
    }
  }, 200)
}

.v-move { /* 要素を追加したときに移動する要素に適用される */
  transition: transform 1s
}
.v-leave-active { /* 要素を削除したときはv-moveが適用されないのでposition: absoluteで対応する */
  position: absolute
}

// router.js
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
  routes: [
    { path: '/', component: 'Home' }
  ]
})

// App.vue
<template><div><router-view></router-view></div></template>

<router-link to="/">Home</router-link>

<router-link active-class="link--active" exact></router-link>

methods: {
  toUsers() {
    this.$router.push('users') // push({ path: 'users' })でも可
  }
}

routes: [
  { path: '/users/:id', component: Users }
]

watch: {
  $route(to, from) { /* toが変更後の値、fromが変更前の値 */ }
}

// router.js
routes: [
  { path: '/users/:id', component: Users, props: true }
]

// Users.vue
<p>{{ id }}</p>
props: ['id']

import UsersPosts from './views/UsersPosts.vue'
routes: [
  { path: 'users/:id', component: Users, props: true, children: [
    { path: 'posts', component: UsersPosts }
  ]}
]

routes: [
  { path: 'users/:id', ..., childred: [
    { path: 'profiles' component: UsersProfile, name: 'users-id-profile' }
  ]}
]
<router-link :to="{ name: 'users-id-profile', params: { id: Number(id) + 1 } }"

<router-link :to="{ name: xxx, params: xxx, query: { lang: 'ja' } }"

routes: [
  { path: '/users/:id', components: {
    default: Users,
    header: HeaderUsers
  }, props: {
    default: true,
    header: false
  }, ... }
]

routes: [
  { path: '*', redirect: '/' }
]

<router-link :to="{ name: xxx, params: xxx, hash: '#next-user' }"

scrollBehavior(to, from, savedPosition) {
  if (savedPosition) { return savedPosition }
  if (to.hash) {
    return {
      selector: to.hash,
      offset: { x: 0, y: 100 } // 上に100px余白を取る
    } // { x: 0, y: 0 }で指定することもできる。
  }
}

<transition @before-enter="beforeEnter">

methods: {
  beforeEnter() {
    this.$root.$emit('triggerScroll')
  }
}

// router.js
scrollBehavior(to, from, savedPosition) {
  return new Promise(resolve => {
    this.app.$root.$on('triggerScroll', () => {
      let position = { x: 0, y: 0 }
      if (savedPosition) { position = savedPosition }
      if (to.hash) { position = { selector: to.hash } }
      resolve(position)
    })
  })
}

// main.js
router.beforeEach((to, from, next) => {
  next()
})

// router.js
routes: [
  { path: '/', beforeEnter(to, from, next) { next() }}
]

beforeRouteEnter(to, from, next) { next() },
beforeRouteUpdate(to, from, next) { next() },
beforeRouteLeave(to, from, next) { next() },

// import Home from './views/Home.vue'
const Home = () => import(/* webpackChunkName: 'Home' */ './views/Home.vue')

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { count: 2 }
})

// main.js
import store from './store'
new Vue({
  ..., store, ...
})

// store.js
new Vuex.Store({
  getters: {
    doubleCount: state => state.count * 2
  }
})

// Home.vue
computed: {
  doubleCount() {
    return this.$store.getters.doubleCount
  }
}

import { mapGetters } from 'vuex'
computed: {
  ...,
  ...mapGetters([ 'doubleCount', 'tripleCount' ])
}

// store.js
new Vuex.Store({
  mutations: {
    increment(state, number) {
      state.count += number
    }
  }
})

// HeaderHome.vue
methods: {
  increment() {
    this.$store.commit('increment', 1)
  }
}

// HeaderHome.vue
<button @click="increment(1)">+1</button>

import { mapMutations } from 'vuex'

methods: {
  ...mapMutations(['increment', 'decrement'])
}

// store.js
new Vuex.Store({
  actions: {
//    increment(context, number) {
//      context.commit('increment', number)
  increment({ commit }, number) { // ここをオブジェクトにする省略記法がある
    commit('increment', number)
  }
})

// HeaderHome.vue
methods: {
  increment() {
    this.$store.dispatch('increment', 1)
  }
}

// HeaderHome.vue
<button @click="increment(1)">+1</button>

import { mapActions } from 'vuex'

methods: {
  ...mapActions(['increment', 'decrement'])
}

<input type="text" v-model="message">

computed: {
  ...mapGetters(...),
  message: {
    get() { return this.$store.getters.message },
    set(value) { this.$store.dispatch('updateMessage', value) }
  }
}

// count.js
const state = { count: 2 }
const getters = { ... }
const mutations = { ... }
const actions = { ... }
export default { state, getters, mutations, actions }

// index.js
import { count } from './modules/count'
new Vuex.Store({
  ...,
  modules: { count }
})

// getters.js
export default { ... }

// index.js
import getters from './getters'
new Vuex.Store({
  state: { ... },
  getters,
  ...,
  modules: { count }
})

// count.js
export default {
  namespaced: true,
  state, getters, mutations, actions
}

// Home.vue
computed: {
  ...mapGetters('count', ['doubleCount', 'tripleCount']),
  // doubleCount() { return this.$store.getters['count/doubleCount'] } と同じ
}

// public/_redirects
/* /index.html 200

axios.post(
  URL, DATA
).then(response => {
  console.log(response)
}).catch(error => {
  console.log(error)
})
this.name = ''
this.comment = ''

<div v-for="post in posts" :key="post.name">
  <br>
  <div>名前：{{ post.fields.name.stringValue }}</div>
  <div>コメント：{{ post.fields.comment.stringValue }}</div>
</div>
data() {
  return {
    posts: []
  }
}
created() {
  axios.get(...).then(response => {
    this.posts = response.data.documents
  })
}

const interceptorsRequest = axios.interceptors.request.use(
  config => { return config },
  error => { return Promise.reject(error) }
)
axios.interceptors.request.eject(interceptorsRequest)

// axios-auth.js
import axios from 'axios'
const instance = axios.create({
  baseURL: 'xxx'
})
export default instance

// App.vue
import axios from './axios-auth.js'