반응형 데이터바인딩3 Vue의 데이터바인딩 우리가 기존에 Javascript나 Jquery를 이용해서 동적인 데이터를 화면에 추가하기 위해서는 데이터를 추가할 요소에 id나 class 들을 추가해주고, 그 후에 Javascript에서는 document.getElementById(ID명).innerHTML = "넣을값"; 이라고 표현해주거나 Jquery에서는 $(#id명).html 이런식으로 각각 ID나 Class를 지정해서 해당 요소에 접근후 데이터를 해당 요소에 대입해줘야했다. 하지만 Vue는 다르다. 바로 이런식으로 말이다. 먼저 이 코드는 npm/cli를 사용하여 터미널에서 vue create 프로젝트명을 사용하여 생성된 vue 프로젝트이다. 코드 내에 있는 코드들이 우리가 알고있는 HTML과 CSS 영역이 화면에 표출되는 화면단이고 Scr.. 2023. 8. 16. 넥사크로17(Nexacro 17) 독학 공부하기. 7- 이벤트 속성 부여하기 앞전에 만든 화면에서 이제 버튼에 클릭이벤트를 부여하고, 스크립트로 간단한 데이터를 넣어서 고객 정보를 불러오는 기능을 구현하겠다. 생성한 버튼을 클릭하고 속성창에서 onclick 이벤트를 부여해보자. 버튼을 클릭하고 우측 속성창을 보면 이벤트 버튼이 있다. 클릭해보자. 클릭하면 이벤트 관련된 컴포넌트 속성들이 보이는데 onclick을 찾아서 divCommand_btnSearch_onclick 라고 이름지어주자. 그럼 자동적으로 스크립트를 입력할수 있는 창으로 전환될것이다. 이런 동작 이벤트를 걸었으면 정상적으로 작동하는지 먼저 테스트 할것을 난 권장한다. alert으로 테스트를 해보겠다. 작동이 잘되는지 quick view를 통해 확인하자. 버튼을 누르니 정상적으로 alert 창이 띄워지는걸 확인할수 .. 2023. 7. 10. 넥사크로17(Nexacro 17) 독학 공부하기. 6- 컴포넌트 배치 및 데이터바인딩 Dataset 구성까지 마쳤으니 이제 화면구성을 해보고, 만들어놓은 Dataset을 Grid와 연동해서 데이터를 조작해야한다. 넥사크로로 화면구성할때 주의해야될점은 DIV는 DIV 안에 있는 컴포넌트들을 감싸주는 역활을 하기때문에 먼저 DIV 컴포넌트를 배치 후에 나머지 컴포넌트들을 DIV 안에 배치해야한다. 위의 사진상에서처럼 큰 DIV 를 먼저 배치하고 그 안에 edit와 button 컴포넌트를 배치해야한다 Grid는 데이터를 다루는 화면을 구성한다면 가장 많이 선택하게될 컴포넌트이다. 주로 Dataset과 데이터 바인딩 하여 사용한다. 데이터바인딩이란? 화면에 배치된 그리드에 만들어놓은 Dataset을 연동하여 데이터 관련 화면을 표현해줄수 있게 연결하는것을 데이터 바인딩이라고 한다. 꼭 grid에.. 2023. 7. 9. 이전 1 다음 반응형
