본문 바로가기

언어/vue

 (5)
vue Invalid Host header npm run serve로 실행시킨 후 내부(로컬)에서는 접속이 잘 되지만 외부에서는 Invalid Host header이 표시되어서 무엇인지 찾아보다가 기본 셋팅이 로컬은 접속이 허용되지만 외부에서 접속이 허용되지 않기 때문이였다. 프로젝트의 vue.config.js에 다음 문장을 추가해주면 외부에도 접속이 가능하다. // filename : vue.config.js module.exports = { // options... devServer: { disableHostCheck: true } };
[vue - 4] 배열 변수 값 사용 index4.html {{ product }} In Stock Out of Stock {{ detail }} {{ variant.variantColor }} index4.js var app = new Vue({ el: '#app', data: { product: 'Socks' , image: "https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg" , inStock: true , details : ["80% cotton" , "20% polyester", "Gender-neutral"] , variants : [ { variantId : 2234, variantColor : "green"} , { variantId : 2235, v..
[vue - 3] if - else 적용 index3.html {{ product }} In Stock Out of Stock {{ product }} 2 intStock > 10 intStock 0 Out of Stock index3.js var app = new Vue({ el: '#app', data: { product: 'Socks' , image: "https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg" , inStock: true , intStock: 10 } }); css는 이전 글에서 사용한 파일을 사용합니다. 2020/08/04 - [언어/vue] - [vue - 2] 이미지 속성 변경하기
[vue - 2] 이미지 속성 변경하기 css파일까지 추가되어서 3개의 파일을 생성 index2.html {{ product }} index2.js var app = new Vue({ el: '#app', data: { product: 'Socks' // 파일 다운 받아서 할 경우 //, image: "./assets/vmSocks-green-onsdfWhite.jpg" , image: "https://www.vuemastery.com/images/challenges/vmSocks-green-onWhite.jpg" , altText : "이미지를 표시할 수 없습니다." } }); index2.css body { font-family: tahoma; color:#282828; margin: 0px; } .nav-bar { background: ..
[vue -1] Hello Vue! 표시하기 vue 무료 강의를 보면서 테스트 해보려고 합니다. 해당 사이트 주소 https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/ The Vue Instance - Intro to Vue.js | Vue Mastery This lesson covers how to get your data from your JavaScript to show up in your HTML. www.vuemastery.com 페이지에서 Hello Vue 표시하기 2개의 파일 생성 1. index.html {{ message }} 2. index.js var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); 관..

티스토리툴바