Vue.js, Bootstrap 관련 팁 모음

Bootstrap-vue.js

https://bootstrap-vue.js.org/docs/components/alert

File Upload Progress Indicator with Axios and VueJS

https://serversideup.net/file-upload-progress-indicator-with-axios-and-vuejs/

/* Submits the file to the server */ submitFile(){ /* Initialize the form data */ let formData = new FormData(); /* Add the form data we need to submit */ formData.append('file', this.file); /* Make the request to the POST /single-file URL */ axios.post( '/file-progress', formData, { headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: function( progressEvent ) { this.uploadPercentage = parseInt( Math.round( ( progressEvent.loaded * 100 ) / progressEvent.total ) ); }.bind(this) } ).then(function(){ console.log('SUCCESS!!'); }) .catch(function(){ console.log('FAILURE!!'); }); },

Vue.js - img src data biding?

https://github.com/vuejs/Discussion/issues/202

<img :src="image">

data() {
  return {
    image: require('../assets/img/a1.jpg')
  }
}

v-viewer

https://github.com/mirari/v-viewer

<template>
  <div id="app">
    <!-- directive -->
    <div class="images" v-viewer>
      <img src="1.jpg">
      <img src="2.jpg">
      ...
    </div>
    <!-- component -->
    <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>
  </div>
</template>
<script>
  import 'viewerjs/dist/viewer.css'
  import Viewer from 'v-viewer'
  import Vue from 'vue'
  Vue.use(Viewer)
  export default {
    data() {
      images: ['1.jpg', '2.jpg']
    }
  }
</script>

Font Awesome in Vue.js

Bootstrap 3에서는 잘 썼던 Glyphions가 Bootstrap 4에서는 모두 사라져서 대안이 필요하다.

https://fontawesome.com/how-to-use/on-the-web/using-with/vuejs

https://fontawesome.com/icons?d=gallery&m=free

https://github.com/FortAwesome/vue-fontawesome

npm i --save @fortawesome/fontawesome-svg-core \
  npm i --save @fortawesome/free-solid-svg-icons \
  npm i --save @fortawesome/vue-fontawesome

import Vue from 'vue'
import App from './App'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faCoffee)

Vue.component('font-awesome-icon', FontAwesomeIcon)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

<template>
  <div id="app">
    <font-awesome-icon icon="coffee" />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Simple Custom Selector with Vue.js

https://alligator.io/vuejs/file-select-component/

<template> <label class="file-select"> <div class="select-button"> <span v-if="value">Selected File: {{value.name}}</span> <span v-else>Select File</span> </div> <input type="file" @change="handleFileChange"/> </label> </template> <script> export default { props: { value: File }, methods: { handleFileChange(e) { this.$emit('input', e.target.files[0]) } } } </script>

Reset input type file using vue.js

https://forum.vuejs.org/t/reset-input-type-file-using-vue-js/23524

<input type="file" ref="fileInput">

methods: {
  reset() {
    const input = this.$refs.fileInput
    input.type = 'text'
    input.type = 'file'
  }
}

Hide div onclick in Vue

https://stackoverflow.com/questions/48929139/hide-div-onclick-in-vue

new Vue({
 el: '#app',
 data () {
   return {
     toggle: true
   }
 },
})

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>

<div id="app">
  <button @click='toggle = !toggle'> click here </button>
  <div v-show='toggle'>showing</div>
</div>

Vue Background Color

https://codepen.io/alemesa/pen/YNrBqr

div id="app" v-bind:style="{ backgroundColor: color}">

<h1>Try a color</h1>

  <div class="color">

<input type="text" v-bind:style="{ color: color}" v-model="color" maxlength="7" placeholder="#000000"/>

  <input type="color" v-model="color"/>

    </div>

</div>

new Vue({

  el: '#app',

  data: {color: '#673AB7'}

})

Vue.js의 $refs를 통해서 DOM에 접근

http://devriver.tistory.com/31

<div id="app"> <h1>{{ message }}</h1> <button ref="myButton" @click="clickedButton">Click Me!</button> </div>

var vm = new Vue({ el: '#app', data: { message: 'Hello World!' }, methods: { clickedButton: function() { console.log(this.$refs); this.$refs.myButton.innerText = this.message; } } });

https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

<h1 ref="message">{{ message }}</h1>

setTimeout(function() { vm.$refs.message.innerText = 'This is a test'; }, 2000);