Vue는 작고 가벼운 JavaScript 라이브러리입니다. 웹 애플리케이션을 개발할 때 개발자를보다 쉽고 편리하게 만들 수있는 간단하고 이해하기 쉬운 API가 있습니다. 사실, Vue가 항상 자랑스럽게 만든 것은 편의성, 실행 및 유연성입니다.
이 튜토리얼의 목적은 몇 가지 기본 개념과 기능에 대한 개요를 제공하기 위해 몇 가지 예제를 사용하는 것입니다. 다른 튜토리얼에서는 VUE와 함께 확장 가능한 프로젝트를 구축하기 위해 VUE의 유용한 기능을 배우게됩니다.
MVVM 데이터 바인딩
MVVM의 본질은 데이터 바인딩을 통해보기 및 모델을 링크하여 데이터 변경이 자동으로 업데이트를 볼 수 있도록하는 것입니다. Vue.js는 데이터 바인딩 API 설계에서 Angular의 명령 메커니즘을 빌려줍니다. 사용자는 특수 접두사가있는 HTML 속성을 통해 데이터 바인딩을 구현하거나 일반적인 곱슬 브레이스 템플릿 보간 보간을 사용하거나 양식 요소에 양방향 바인딩을 사용할 수 있습니다.
<!-지시-> <span v-text = "msg"> </span> <!-보간-> <span> {{msg}} </span> <!-양방향 바인딩-> <입력 V-model = "msg">보간은 본질적으로 템플릿 작성을 용이하게하기위한 지시입니다. 템플릿을 컴파일하는 동안 vue.js는 동적 업데이트가 필요한 각 DOM 노드에 대한 지침 객체를 만듭니다. 명령어 객체에 의해 관찰 된 데이터가 변경 될 때마다, 결합 대상 노드에서 해당 DOM 작업을 수행합니다. 명령 기반 데이터 바인딩을 통해 특정 DOM 작업은 명령 정의에서 합리적으로 캡슐화 될 수 있습니다. 비즈니스 코드는 데이터 상태에 대한 템플릿 및 운영 만 포함되므로 응용 프로그램의 개발 효율성과 유지 관리 가능성이 크게 향상됩니다.
Angular와 달리 Vue.js의 API는 모듈, 컨트롤러, 범위, 공장, 서비스 등과 같은 복잡한 개념이 없으며 모든 것이 "ViewModel 인스턴스"를 기반으로합니다.
<!-템플릿-> <div id = "app"> {{msg}} </div> // 네이티브 객체는 데이터 var data = {msg : 'hello!'} // viewModel 인스턴스 생성 var vm = new vue ({// 초기 데이터 제공 : // 데이터 제공 : 데이터}).렌더링 결과 :
<div id = "app"> hello! </div>
렌더링을하는 동안 vue.js는 또한 데이터의 동적 바인딩을 완료했습니다. data.msg의 값이 변경되면 DOM이 자동으로 업데이트됩니다. 매우 간단하고 이해하기 쉽습니까? 또한 vue.js는 사용자 정의 지침 및 필터의 API를 크게 단순화했습니다. 각도 개발 경험이 있다면 매우 빨리 시작할 것입니다.
데이터 관찰의 구현
vue.js의 데이터 관찰의 구현 원리는 본질적으로 Angular와는 다릅니다. Angular를 아는 독자는 Angular의 데이터 관찰이 더러운 검사 메커니즘을 사용한다는 것을 알고있을 수 있습니다. 각 명령어에는 감시자라고하는 데이터를 관찰하는 데 사용되는 해당 객체가 있습니다. 범위에 많은 감시자가있을 것입니다. 인터페이스를 업데이트해야 할 때마다 Angular는 현재 범위의 모든 감시자를 통해 반복하여 하나씩 평가 한 다음 이전에 저장된 이전 값과 비교합니다. 평가 결과가 변경되면 해당 업데이트가 트리거됩니다. 이 프로세스를 Digest Cycle이라고합니다. 더러운 점검에는 두 가지 문제가 있습니다.
모든 데이터 변경은 현재 범위의 모든 감시자를 재평가해야한다는 것을 의미하므로 감시자의 수가 엄청나게되면 응용 프로그램의 성능이 필연적으로 영향을 받고 최적화하기가 어렵습니다.
데이터가 변경되면 프레임 워크는 변경 발생을 적극적으로 감지 할 수 없습니다. 해당 DOM 업데이트를 트리거하려면 다이제스트 사이클을 수동으로 트리거해야합니다. Angular는 DOM 이벤트 핸들러 기능에서 다이제스트 사이클 부분을 자동으로 트리거 하여이 문제를 피하지만 사용자가 수동으로 트리거 해야하는 많은 상황이 여전히 있습니다.
vue.js는 종속성 컬렉션을 기반으로 한 관찰 메커니즘을 사용합니다. 원칙적으로, 그것은 오래된 MVVM 프레임 워크 녹아웃과 동일합니다. 의존성 수집의 기본 원칙은 다음과 같습니다.
기본 데이터를 "관찰 가능한 객체"로 변환합니다. 관찰 가능한 객체를 평가하거나 할당 할 수 있습니다.
감시자의 평가 과정에서, 취한 각 관찰 가능한 객체는 현재 감시자를 가입자로 등록하고 현재 감시자의 의존성이됩니다.
종속 관측 가능한 객체가 할당되면 모든 가입자에게 해당 업데이트를 다시 평가하고 트리거하도록 알립니다.
수집에 의존하는 장점은 데이터의 변화를 정확하고 사전에 추적 할 수 있으며 위에서 언급 한 더러운 점검에는 두 가지 문제가 없다는 것입니다. 그러나 녹아웃과 같은 기존 의존성 수집 구현은 일반적으로 기본 데이터를 래핑하여 관찰 가능한 객체를 생성해야합니다. 값을 가져 와서 값을 할당 할 때는 기능 호출을 사용해야합니다. 쓰기 방법은 번거롭고 데이터 작업을 수행 할 때 충분히 직관적이지 않습니다. 동시에 복잡한 중첩 구조를 가진 물체에 대한지지는 이상적이지 않습니다.
vue.js는 ES5의 객체를 사용하여 기본 데이터 객체의 속성을 Getters and Setter로 직접 변환 하여이 두 기능 내에서 종속성 수집 및 트리거링을 구현하고 중첩 된 객체 구조를 완벽하게 지원합니다. 배열의 경우 배열 변경은 푸시와 같이 배열을 감싸는 Mutable 메소드에 의해 청취됩니다. 이로 인해 Vue.js의 데이터를 작동하고 기본 객체를 작동하는 것이 거의 불가능합니다. [참고 : 속성을 추가/삭제하거나 배열에서 특정 요소를 수정할 때 업데이트를 트리거하려면 OBJ. $ add (키, 값)와 같은 특정 기능을 호출해야합니다. 이것은 ES5의 언어 기능에 의해 제한됩니다. ], 데이터 작동의 논리는 명확하고 매끄럽고 타사 데이터 동기화 솔루션과의 통합도 더 편리합니다.
구성 요소 시스템
대규모 응용 분야에서 노동 부서, 재사용 및 유지 관리를 위해, 우리는 필연적으로 응용 프로그램을 여러 비교적 독립적 인 모듈로 추상화해야합니다. 보다 전통적인 개발 모델에서는 멀티플렉싱을 고려할 때만 구성 요소의 일부만 만들 것입니다. 그러나 실제로 응용 프로그램과 같은 UI는 구성 요소 트리로 완전히 구성된 것으로 간주 될 수 있습니다.
따라서 구성 요소는 vue.js의 설계에서 핵심 개념으로 사용됩니다. 모든 vue.js 응용 프로그램은 구성 요소 주변에서 개발되었다고 말할 수 있습니다.
vue.js 구성 요소를 등록하는 것은 매우 간단합니다.
vue.component ( 'my-component', {// 템플릿 템플릿 : '<div> {{msg}} {{privatemsg}} </div>', // 매개 변수 수락 props : {msg : string <br>}, // private data, 당신은 여러 인스턴스를 피하기 위해 기능에서 반환해야합니다. }})등록 후 부모 구성 요소 템플릿에서 자식 구성 요소를 사용자 정의 요소로 호출 할 수 있습니다.
<my component msg = "hello"> </my-component>
렌더링 결과 :
<div> 안녕하세요 구성 요소! </div>
vue.js 구성 요소는 사전 정의 된 동작을 가진 뷰 모델 클래스로 이해할 수 있습니다. 구성 요소는 많은 옵션을 사전 정의 할 수 있지만 가장 중요한 옵션은 다음과 같습니다.
빌드 도구를 기반으로 한 단일 파일 구성 요소 형식
vue.js의 핵심 라이브러리는 기본 API 만 제공하며 응용 프로그램의 파일 구조를 구성하는 방법에 대한 제약 조건이 너무 많지 않습니다. 그러나 대규모 응용 프로그램을 구축 할 때는 WebPack + Vue-Loader의 조합을 사용하여 구성 요소 개발을보다 효율적으로 만드는 것이 좋습니다.
Webpack은 Tobias Koppers가 개발 한 오픈 소스 프론트 엔드 모듈 빌딩 도구입니다. 기본 기능은 모듈 형식으로 작성된 여러 JavaScript 파일을 하나의 파일로 패키지하고 CommonJS 및 AMD 형식을 모두 지원하는 것입니다. 그러나 고유 한 것은 다른 파일 형식에 대한 전처리 로직을 정의하는 강력한 로더 API를 제공하여 CSS, 템플릿 및 사용자 정의 파일 형식을 JavaScript 모듈로 사용할 수 있다는 것입니다. 웹 팩은 또한 자동 청킹 패키징 및 주문형로드, 이미지 리소스 참조의 자동 위치, 이미지 크기를 기반으로 한 Base64 인라인 결정, 개발 중 모듈 교체의 뜨거운 대체 등과 같은 로더를 기반으로 많은 고급 기능을 구현할 수 있습니다. 현재의 프론트 엔드 구조 분야에서 가장 경쟁력있는 솔루션 중 하나라고 할 수 있습니다.
Webpack Loader API를 기반으로 Vue-Loader 플러그인을 개발하여 단일 파일 형식 (*.vue)으로 vue 구성 요소를 작성할 수 있습니다.
<my-component h2 {color : red;} </style> <template> <div> <h2> {{msg}} </h2> <soys-component> </div> </template> <cript> // commonjs module var var var varcomponent = 요구 ( './export component') // export. {data : function () {return {msg : 'vue-loader'}}, 구성 요소 : { '기타 구성 요소': 기타 컴포넌트}} </script>동시에 *.Vue 파일에서 다른 전처리기를 사용할 수도 있고 해당 웹 팩 로더를 설치하기 만하면됩니다.
<스타일 lang = "Stylus">. my component h2 color red </style> <template lang = "jade"> div.my-component h2 hello from {{msg}} </template> <script lang = "babel"> // es2015export default {data () {return {babel에서 hello에서 hello helly! ' }}} </script>이러한 구성 요소 형식은 구성 요소의 템플릿, 스타일 및 로직의 세 가지 요소를 동일한 파일에 통합하여 개발, 재사용 및 유지 관리에 편리합니다. 또한 Vue.js 자체는 구성 요소의 비동기로드를 지원하고 Webpack의 청크 포장 기능과 결합하여 주문시 구성 요소의 비동기로드를 쉽게 구현할 수 있습니다.
다른 기능
vue.js에는 다음과 같은 다른 기능이 있습니다.
new vue ()를 사용하여 vue 인스턴스 생성
먼저 HTML 페이지를 초기화 한 다음 vue의 JS 파일을 소개해야합니다. 그것을 소개하는 방법에는 여러 가지가 있습니다. VUE의 CDN을 스크립트에 소개하거나 공식 웹 사이트에서 VUE의 Min.JS를 다운로드하거나 NPM을 사용하여 VUE 종속성을 설치할 수 있습니다. 편의를 위해이 기사는 CDN을 사용하여 소개됩니다.
<! doctype html> <html> <head> <title> 처음부터 배우십시오.
압축되지 않은 버전은 유용한 상세한 경고를 제공하고 코드 작성에 많은 시간을 절약 할 수 있기 때문에 개발할 때는 압축되지 않은 버전을 사용하고 있는지 확인하십시오.
우리는 먼저 신체에 div를 작성하고 VUE 인스턴스를 만들고 인스턴스와 div를 바인딩합니다.
새 VUE 인스턴스를 만들 때 Vue () 생성자를 사용하고 인스턴스에서 마운트 포인트를 가리키십시오. 이 마운트 포인트는 나누려는 VUE 인스턴스의 경계입니다. 마운트 포인트와 인스턴스 경계는 하나씩 해당합니다. 마운트 포인트의 인스턴스 경계 내에서만 트랜잭션 만 처리 할 수 있지만 마운트 포인트의 인스턴스 경계 외부의 트랜잭션은 처리 할 수 없습니다.
VUE 인스턴스에서 마운트 포인트를 설정하기위한 매개 변수는 "EL"이며 EL의 값은 DOM 요소에 의해 정의 될 수 있습니다.
<! docType html> <html> <head> <title> 처음부터 배우십시오 </title> </head> <body> <div id = "vueinstance"> 이것은 인스턴스 마운트 포인트의 인스턴스 경계입니다. // 새 vue 인스턴스를 생성하고 Mount Point를 설정합니다 var v = new vue ({el : '#VueInstance'}); </script> </body> </html>위에서 볼 수 있듯이 New Vue ()는 새 인스턴스를 생성 한 다음 DOM 요소를 인스턴스의 마운트 포인트로 지정합니다. 마운트 포인트를 정의 할 때 CSS 선택기의 ID를 사용하여 정의합니다. 인스턴스형 이름은 나중에 전화를 위해 자체적으로 정의 할 수 있습니다.
양방향 데이터 바인딩에 V- 모델을 사용합니다
V- 모델을 사용하여 입력 입력 상자를 바인딩 할 수 있으므로 동적으로 사용하여 데이터 객체의 값을 얻을 수 있습니다. v-model을 HTML 요소의 속성과 마찬가지로 지정된 속성으로 생각할 수 있습니다. 여기에서 양방향 데이터 바인딩은 입력, 텍스트 및 선택과 같은 여러 형태의 요소에 사용할 수 있습니다.
Vue는 V-Model 명령을 사용하여 데이터를 바인딩 하며이 데이터는 사용자 입력 작업을 통해 업데이트하려는 데이터입니다.
예를 들어, 아래의 예에서는 입력 태그의 데이터 이름을 바인딩하려고 VUE 인스턴스의 데이터 객체에서 선언을 구현해야합니다.
<div id = "vueinstance"> 이름을 입력하십시오 : <input type = "text"v-model = "name"> </div>
<script src = "http://cdn.jsdelivr.net/vue/1.0.16/vue.js"> </script> //이 줄이 생략 된 후 <Script> var v = new vue ({el : '#VueInstance', data : {name : '_appian'});사용자가 몇 번이나 들어가 더라도이 이름은 자동으로 업데이트됩니다. 또한 이름 값이 변경되면 이름이 매핑 된 다른 장소의 값도 수정됩니다.
이 입력 상자와 매핑의 동기 수정 이유는 V- 모드 명령어를 사용하여 데이터를 기본 데이터 스트림을 통해 바인딩 한 다음 직접 수정하기 때문입니다. 이것은 데이터의 양방향 바인딩의 개념입니다.
이 개념을 증명하기 위해 $ 데이터를 사용하여 데이터의 매핑을 인쇄 할 수 있습니다.
<div id = "vueinstance"> 이름을 입력하십시오 : <input type = "text"v-model = "name"> <p> {{$ data | json}} </p> //#1 <p> {{name}} </p> //#2 </div> <cript> var v = new vue ({el : '#vueinstance', data : {name : '_appian'}); </script>그것은 1입니다 :
$ 데이터는 VUE 인스턴스에서 관찰 된 데이터 객체입니다. 필수 유형은 객체이므로 JSON으로 변환 할 수 있습니다. 새 개체로 교체 할 수 있습니다. 인스턴스는 데이터 객체의 속성을 프록시합니다.
{{}}, 두 개의 곱슬 교정기와 보간하십시오. 여기에 삽입 된 값은 $ Data 씩 실시간으로 변경되는 값입니다.
| JSON, 데이터를 표시하는보다 직관적 인 방법입니다. json.stringify ()의 효과와 마찬가지로 필터로 간주 될 수도 있습니다.
Item 2:
{{name}}이란 보간 표현식에 직접 데이터 변수를 삽입하고 이름 값을 직접 매핑하기 위해 두 개의 곱슬 괄호를 삽입하는 것을 의미합니다.
VUE는 데이터의 양방향 바인딩을 수행하기에 매우 간단합니다. JS 또는 JQ를 사용하여 데이터를 제어하지 않고 V- 모델 명령 만 있으면됩니다. 위의 예에서 논리를 명확히 할 수 있다고 생각합니다.
이벤트 바인딩에 V-ON을 사용하십시오
Vue는 이벤트 청취 및 이벤트 배포에 V-ON 지침을 사용합니다. VUE 인스턴스에서 청취 이벤트를 바인딩하는 메소드를 만들 수 있으며 클릭 이벤트를 발송하는 메소드를 만들 수 있습니다.
다음 예에서는 버튼에 바인딩되는 Say 메소드를 작성합니다. 클릭의 효과는 사용자 이름으로 환영 상자를 팝업하는 것입니다. 이 메소드를 버튼에 할당하려면 V-On을 사용해야합니다. 이벤트를 바인딩하려면 클릭하십시오.
<div id = "vueinstance"> 이름을 입력하십시오 : <input type = "text"v-model = "name"> <버튼 v-on : "say"> 클릭에 오신 것을 환영합니다 </button> //#1 <button @click = "say"> 클릭 </button> //#2 </div>
<cript> var v = new vue ({el : '#vueinstance', data : {name : '_appian'}, method : {say : function () {alert ( 'welcome' + this.name);}}); </script>물론 클릭 클릭 클릭 이벤트를 바인딩 할 수있을뿐만 아니라 다른 마우스 이벤트, 키보드 입력 이벤트 및 기타 JS 이벤트 유형을 묶을 수도 있습니다. 예를 들어, V-ON : MouseOver, V-On : Keydown, V-On : 제출, V-ON : Keypress, V-On : KeyUp.13 등 또는 기타 사용자 정의 이벤트.
개발 과정에서 이벤트 바인딩을 자주 사용할 수 있습니다. V-ON을 작성하는 것은 약간 번거롭기 때문에 위의 예에서는 두 가지 방법이 있습니다. #2는 #1의 약어입니다. v-on 대신 @를 사용하면 여기에 많이 말하지 않을 것입니다.
V-IF 또는 V- 쇼를 사용하여 조건부 판단을 내립니다
사용자가 로그인 후 환영 팝업 창을보고 로그인하지 않으면 로그인 인터페이스를 제공합니다. VUE는 다른 로그인 상태에서 디스플레이 컨텐츠를 제어하기위한 V-IF 및 V-Show 지침을 제공합니다.
이전 예제를 사용하여 LoginStatus의 값을 사용하여 로그인 여부를 제어 할 수 있습니다. true 인 경우 입력 상자와 버튼이 표시되어 환영 팝업 창이 표시됩니다. 그러나 거짓 인 경우 (즉, 로그인되지 않음) 계정 번호, 암호를 입력하기위한 입력 상자와 제출 버튼 만 볼 수 있습니다 (당시 인증이없고 로그인 상태 만 변경됩니다).
<div id = "vueinstance"> // loginstatus가 true <section v-if = "loginstatus"> 이름을 입력 할 때 표시되는 섹션 : <input type = "text"v-model = "name"> <button v-on : "say"> click </button @click = "switchloginstatus"> loginlogins "> loginlogins">/nection "> groginlogins </section". loginstatus가 false <섹션 v-if = "! loginstatus"> loginperson : <input type = "text"> loginpassword : <입력 유형 = "password"> <button @click = "switchloginstatus"> login> </section> </div>
<cript> var v = new vue ({el : '#VueInstance', data : {name : '_appian', loginstatus : false}, method : {say : alert ( 'welcome' + this.name);}, switchloginstatus : function () {this.loginstatus =! }); </script>이것의 실행은 인스턴스 V입니다.이 포인팅은 스스로 이해해야하는 질문이므로 여기서는 이야기하지 않을 것입니다.
위의 예에서, V-IF가 V-Show로 대체되는 한, 동일한 효과를 얻을 수 있습니다. V-IF와 V-Show는 모두 v-else를 지원하지만 v-else 명령을 바인딩하는 태그의 이전 형제 요소에는 V-IF 또는 V-Show가 있어야합니다.
위의 예에서 "로그인"또는 "로그인"버튼을 클릭하면 SwitchLoginStatus 메소드가 트리거됩니다. 이 방법이 트리거되는 한 LoginStatus의 상태가 변경되어 (True 및 False로 전환) HTML에서 V-IF의 판단 조건 결과 변경이 변경됩니다. Loginstatus의 현재 부울 상태를 기반으로 표시된 섹션은 다른 상태의 섹션입니다.
V-Show와 V-IF의 차이점은 무엇입니까?
V-IF 블록을 전환 할 때 VUE는 로컬 컴파일/제거 프로세스가 있습니다. V-IF의 템플릿에는 데이터 바인딩 또는 하위 구성 요소가 포함될 수 있기 때문입니다. V-IF는 조건부 블록이 스위치 중에 조건부 블록 내의 이벤트 리스너 및 하위 구성 요소를 올바르게 파괴하고 재건되도록하기 때문에 실제 조건부 렌더링입니다.
V -IF는 또한 게으른다 : 초기 렌더링 중에 조건이 거짓 인 경우 아무것도 수행되지 않습니다. 조건이 처음으로 사실이되면 로컬 컴파일이 시작됩니다 (컴파일이 캐시됩니다).
대조적으로, V- 쇼는 훨씬 간단합니다. 요소는 항상 컴파일되고 보존되어 CSS를 기반으로 간단히 전환됩니다.
일반적으로 V-IF는 스위칭 소비가 높고 V- 쇼는 초기 렌더링 소비가 높습니다. 따라서 V- 쇼를 자주 전환하는 것이 좋습니다. 런타임에서 조건이별로 높지 않으면 V-IF를 변경하는 것이 좋습니다.
이 차이는 현재 개발에 중요하지 않을 수 있지만, 프로젝트 개발이 커지면 중요 해지 기 때문에 여전히주의를 기울이고주의를 기울여야합니다.
v-for to output 목록을 사용하십시오
전자 상거래 플랫폼을 실행하는 사업가 인 경우 제품 목록의 출력을 렌더링 해야하는 페이지가 많이 있어야합니다. V-For 지시문은 "ArrayoBJ의 요소"를 방해하는 "ArrayoBJ의 모든 요소를 루핑"하는 것으로 발음되며 배열 객체를 반복 할 수 있습니다.
다음 예에서는 V-FOR 명령어를 사용하여 제품 목록을 루프합니다. 각 제품은 LI에 있으며 제품의 이름, 가격 및 제품 유형이 출력됩니다.
<div id = "vueinstance"> <ul> <li v -for = "el in products"> {{el.name}} - ￥ {{el. 가격}} - {{el. 카테고리}} </li> </ul> </div> <cript> var v = new vue ({el : '#VueInstance', data : {products : [{name : 'microphone', price : 25, category : 'Electronics'}, 'name :'laptop case ', price : 15, category :'screener : 'screen cleener : 17, category :'{apceatory ','laperory ', 가격 : 70, 카테고리 : 'Electronics'}, {이름 : '마우스', 가격 : 40, 카테고리 : 'Electronics'}, 'Electronics'}, 'Elecphones', 'Earphones', 가격 : 20, '전자 장치'}, 'namous', 'monitor :'monitor : 120, 'Electronics'}}); </script>물론, 데이터의 배열 객체는 위의 정의없이 정의 될 수 있습니다. 데이터베이스에서 가져 오거나 AJAX 요청을 사용하여 얻을 수 있습니다. 이것은 V-FOR의 데모를위한 것입니다.
때로는 배열 객체에서 제품의 해당 첨자를 가져와야 할 수도 있습니다. 우리는 $ index로 그것을 얻을 수 있습니다.
//#1 <li v -for = "el in products"> {{$ index}} - {{el.name}} - ￥ {{el. 가격}} - {{el. 카테고리}} </li> //#2 <li v -for = "(index, el) 제품의"> {{index}} - {{el.name}} - {{el. 가격}} - {{el. 카테고리}} </li>계산 된 속성
속성 계산의 응용 시나리오에서는 다른 변수에 의해 계산 해야하는 가변 값이있을 때 사용됩니다.
예를 들어, 사용자가 입력 상자에 숫자 X를 입력하면 자동으로 사용자에게 숫자의 제곱 x²를 반환합니다. 입력 상자 데이터를 바인딩해야하며 데이터가 수정되면 즉시 제곱이 계산됩니다.
<div id = "vueinstance"> 숫자를 입력하십시오 : <input type = "text"v-model = "value"> <p> 계산 결과 : {{square}} </p> </div> <cript> var v = new vue ({el : '#vueinstance', data : {value : 1}, 계산 : {square : function () {return this.value * this.value;}}); </script>이전에 정의 된 메서드 객체를 정의했을 때와 마찬가지로 일련의 함수를 정의하여 속성 정의 값을 계산하십시오. 예를 들어, 제곱 방법은 변수 "square"를 계산하는 데 사용되며, 그 방법의 리턴 값은 this. values의 곱입니다.
다음으로 컴퓨팅을 사용하여보다 복잡한 예를 만들 수 있습니다. 시스템은 무작위로 1 ~ 10 이내에 숫자를 가져갑니다. 사용자는 입력 상자에서 1 ~ 10 이내에 숫자를 무작위로 입력 할 수 있습니다. 사용자의 입력이 시스템의 임의 숫자와 일치하는 경우 게임이 성공하면 실패합니다.
<div id = "vueinstance"> 1 ~ 10 내에 숫자를 입력합니다 : <입력 유형 = "text"v-model = "value"> <p> 계산 결과 : {{resultmsg}} </p> </div. <cript> var v = new vue ({el : '#VueInstance', data : {value : null, randnum : 5 // 첫 번째 임의 숫자는 5}, 메소드 : {getrandnum : function (min, max) {return Math.floor (math.random () * (max- min + 1)) +; (value == this.randnum = this추신
지금까지, 당신은 세계에서 가장 단순하고 가장 아름다운 프레임 워크 중 하나 인 Vue의 기본 사용을 마스터 할 수있었습니다. 그 구성은 자체적인 디자인 아이디어를 가지고 있으며 점점 더 인기를 얻고 있습니다. 이 프레임 워크는 개발에있어서 매끄러운 사용자 경험을 제공하고 개발 효율성을 효과적으로 향상시킬 정도로 작고 가볍습니다. 위의 일련의 예를 제시했습니다. 모두 마스터 했습니까?