/ Gists / Vue.js

Gists - Vue.js

On gists

Composition API - examples

Vue.js

composition.vue #

<template>
  <div>
    <h2 class="text-h4">{{ name }}</h2>
    <button @click="score++" class="btn">
      {{ score }} twice is {{ double }}
    </button>

    <hr />

    <button @click="score2++" class="btn">
      {{ score2 }} triple is {{ triple }}
    </button>

    <hr />
    <ul>
      <li v-for="data in dataList" :key="data.id">{{ data.name }}</li>
    </ul>

    <hr />

    <button v-if="!divVisible" @click="showDiv">Show div</button>
    <button v-if="divVisible" @click="hideDiv">Hide div</button>
    <div v-if="divVisible" class="bg-red-100">My super hidden div :)</div>

    <hr />
    <form @submit.prevent="submitForm">
      <input type="text" v-model="title" />
    </form>
  </div>
</template>

<script>
import { ref, computed, reactive, toRefs, onMounted } from 'vue'
import { data } from '@/frontapp/components/data.js'

export default {
  components: {},
  props: ['name'],

  // props, context nebo { emit } nebo { emit, slots }
  setup(props, { emit }) {
    console.log(props, 'our props')

    // data
    const score = ref(1)
    const dude = ref('Kcko')
    const dataList = ref(data)

    const state = reactive({
      score2: 12,
      triple: computed(() => state.score2 * 3),
      divVisible: false
    })

    // computed
    const double = computed(() => score.value * 2 + 7)
    const hello = computed(() => 'Hello, I am ' + dude.value)

    // methods
    const showDiv = () => {
      state.divVisible = true
    }
    const hideDiv = () => {
      state.divVisible = false
    }

    // v nadrazenem prvku / komponentne nebo  standardne -> view @new-list-coming="nejakaMetoda($event)"
    const title = ref('')
    const submitForm = () => {
      emit('new-list-coming', title.value)
    }

    onMounted(() => {
      console.log('Mounted yeah!')
    })

    return {
      score,
      double,
      hello,
      ...toRefs(state),
      dataList,
      showDiv,
      hideDiv,
      submitForm
    }
  }
}
</script>
On gists

Component - default + merged options

Vue.js

BcVideo.vue #

<template>
  <video-player v-bind="mergedVideoSettings" />
</template>

<script>
import VideoPlayer from './VideoPlayer.local.vue'
export default {
  props: {
    videoSettings: Object
  },
  components: {
    VideoPlayer
  },
  computed: {
    mergedVideoSettings() {
      return {
        ...this.defaultVideoSettings,
        ...this.videoSettings
      }
    }
  },
  data() {
    return {
      defaultVideoSettings: {
        mask: false,
        colors: 'var(--primaryColor)'
      }
    }
  },
  mounted() {}
}
</script>

<style lang="scss" scoped></style>
On gists

v-model, Parent <-> Child 2 way databinding

•
Vue.js

1.vue #

<!--Emit + props-->

<!--PARENT-->
<template>
  <div>
    <h1>A1 - parent</h1>
    <input
      :value="time"
      @input="time = $event.target.value"
      class="border border-gray-400"
    />
    <b1 @on-parent="this.time = $event" :time="time" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: null
    }
  },
  methods: {},
  computed: {},
  mounted() {}
}
</script>



<!--CHILD-->
<template>
  <div>
    <h1>B1 - child</h1>
    <input
      :value="time"
      @input="sendData($event.target.value)"
      class="border border-gray-400"
    />
  </div>
</template>

<script>
export default {
  emits: ['on-parent'],
  props: ['time'],
  data() {
    return {}
  },
  methods: {
    sendData(val) {
      this.$emit('on-parent', val)
    }
  },
  computed: {},
  mounted() {}
}
</script>
On gists

Use Global Utility Methods For DRYer Code

Vue.js

utils.js #

// import store from '../store' <-- To access your Vuex store
import Vue from 'vue' // <-- used for vue-toastification

class Utils {
  // Copy a string to user's clipboard
  copyToClipboard(text) {
    let copyText = document.createElement('input')
    document.body.appendChild(copyText)
    copyText.value = text
    copyText.select()
    document.execCommand('copy')
    document.body.removeChild(copyText)

    // Show toast on copy success
    // (using the vue-toastification package here)
    Vue.$toast.success('Copied address to clipboard: ' + text, {
      position: 'top-right',
      timeout: 3000
    })
  }
}

export default new Utils()
On gists

Call a Child Component’s Method from Parent

Vue.js

component.vue #

// Parent.vue
<template>
  <ChildComponent ref="child" />
</template>


// In Parent.vue's methods
this.$refs.child.methodName()
On gists

Refresh (Reload) a Specific Component Dynamically

Vue.js

component.vue #

<template>
  <component-to-re-render :key="reloadMe" />
</template>

<script>
export default { 
  data() { 
    return { 
      reloadMe: 0, 
    }
  }; 
    
  methods: { 
    forceRerender() { this.reloadMe += 1; } 
  } 
}
</script>
On gists

VUE - Directives

•
Vue.js

Directives.vue #

export default {
  install (Vue) {

    Vue.directive('test-demo', {
      mounted(el, binding) {
        
        const modifiers = binding.modifiers
        const state = binding.arg === "a" ? "a" : "b"

        if (state === 'a') {
          el.style.color = 'red'
        } else {
          el.style.color = 'green'
        }

        if (modifiers.underline) {
          el.style.textDecoration = "underline"
        }
        if (modifiers.overline) {
          el.style.textDecoration = "overline"
        }

      }
    })

    Vue.directive('width', {
      mounted: function (el, binding) {
        el.style.width = binding.value + 'px'
      }
    })

    // mounted + update both
    Vue.directive('color-swatch', function (el, binding) {
      el.style.backgroundColor = binding.value
    })

    Vue.directive('demo', function (el, binding) {

      el.style.color = binding.value.color // => "white"
      el.textContent = binding.value.text
    })
  }

}