반응형 vuejs7 [vue] SweetAlert2 사용하기. (Utils Class 만들어서 사용하기) 설치 npm install sweetalert2 사용 결과는 아래와 같이 나옵니다. Toast.fire({ icon: 'error', title: 'The current password is incorrect' }) 여기에서 icon 에 들어갈 수 있는 것은 아래와 같습니다. 예제 코드 Swal.fire({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!' }).then((result) => { .. 2023. 9. 27. [Vue3] Vuex 에서 parameter 가 context? {commit}? 기본 파라메터 첫번째 파라메터는 호출할 때 따로 넘기지 않아도 됩니다. fetchQuery(context, param){ return new Promise((resolve, reject) => { axios .post('/user/query', param) .then(r=>resolve(r)) .catch(error => reject(error)) }) } 이렇게 첫번째 paramter 를 context (다른 이름도 가능 ctx 등..) 로 입력하면, 아래의 property 들이 보입니다. state 를 사용하려면 context.state getters 를 사용하려면 context.getters context 가 아니라 { } 를 사용해서 필요한것만 가져올 수도 있습니다. // fetchQuery(co.. 2023. 9. 5. [Vue3] Stand Alone #5. bootstrap CDN 으로 사용하기 안에 bootstrap js, css 를 포함시키면 됩니다. cdn 주소는 여기 또는 여기 를 참고하셔서 버전을 고르시면 됩니다 bootstrap5 의 starter template 으로는 click me 이제 button 에 bootstrap css class 를 사용할 수 있습니다. 더 많은 style 은 아래 사이트에서 확인하 실 수 있습니다. https://getbootstrap.kr/docs/5.0/components/buttons/ 버튼 다양한 크기, 상태 등을 지원하는 폼, 대화상자 등의 작업에 Bootstrap의 사용자 지정 버튼 스타일을 사용하세요. getbootstrap.kr 2022. 3. 21. [Vue3] Stand Alone #3. v-for, :key Vuejs 3 CDN 으로 사용하기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ data 의 cars 배열을 for 문으로 li 들을 뿌려주는 예제입니다. v-for="item in cars" 로 반복을 합니다. :key 는 unique 한 값으로 입력을 해줘야 합니다. {{ item }} 배열의 문자열이 중복될 수 도 있으니 index 를 사용할 경우 아래와 같이 변경하면 됩니다. {{ item }} 문자열이 json list 일 경우 {{ item.name }} ({{ item.age }}) 결과 2022. 3. 20. [Vue3] Stand Alone #2. v-if, v-else-if, v-else, v-show Vuejs 3 if else Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ v-if 와 v-show 는 어떨때 써야할까? 짝수! 짝수! 이 두 코드는 보여지기에는 똑같습니다. v-if 는 더 높은 토글비용. v-show는 더 높은 랜더링 비용. 으로 생각하면 되는데요. 햇갈릴 경우엔, 예전 jQuery 에서 show 와 hide 는 존재하는 객체에 적용할 수 있는거이기 때문에 'show 는 무조건 객체를 만들고 시작해야 하는구나, 그럼 초기에 랜더링 비용이 들겠네..' 라고 생각하면 될거같습니다. 그래서 v-show 는 런타.. 2022. 3. 20. [Vue] v-if 와 v-show 의 차이. 사용 시 주의사항. vuejs v-if vs v-show v-if : element가 자체가 있고없고 v-show : element는 있는데 visible on/off 역시. 예제로 보기 v-if export default { computed: { displayByValue: function () { return this.$store.state.myvalue } }, ... mounted: function () { // event binding $('#some_id').click(....); } } - state 의 myvalue값에 따라 를 표시하고 숨기고 하기 위한 코드입니다. - 정상 작동 하는것 처럼 보이지만 치명적인 오류가 있죠. - 처음 화면이 뜨고, state.myvalue 가 true 면 v-if 가 보여지고.. 2021. 6. 7. [Vue] 예제 #01 카운터(counter) 샘플 소스 + 설명 프로젝트를 직접 생성하지 않고 소스 부분만 보셔도 됩니다. 프로젝트 생성 커맨드 창에서 프로젝트를 생성할 위치로 이동해서 아래 명령어를 실행합니다. 그럼 명령어를 실행한 폴더 아래에 counter 폴더가 생성됩니다. $ vue init webpack-simple counter 그리고 사용하시는 개발 툴로 저 폴더를 열어봅니다. 기본적으로 package.json에 있는 것을 설치해야 하기 때문에, 툴 내 터미널에서 아래 명령어를 날립니다. $ npm install 그리고 vuex 를 사용할 것이기 때문에 터미널에서 아래 명령어로 설치해줍니다. $ npm install vuex 소스 store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) c.. 2020. 12. 24. 이전 1 다음 728x90 반응형
