vue 예제

아래 예제에서는 새 Vue()를 통해 새 Vue 개체가 만들어집니다. 설명 – 위의 예에서, 우리는 입력 할 세 개의 텍스박스가 – 이름, 성 및 주소. 삭제 버튼이있는 테이블 형식으로 텍스트 상자에 입력 된 값을 추가하는 추가 버튼이 있습니다. 이 예제에서는 여러 서비스와 총 비용을 보여 줍니다. 우리의 서비스는 배열에 저장되기 때문에 v-for 지시문을 활용하여 모든 항목을 반복하여 표시 할 수 있습니다. 새 요소가 배열에 추가되었거나 이전 요소가 변경되면 Vue.js가 자동으로 업데이트되고 새 데이터가 표시됩니다. Vue.js에는 이러한 예제에서 선보인 것보다 훨씬 더 많은 것이 있습니다. 라이브러리는 또한 애니메이션, 사용자 정의 구성 요소 및 기타 기능의 모든 종류를 제공합니다. 우리는 당신이 정보와 유용한 조각으로 가득 우수한 공식 문서를 확인하는 것이 좋습니다. 먼저 Vue를 사용하는 가장 기본적인 예제를 사용합니다.

gothinkster / vue- 현실 세계 예제 – 응용 프로그램에서 새로운 릴리스의 알림을 원하십니까? 설명 – 위의 예에서, 우리는 다른 통화의 선택한 값으로 통화의 한 값을 변환 통화 변환기를 만들었습니다. 우리는 통화의 두 드롭 다운을 만들었습니다. 텍스트 상자에 변환할 금액을 입력하면 변환 후 아래와 동일이 표시됩니다. 우리는 통화 변환에 필요한 계산을 수행 하기 위해 계산 된 속성을 사용 하는. 마지막 예제에서는 페이지에 레이아웃 모드가 다른 일반적인 시나리오를 보여 줍니다. 이전 앱과 마찬가지로 배열에 저장된 tutorialzine.com 문서 목록이 표시됩니다. 실제 사양 및 API를 준수하는 실제 예제(CRUD, 인증, 고급 패턴 등)를 포함하는 Vue.js 코드베이스입니다. 이 코드가 수행하는 일은 #example 요소에 템플릿으로 연결된 새 Vue 앱을 인스턴스화합니다 (일반적으로 CSS 선택기를 사용하여 정의되지만 HTMLElement에서도 전달할 수 있음).

Vue.js의 철학은 뷰(HTML)와 모델(JavaScript 개체) 간에 실시간 양방향 데이터 바인딩을 만들기 위한 가장 간단한 API를 제공하는 것입니다. 다음 예제에서 볼 수 있듯이 라이브러리는 해당 아이디어에 충실하며 기능을 손상시키지 않으면서 손쉽게 작업할 수 있습니다. 이전 예제에서 모델에는 미리 정의된 값이 몇 개만 있었습니다. 사용자에게 데이터를 설정할 수 있는 기능을 제공하려면 양방향 바인딩을 수행하여 입력 필드를 모델 속성과 함께 연결할 수 있습니다. 텍스트를 입력하면 text_content 모델에 자동으로 저장되어 뷰가 업데이트됩니다. 방금 프로젝트 중 하나에 대해 Vue.js를 평가하기 시작했습니다. Vue.js는 굉장하고 아주 잘 문서화되어 있습니다. 다음은 스타터에게 매우 유용한 예입니다. 이 공유 대니 감사합니다. 나는 항상 Vue.js를 사용하는 방법에 대한 보다 구체적인 예를 원했고 지금은 그들을 가지고있다.

고마워, 대니. 다음은 우리가 당신을 위해 구축 한 예제 애플 리케이션을 포함하는 다섯 편집자입니다. 코드에는 많은 주석이 있으며 각 파일의 탭으로 분리되어 있어 따라하기가 정말 쉽습니다. 편집자는 Vue.js가 내장되어 있으므로 실험을 두려워하지 마십시오. 또한 이 문서의 맨 위에 있는 다운로드 단추에서 모든 예제가 포함된 아카이브를 다운로드할 수 있습니다. 이 멋진 단어 뒤에 아이디어는 모델과 보기가 항상 동기화 유지된다는 것입니다.