목록Web /Vue js tip (49)
알쓸전컴(알아두면 쓸모있는 전자 컴퓨터)
promise 사용법 promise 사용법은 인터넷어 많이 나와 있습니다만 제 기준으로 좀더 쉽게 이해 하기 위해 작성 하였습니다. promise 는 비동기 처리를 순서 대로 실행 시키키 위한 기능 입니다. 기존에 promise가 없기전에는 함수에 콜백 -> 콜백 ->콜백 ...... 이런 형식이여서 코드의 가독성과 유지보수가 힘듭니다. 그래서 나온것이 promise 입니다. IE11 에서는 promise polliy-fill 이 필요합니다. methods : {get_machine_list(){ var _this = this; return new Promise(function(resolve, reject){ axios.post('/W_Server/oisystem_get_machine_table') .t..
https://jsfiddle.net/wrqmuabo/336/ 사이트 참조
vue-paper-dashboard 위의 대쉬 보드는 Vue js 무료 탬플릿이다 프로그램의 그래픽 적인 부분을 훨씬 다이나믹 하게 기본 틀을 제공한다고 보면 예를 들면 아래와 같은 사이트를 보다 쉽게 만들어 줍니다. 데모 사이트는 http://vuejs.creative-tim.com/vue-paper-dashboard/#/admin/overview 입니다. https://www.creative-tim.com/product/vue-paper-dashboard 위에 사이트에서 다운로드를 받으면 위의 사이트 소스를 전체를 받기 때문에 실제로 필요한 웹사이트를 만들기 위해서 해당 되지 않는 부분을 제거 하고 하는 불편함이 있습니다. 그래서 초기 상태를 vue cli 를 이용해서 만들수 있도록 되어 있습니다. ..
i. form 태그를 제거하기 > 수정 이전 > 수정 이후 (form 태그를 div로 변경) ii. keydown이벤트 추가 후 엔터키 이벤트 제거하기 다른 방법으로 엔터키 발생시 preventDefault()를 추가합니다. - 모든 엘리먼트에 적용하기 document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { event.preventDefault(); } }, true); - input 태그에만 적용하기(jQuery를 사용) $('input[type="text"]').keydown(function() { if (event.keyCode === 13) { event.preventDefault(); } }); 출처 :..
위와 같이 설정 하고 var now_way_board = this.$refs.now_way; 위와 같이 변수로 받고 CKEDITOR.replace( now_way_board , { // Define the toolbar: http://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_toolbar // The full preset from CDN which we used as a base provides more features than we need. // Also by default it comes with a 3-line toolbar. Here we put all buttons in a single row. toolbar: [ { name: 'document', i..
vue2-datatable select multi check box 초기화 막기 vue2의 컴포넌트중 무료로 vue2-datatable을 사용 하던중 select box을 설정 하다 https://onewaytech.github.io/vue2-datatable/examples/dist/ 의 예제를 보면 1번 페이지 에 있다가 2번에 있다가 다시 1번으로 가면 저장이 체크가 풀리게 됩니다. 기존의 체크상태를 유지 할 필요가 있을때 난감합니다. node_modules -> vue2-datatable-component -> src -> Table -> MultiSelect.vue 을 수정해 주었습니다. import replaceWith from '../_utils/replaceWith'/** * checkbo..
post 에 params 데이터 보내기 Get 방식의 경우에는 axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 위와 같이 보내면 되지만 Post 는 안됩니다. npm install url-search-params-polyfill --save 로 설치를 하고 이유는 IE 11 을 커버 하기 위해서 입니다. import 'url-search-params-polyfill'; 을 추가 해 줍니다. var params = new URLSearchParams(); params.append('doc_..
vue-simple-uploader제가 사용한 파일 업로드 라이브러리는 위의 업로더 입니다. 홈페이지 : https://github.com/simple-uploader/vue-uploader 입니다. vue-uploader 는 https://github.com/simple-uploader/Uploader 의 라이러러리를 vue js 로 사용하기 편하게 하기 위해서 만들어진 라이브러리 입니다. 1. npm install simple-uploader.js --save 설치를 해줍니다. 2. npm install vue-simple-uploader --save설치 해 줍니다. 그리고 npm build 시에 Unexpected token: name (parent) [./~/vue-simple-uploader/s..
vue js ckeditor 적용법 1. 전제 사항 ▶ vue cli 을 사용 하여 vue init webpack 으로 프로젝트를 생성 하였습니다. ▶ 톰켓 같은 웹서버가 필요 합니다. 2. 필요 사항 build -> webpack.base.conf.js -> const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')require('es6-promise/auto'); require('es6-promise/auto');을 추가 해 줍니다. module.exports = { context: path.res..