vue를 사용하여 텍스트 상자에 포함 된 미니 클릭 번호 타이밍 게임을 작성하십시오. 시작을 클릭하면 3 행과 3 개의 열이있는 테이블이 생성됩니다. 테이블 데이터는 무작위로 1에서 9로 배열됩니다.이 시점에서 1에서 클릭하고 순서대로 클릭하십시오. 올바른 순서로 클릭하면 사용 된 시간이 메시지가 표시됩니다. 주문이 올바르지 않으면 게임이 프롬프트됩니다.
1. 먼저 VUE 소스 코드를 다운로드하고 주소를 다운로드하십시오 http://cn.vuejs.org
2. JQuery는 DOM 운영을 지향하는 반면 VUE는 데이터 작업을 지향하는 반면 VUE를 사용할 때 DOM을 작동하지 않는 것이 가장 좋습니다.
3. 일반 HTML 파일을 만들고 헤더에서 vue의 소스 파일을 참조하십시오.
<head> <meta charset = "utf-8"/> <title> </title> <script type = "text/javaScript"src = "js/vue.js"> </script> </head>
4. 간단한 페이지
1) 우선, V- 모델, 데이터의 양방향 바인딩은 텍스트 상자에 입력 된 값에 따라 변경됩니다.
2) @Click은 클릭 이벤트를 바인딩합니다. 여기서 @는 V-ON의 약어입니다. 물론 바인딩 이벤트는 @click = 'time (item)'과 같은 매개 변수를 사용할 수 있습니다.
3) 목록의 v-for = "(색인, 항목)", 루프 배열, 인덱스는 배열의 각도이며 항목은 배열의 값입니다.
자세한 내용은 VUE 문서를 확인할 수 있습니다.
<body> <div id = "play"> <span> 번호를 입력하고 시작하려면 클릭하면 입력 번호에 해당하는 테이블이 생성됩니다. 테이블의 숫자 1에서 시작하여 순서로 끝까지 클릭하십시오 .... < /span> <br /> <input type = "number"v-model = "num" /> <button @click = 'arr'> start < /button> <br /> <div v-for = "(index, item)"> <br> <br> <br> <br> <br> <br> <br> style = "float : left;"> <button @click = 'time (item)'> {{item}} </div> </div> </div> </body>5. vue 작동
1) 먼저, VUE 인스턴스를 새로 사용하고 El은 DOM을 바인딩하고 ID를 식별자로 사용하십시오.
2) 데이터는 vue에서 작동 할 데이터, NUM 텍스트 상자의 값 (기본값은 2), 목록 [] 텍스트 상자 값, 생성 된 목록, 시작 시간 클릭 테이블 시작 시간, 종료 시간 클릭 테이블 종료 시간 및 현재 선택한 CheckNum 수에 따라
3) 텍스트 상자의 값을 기반으로 배열을 생성하는 메소드 ARR에는 텍스트 상자 값의 제곱 길이가있는 배열을 생성하는 두 가지 메소드가 있습니다. 배열의 값은 텍스트 상자 값의 1 평방이고, 텍스트 상자에 추가 된 값은 3이고, 생성 된 배열 길이는 9이고, 배열의 내용은 1-9이고 반복되지 않습니다.
시간은 클릭의 시작 시간과 종료 시간을 계산하고 CHECK] NUM을 사용하여 클릭 순서를 제어합니다.
<cript> new vue ({el : '#play', data : {num : 2, list : [], starttime : 0, endtime : 0, checknum : 0}, method : {arr : function () {if (this.num> 20) {alert ( '값이 너무 크다. this.num 1 ~ (arl j = 0; j <arr.length; {// 새로운 임의의 숫자를 재생성합니다. warttime (gettime). }) </script>6.CSS 코드
<style> .ibutton {마진-탑 : 10px; 마진 왼쪽 : 10px; 색상 : #ffff; 테두리 : 1px 고체 #8a6de9; 배경색 : #8a6de9; 글꼴 크기 : 14px; 패딩 : 6px 12px; Border-Radius : 7px; 너비 : 50px; 높이 : 40px; } </style>7. 특정 시나리오에서 VUE를 사용하여 기능을 완료하는 것은 jQuery보다 훨씬 간단하지만 jQuery는 여전히 매우 강력합니다. 다른 기술을 사용하여 다른 시나리오에 따라 더 빠르고 더 나은 기능을 완료하십시오.
이 기사는 "vue.js 프론트 엔드 구성 요소 학습 튜토리얼"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.