vue에서 JavaScript를 사용하는 방법-프런트엔드 Q&A-php.cn

Vue의 광범위한 적용과 인기로 인해 점점 더 많은 개발자가 Vue에서 JavaScript를 사용하기 시작했습니다. 이 기사에서는 Vue에서 JavaScript를 사용하는 방법과 기술을 소개하여 독자가 Vue 개발에 JavaScript를 사용하는 기술을 빠르게 익힐 수 있도록 돕습니다.

1. Vue에서 JavaScript 사용에 대한 기본 지식

Vue는 JavaScript 프레임워크이므로 Vue를 사용할 때 JavaScript는 분리될 수 없습니다. Vue에서는 ES6 이상의 JavaScript 언어가 주로 사용됩니다. ES6에서는 화살표 함수 및 템플릿 문자열과 같은 많은 새로운 구문과 기능을 JavaScript에 추가합니다.

또한 Vue에는 Vue 인스턴스라는 핵심 개념도 있습니다. Vue 인스턴스는 Vue 생성자를 통해 생성되며 Vue 구성 요소로 이해될 수 있습니다. Vue 인스턴스에서 JavaScript 코드를 사용하여 다양한 기능을 구현할 수 있습니다.

2. Vue에서 JavaScript를 사용하는 방법

Vue에서 JavaScript를 사용하는 방법은 다음과 같습니다.

1. Vue 템플릿에서 직접 JavaScript 표현식 사용

Vue 템플릿은 템플릿에서 직접 JavaScript 표현식을 사용하는 것을 지원합니다. 실시간으로 렌더링됩니다. 예:

{{ message }}

로그인 후 복사

이때 Vue는 메시지 변수의 값을 템플릿의 div에 렌더링합니다.

2. Vue 인스턴스에서 메서드 및 계산된 속성 정의

Vue 인스턴스에서는 다음과 같은 많은 메서드 및 계산된 속성을 정의할 수 있습니다.

var vm = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods: { greet: function () { alert('Hello ' + this.message + '!') } }, computed: { reversedMessage: function () { return this.message.split('').reverse().join('') } } })

로그인 후 복사

위의 예에서는 Greeting 메서드와 reversedMessage 계산 속성을 정의했습니다. 메시지 문자열의 역순 문자열입니다. 이러한 메서드와 계산된 속성은 인스턴스 이름 vm을 통해 템플릿에서 호출할 수 있습니다.

3. Vue 수명 주기 후크 기능에서 JavaScript 코드 사용

Vue는 인스턴스의 수명 주기 동안 자동으로 호출되는 여러 수명 주기 후크 기능을 제공하여 특정 기능을 구현하기 위해 후크 기능에 JavaScript 코드를 작성할 수 있습니다.

예를 들어, 생성된 후크 함수에 변수를 정의합니다.

var vm = new Vue({ el: '#app', created: function () { this.count = 0; }, methods: { addCount: function () { this.count++; } } })

로그인 후 복사

위의 예에서는 생성된 후크 함수에 변수 개수를 정의하고 addCount 메서드에서 매번 1씩 증가했습니다. 이 변수는 인스턴스의 count 변수를 통해 템플릿에서 액세스할 수 있습니다.

3. Vue에서 JavaScript의 일반적인 기능

Vue에서는 몇 가지 일반적인 기능을 사용할 수 있습니다.

1. DOM 요소 가져오기

JavaScript를 사용하면 DOM 요소를 얻을 수 있습니다. DOM 요소의 데이터는 Vue의 반응 메커니즘을 통해 Vue 인스턴스에 저장할 수 있습니다. 예:

var vm = new Vue({ el: '#app', data: { message: '' }, methods: { showMessage: function () { alert('you input is:' + this.message); } }, mounted: function () { var input = document.getElementById('messageInput'); input.addEventListener('input', function (event) { vm.message = event.target.value; }) } })

로그인 후 복사

위의 예에서는 마운트된 후크 함수에서 ID messageInput이 있는 DOM 요소를 획득하고 이벤트 리스너를 추가했습니다. 사용자가 데이터를 입력하면 이벤트가 트리거되고 입력된 데이터가 메시지에 저장됩니다. Vue 인스턴스.

2. 이벤트 바인딩

Vue는 v-on 지시문을 사용하여 이벤트 핸들러를 바인딩합니다. 예:

로그인 후 복사

위의 예에서는 사용자가 버튼을 클릭할 때 클릭 이벤트를 바인딩하기 위해 v-on 지시문을 사용합니다. 증가 메소드가 트리거됩니다.

3. 렌더링 목록 반복

Vue에서는 v-for 명령어를 사용하여 렌더링 목록을 반복할 수 있습니다. 예: