본문 바로가기
반응형

Vue.js29

[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.
[Vue3] Stand Alone #1. vuejs CDN 및 기본 사용 Vuejs 3 CDN 으로 사용하기 Vue3 를, (npm 없이, webpack 없에, package.json 없이 등등..), 홀로 사용 하려는 경우에 vue3 를 개발하는 방식 중 하나 입니다. Stand Alone 으로 사용할 수 밖에 없는 경우만 봐주세요~ cdn 주소는 https://unpkg.com/vue@3 입니다. {{ message }} lesson.html 로 이름을 만들고 파일을 더블클릭 해서 실행 해 볼 수 있습니다. 기본적으로 이렇게 사용할 수 있습니다. npm 이나 vue cli 로 프로젝트를 만들고, webpack 등으로 빌드해서 사용할 수 있지만, 그럴 수 없는 환경(예를들어 웹 호스팅에서 지원안해줄 때, )일 경우에 cdn방식이나 로컬 js 를 include 해서 사용할 수.. 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] jQuery 사용하기 #eslint 설정 Vue jQuery 사용하기 jQuery 설치 npm install --save jquery Tip main.js 에서 window.$ = require('jquery') 이렇게 선언하면 window.$('#id') 와 같이 사용할 수 있지만 window.$ 대신 $ 만 쓰고 싶다면 아래와 같이 webpack 에 설정해야하고, eslint 를 사용하고 있다면 여기에도 설정을 해야합니다. Webpack.config.js 에 설정 module.exports = { ... plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', 'window.jQuery': 'jquery', jQuery: 'jquery' }) ] ... } eslint 를 .. 2021. 1. 15.
[Vue] 화살표함수 (arrow funcion) 사용 시 주의사항 #삽질주의 arrow function 사용 주의 사항 () => {} 결론부터 created: () => console.log(this.a) // 오류. 여기서 this 는 vue instance 가 아닌 window // mounted, udpated, destroyed 마찬가지. methods: { methodA: () => { // arrow function 사용하면 안됨 // this 는 window alert(this == window) // true this.methodB() // 오류 }, methodB: function(){ // this 는 현재 vue instance this.methodA() // 정상 }, methodC() { this.methodA() // 정상 } } 왜? Each Vue .. 2021. 1. 14.
[Vue] Vuetify v-treeview select #programmatically v-treeview select from method 코드로 이해하기. template select all select some unselect js new Vue({ el: '#app', vuetify: new Vuetify(), data(){ return { selectionType: 'leaf', selection: [], items: [ { id: 1, name: 'Root', children: [ { id: 2, name: 'Child #1' }, { id: 3, name: 'Child #2' }, { id: 4, name: 'Child #3', children: [ { id: 5, name: 'Grandchild #1' }, { id: 6, name: 'Grandchild #2' }, ], }.. 2021. 1. 14.
[Vue] vuex actions 에서 다른 action 호출하기 actions 에서 다른 action 호출하기 아래와 같은 소스가 있을 때 method_A 에서 method_B를 호출하는 방법은, const state = { something: '' } const mutations = { setSomething (state, message) { state.something = message } } const actions = { method_A({ commit }) { // method_B 호출 commit('setSomething', 'from method A') }, method_B({ commit }) { // .. do something } } 1. method_A 에 파라메터에 dispatch 추가 2. dispatch 를 이용하여 method_B 호출 me.. 2021. 1. 13.
[Vue] vuex actions 에서 mutation, state 사용하기 actions 에서 mutations 호출하기 예제 소스 코드 const state = { something: '' } const mutations = { setSomething (state, message) { state.something = message } } const actions = { method_A({ commit }) { commit('setSomething', 'from method A') } } actions 의 method_A 라는 메소드에 첫번 째 파라메터를 보면 { } 사이에 commit 을 받고 있습니다. 이걸 이용해서 mutations 을 호출합니다. commit('setSomething', 'from method A') --> setSomething(state, messag.. 2021. 1. 13.
[Vue] router 에서 여러가지 주소 사용하기 #alias search 와 find의 router의 components 가 같습니다. { path: '/search/:text', components: { header: Header, default: MainBody, footer: Footer } }, { path: '/find/:text', components: { header: Header, default: MainBody, footer: Footer } } 두개의 URL을 사용하고, 같은 동작을 해야 한다면 아래의 방법이 관리하기가 더 쉽습니다. { path: '/search/:text', alias: ['/find/:text'], components: { header: Header, default: MainBody, footer: Footer } } ali.. 2021. 1. 12.
728x90
반응형

티스토리툴바