vue를 사용하여 모바일 단말기를 만드는 방법

다음으로 컴포넌트를 작성하고 div 태그에 마운트해야 합니다.

먼저 src 디렉터리에 컴포넌트 폴더를 생성한 후, 폴더 아래에 HelloWorld.vue 파일을 생성합니다. 코드는 다음과 같습니다.

<script><br>내보내기 기본값 {<br> 이름: 'HelloWorld',<br> 데이터 () {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return {   content: '',   list: [] }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>},<br> 메서드: {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">add() {   this.list.push(this.content)   this.content = '' }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>}<br>}<br></script>

템플릿 태그의 콘텐츠는 입력 상자, 버튼, 목록을 포함한 구성 요소의 레이아웃을 나타냅니다. 동시에 v-for 명령어는 목록에서 데이터를 탐색하고 페이지에 렌더링하는 데 사용됩니다.

스크립트 태그의 콘텐츠는 데이터와 메서드라는 두 가지 개체를 포함하는 구성 요소의 논리를 나타냅니다. 콘텐츠와 목록이라는 두 가지 속성은 사용자 입력 콘텐츠와 목록 데이터를 저장하는 데 사용됩니다. 메소드 객체는 사용자가 입력한 내용을 목록에 추가하고 입력 상자를 지우는 데 사용되는 add 메소드를 정의합니다.

그런 다음 App.vue에 구성 요소를 소개합니다.

import HelloWorld from './comComponents/HelloWorld'

export default {
이름: 'App',
구성 요소: {

HelloWorld

}
}

5 명령에서 프로젝트를 시작합니다

. 줄 창에 다음 명령을 입력합니다:

npm run dev

이 명령은 프로젝트를 시작하고 브라우저에 방금 작성한 페이지를 표시합니다.

6. 프로젝트 패키징

명령줄 창에 다음 명령을 입력하세요.

npm run build

이 명령은 프로젝트를 패키징하고 dist 디렉터리에 index.html이라는 파일을 생성합니다. 서버에서 응용 프로그램.

결론

위 내용은 vue를 사용하여 모바일 애플리케이션을 만드는 모든 단계입니다. 이 글을 소개한 후에 독자들은 이미 vue 사용 방법에 대한 사전 이해를 갖고 간단한 모바일 애플리케이션을 성공적으로 구현할 수 있다고 믿습니다. vue를 사용합니다. 물론 실제 개발에서도 vue를 더 잘 적용하여 점점 더 복잡한 애플리케이션 개발을 수행하려면 vue의 더 많은 기능과 특징을 계속 탐색하고 배워야 합니다.

위 내용은 vue를 사용하여 모바일 단말기를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!