코딩하는 IT개발자 로기

Vue.js에서 v-model 디렉티브는 폼 입력 요소와 데이터를 양방향으로 바인딩하는 강력한 기능입니다. 이를 통해 사용자 입력과 Vue 인스턴스의 데이터를 쉽게 동기화할 수 있습니다.v-model의 기본 개념v-model은 내부적으로 v-bind와 v-on의 조합으로 동작합니다. 이는 다음과 같은 방식으로 작동합니다:v-bind: Vue 인스턴스의 데이터를 HTML 요소에 연결v-on: HTML 요소의 이벤트를 Vue 인스턴스의 로직과 연결예를 들어, 는 내부적으로 다음과 같이 처리됩니다:지원하는 폼 요소v-model은 다양한 폼 요소에서 사용할 수 있으며, 요소 유형에 따라 다르게 동작합니다:v-model의 특징양방향 바인딩: 데이터가 변경되면 UI가 업데이트되고, 사용자 입력으로 UI가 변경되면 ..

케밥 표기법, 카멜 표기법, 파스칼 표기법은 프로그래밍에서 중요한 네이밍 컨벤션입니다. 이러한 표기법들은 코드의 가독성과 일관성을 유지하는 데 도움을 줍니다. 각 표기법에 대해 더 자세히 알아보겠습니다.케밥 표기법(Kebab Case)케밥 표기법은 모든 단어를 소문자로 작성하고 단어 사이를 하이픈(-)으로 연결하는 방식입니다.특징:모든 단어는 소문자로 표기단어 사이는 하이픈(-)으로 연결예: "user-name", "background-color", "reasons-to-build-a-blog"주요 사용 분야:HTML 속성 및 태그 이름CSS 클래스명과 IDURL 경로(SEO에 유리함)COBOL, Lisp, Perl 6 등의 프로그래밍 언어REST API 엔드포인트장점:가독성이 높음URL에 사용 시 검색..

첫번째카운트 업 버튼을 클릭시 1씩 증가하여 횟수가 올라가는 버튼을 만들어보면. 클릭하면 카운터가 올라갑니다. {{count}}회 카운터 업 카운터 다운 입력하고 라이브 서버로 열어보면 두번째 이번에는 카운터 버튼을 업 다운 두개의 버튼을 만들어 업버튼을 누르면 1씩 증가하고 다운 버튼을 누르면 1씩 감소하는 프로그램을 만들어보면 클릭하면 카운터가 올라가고 내려갑니다. {{count}}회 카운터 업! 카운터 다운! 코드를 입력하고 라이브서버로 열면

v-bind태그의 속성을 데이터로 지정할 때에는 v-bind​# v-bind는 자주 쓰이는 디렉티브로 생략이 가능하다. v-bind대신 " : "만 써도 가능하다.​img 태그의 src를 데이터로 지정>"> 이미지를 지정하는 예 >">직접지정 v-bind로 지정​코드를 작성하면 > 이미지가 화면에 출력이된다.​​링크 지정a 태그의 링크를 data: 의 프로퍼티로 URL을 지정 할 수 있다.​html>"> ​링크 지정 예제) 링크를 직접 지정 링크를 v-bind로 지정 ​​코드를 입력하고 라이브 서버로 열면 링크지정하는 창이 나온다, 우측 정렬, 좌측 정렬, 가운데 정렬 지정 블록 태그에서 align 요소 지정 우측 정렬 우측정렬 직접 지정 우측정렬을 v-bind 로..

Vue 인스턴스el 옵션 : 어떤 HTML 요소와 연결할지를 지정한다.data 옵션 : 어떤 데이터가 있는지를 지정한다.​# 머스테시(Mustache)는 콧수염이라는 의미이다. 중괄호 기호 { }를 옆으로 눕히면 콧수염처럼 보여서 머스태시라고한다.​​예제 .1) Hello를 출력해보면HTML {{ myText }} 하면 출력 값은 Hello!! 라고 나온다.. 2) v-text 데이터를 v-text로 표시하는 예제 ​앞에와 같이 Hello!!! 가 출력된다.​ 3) v-html HTML로 표시하는 예제 {{ myText }} 코드를 출력 해보면 ​Hello!!!Hello!!!​Hello!!!​로 출력이 된다. v-html로 지정한 경우는 HTML 태그가 유효하게 표시되는 것..

Vue.js - 자바스크립트 프레임워크 중 하나- 초보자도 간단하게 웹 페이지에 인터랙티브한 기능을 추가하는 것이 가능한 라이브러리 입니다.​SPA(Single Page Application)- 웹 페이지 하나에 여러 가지 기능을 넣어서 " 하나의 페이지로 동작하는 웹 어플리케이션"을 SPA라고 합니다.​프레임워크 - 복잡한 내용을 간단히 미리 규격화/모듈화 해둔 도구​프레임워크 사용시 - 기본 자바 스크립트에서 사용할 수 없던 문법이나, 입력방식들을 사용할 수 있게 되고, 타 플러그린을 통해 UI 컴포넌트나 스타일, 추가 기능 등을 불러다 쓰는 것도 가능해진다.​자바스크립트 프레임워크 - Vue/React/Angular​Vue.js : 데이터와 뷰를 연결해주는 역할MVVM : Model View Vie..

입력 문자를 감지하여 금지 문자가 입력되면 얼럿을 띄우는 방법 입력문자를 감시하여 금지문자가 입력 되면 얼럿을 띄우는 예제 금지문자는 : 「{{ forbiddenText }}」 코드를 입력하고 결과를 출력해보면 다른 방법으로 금지문자를 여러개 입력을 해서 얼럿을 띄우는 방법 자바스크립트 에서 문자열을 특정 구분자로 분할하기 위해서는 Split 함수를 사용한다. Split 함수를 사용하면 특정 구분자를 기준으로 문자열을 분리하여 결과를 배열로 반환. substring 함수와 indexOf 함수를 활용해 문자열을 특정 구분자로 자를 수 있다. ​ 금지문자를 여러개 입력해서 얼럿을 띄우는 방법 금지문자는 : ​