전체 글 85

V-bind

class를 data로 넣어주고 싶을때 사용 v-bind: = : v-bind를 축약해서 : (콜론) 만사용할수 있다 v-bind:class = {클래스이름 : boolean값} 으로 참일때 클래스가 실행이 된다 boolean 값은 data객체의 속성이 들어가도 되고 true/false로 값이 들어갈수 있다 기본 html 속성(ex) class) 앞에다 : 붙이면 data 나 js표현식을 사용할수있다 속성접근가능 이미지, 링크, 스타일 크기에 대한 단방향(data에서 html한쪽으로만사용가능) 데이터 바인딩 bind로 접근할수 있는값 이미지 img src : v-bind:src 링크 a href : v-bind:href 클래스 : v-bind:class 스타일 : v-bind:style 키 : v-bin..

Vue 2022.03.20

[Vue] 끝말잇기 만들기 컴포넌트사용 전역 컴포넌트 지역컴포넌트

Vue.component(컴포넌트이름 (문자열작성), { template : ` ` //사용방법동일 백틱사용 data: function(){ //반드시함수로 return { 값이 여러개로들어가서 객체로 값넣어실행 }, methods : { } html head태그 body 컴포넌트는 같은 것을 계속 랜더링하지만 중복을 제거 data는 같은 컴포넌트라고 해서 다 공유되는 것이 아니라 각각의 들이 각각의 data를 가진다 자체가 캡슐이다 캡슐화 : 안의 내용을 알수없음(template의 html요소를 알수 없음), 간단하게 쓸수 있다 뷰지정공간안 컴포넌트 이름('word-replay')을 태그로 불러온다 컴포넌트는 뷰인스턴스보다 위에 만들어져야되고 뷰인스턴스 = new Vue ({ }) 컴포넌트의 스크립트가..

Vue 2022.03.19

구구단만들기 $refs

html {{first}}곱하기{{second}} 는? 입력 {{result}} {{}} 를 사용하여 html에 텍스트를 만들어준다 js const app = new Vue({ el: '#root', //data만 수정한다 data : { //Math.ceil = 소수점이하의 값을 올림해준다 //ex) Math.ceil(23.5) /24가 된다 first: Math.ceil(Math.random()*9), second: Math.ceil(Math.random()*9), value: '',//정답 result: ''//결과 }, methods : { onSubmitForm(e) { e.preventDefault();//페이지새로고침막기 //console.log(this)//콘솔창에 Vue라고 나오는데 이곳..

Vue 2022.03.19

vue 사용법

vue를 처음 배우는데 헷갈려서 작성해 보았다 html 버튼 눌렀음 버튼 data에 연결할 태그들을 (id바꿔도됨)안으로 감싸줘야 "#root"안의 태그들을 data로 연결되게 된다 new Vue 안의 el(element) = "#root" 를 입력해줘야 한다 버튼 눌렀음 v-if="clicked" 를 통해 data에서 clicked : false 되어서 보이지 않게 된다 v-if는 조건문과 같아서 true면 실행된다 v-else는 v-if나 v-else-if가 true가 아닐때 실행 지금 data의 clicked : false 가 되어있어서 v-if 가 아닌 v-else가 실행된다 버튼 그냥 html은 onclick인데 vue는v-on:click으로 사용 "onClickButton" v-on:click..

Vue 2022.03.19

뷰인스턴스 template 사용

vue.js이용 웹페이지필요기능만들때 기본적으로 생성하는객체 new vue를 이용해서 생성 = 뷰인스턴스 new Vue({ el엘리먼트약자 data 값을 묶어둠 }) 변수담아서 사용가능 const vm = new Vue({ }) vm은 vue모델약자 template 속성 vue화면 표시할 dir h3같은 html요소 스타일설정 문자열로 작성하기 data값 쓰고 싶다면 ` `(백틱)으로 사용 문자열이요소""로 사용가능 div메세지 값 담을수있도록 template : `백틱사용` "문자열사용" html {{msg}} js template사용안했을때 new Vue({ el : "#app", data : { msg : "data에서의 텍스트입니다" } }) js template사용했을때 new Vue({ el ..

Vue 2022.03.18

프로그래스바 만들기

body css /* content만 주면 위아래 공간이 생겨서 body와 html에 margin0주기 */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; } /* 배경색주기 */ .content{ width: 100%; height: 1000px; background-color: aliceblue; } .progressbar{ position: fixed; height: 10px; top:6px; right:0; width: 100%; /* 맨앞으로 */ z-index: 500; } .progressbar > .progress{ background-color:yellowgreen; width: 0%;/* 프로그래스바 진행정도 */ hei..

JQuery 2022.03.16

Jquery 플러그인Green Sock ScrollTrigger

https://greensock.com/docs/v3/Installation?checked=core,scrollTrigger Docs Documentation for GreenSock Animation Platform (GSAP) greensock.com greem sock라는 사이트에 들어가서 다운을 받아 주지 않고 cnd를 사용해주었다 밑의 화면은 Dos 클릭해서 Installation을 클릭하면 밑의 사진이나온다 이것도 마찬가지로 jquery 아래에 입력해준다 ScrollTrigger를 사용하기위해 product 에 ScrollTrigger를 클릭해 내려가보면 아래 화면이 나오는데 EXAMPLES 를 클릭해주면된다 아래의 다양한 ScrollTrigger들이 나온다 Cover Layered Secti..

JQuery 2022.03.16

jquery 플러그인 Magnific Popup사용법

Magnific Popup https://dimsemenov.com/plugins/magnific-popup/ Magnific Popup Documentation The complete guide on how to use Magnific Popup - the open source responsive lightbox plugin. dimsemenov.com Zoom-gallery사용 홈페이지에서 document를 클릭해서 밑의 including files아래의 태그를 head 태그 안에 넣는다 여기서 해당 css나 js 폴더안에 위의 화면처럼 넣어줘서 그 링크에 맞게 경로를 변경해줘야한다 이위에 반드시 jqeury 를 넣어줘야한다 나는 css폴더와 js폴더를 만들어줬으니 그안에 넣어야되어서 작성해주었다 저..

JQuery 2022.03.16

slick 그림넣기와 화살표 버튼 docts 수정하기

slick에 docts를 해주면 저렇게 button 123 들이 나오는데 그것을 변경시켜보겠다 그리고 Previous 랑 Next도 바꿔볼려고한다 또한 안쪽그림도 바꾸려고한다 먼저 그림부터 삽입해보겠다 body태그안에 그림을 넣을수있게 div태그를 넣었다 그다음 각각 classname을 css에 넣어준다 .view{ padding: 0; /*최소높이*/ min-height:332px; position: relative; } .view:after{ content: ""; width: 45%;/*173px*/ height: 99%; position: absolute; left: 30%; top: 39px; background: url(./img/item.jpg) 0 0 no-repeat; -webkit-ba..

JQuery 2022.03.14