Vue는 웹 애플리케이션 개발에 널리 사용되는 매우 인기 있는 JavaScript 프레임워크입니다. Vue 프레임워크는 웹 애플리케이션 개발 프로세스를 매우 간단하게 만드는 많은 편리한 기능을 제공합니다. 하지만 Vue 프레임워크를 사용하여 애플리케이션을 개발하는 과정에서 외부 JS 파일의 메서드를 호출해야 하는 경우가 있습니다. 이 기사에서는 Vue 애플리케이션에서 외부 JS 파일의 메소드를 호출하는 방법을 살펴봅니다.
Vue 애플리케이션에서 외부 JS 파일의 메서드를 호출하려면 다음 단계를 수행해야 합니다.
1단계: 외부 JS 파일을 Vue 애플리케이션에 도입
Vue 애플리케이션에서는 스크립트 태그를 사용하여 외부 JS 파일을 가져올 수 있습니다. 파일을 가져옵니다. 외부 JS 파일을 도입하기 위해 Vue 파일의 템플릿 태그에 스크립트 태그를 추가할 수 있습니다. 예를 들어 hello.js라는 외부 JS 파일을 다음과 같이 도입할 수 있습니다.
<template>
<div>
<h1>调用外部JS文件中的方法</h1>
</div>
</template>
<script src="./hello.js"></script>
2단계: Vue 구성 요소 정의
Vue 애플리케이션에서는 템플릿에서 호출할 수 있도록 Vue 구성 요소를 정의해야 합니다. Vue 파일에서 Vue 구성 요소를 정의할 수 있습니다. 예를 들어 다음 코드는 HelloWorld라는 Vue 구성 요소를 정의합니다.
<template>
<div>
<h1>{{ greeting }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
greeting: "Hello, World!",
};
},
};
</script>
3단계: 외부 JS 파일의 메서드 호출
외부 JS 파일을 Vue 애플리케이션에 도입하고 Vue 구성 요소가 정의되면 메서드를 호출할 수 있습니다. Vue 구성 요소 내부의 외부 JS 파일에 있습니다. 외부 JS 파일에서 메소드를 호출하려면 Vue 인스턴스의 생성된 후크 기능을 사용해야 합니다. 먼저 ref 속성을 사용하여 Vue 구성 요소의 이름을 지정해야 합니다. 예를 들어 HelloWorld 구성 요소의 이름을 hello-world로 지정할 수 있습니다. 그런 다음 생성된 후크 함수의 $refs 속성을 사용하여 Vue 구성 요소에 액세스할 수 있습니다.
<template>
<div>
<hello-world ref="hello"></hello-world>
</div>
</template>
<script>
export default {
name: "App",
created() {
this.$nextTick(() => {
this.$refs.hello.setGreeting("Hello, Vue!");
});
},
};
</script>
여기 코드 조각에서 주목해야 할 몇 가지 핵심 사항이 있습니다.
hello.js 파일의 내용은 다음과 같습니다.
function setGreeting(greeting) {
document.getElementById("greeting").innerText = greeting;
}
module.exports = {
setGreeting,
};
hello.js 파일에서 setGreeting이라는 메서드를 정의하고 다른 JavaScript 파일에서 사용할 수 있도록 내보냅니다. 이 메서드의 기능은 전달된 문자열을 사용하여 인사말 요소의 텍스트 콘텐츠를 설정하는 것입니다.
이 글을 통해 Vue 애플리케이션에서 외부 JS 파일의 메소드를 호출하는 방법을 배웠습니다. 외부 JS 파일을 가져오고 Vue 구성 요소를 정의하는 방법을 배웠으며 Vue 구성 요소 내의 $refs 속성을 사용하여 외부 JS 파일의 메서드에 액세스하는 방법을 시연했습니다. 이러한 팁은 Vue 프레임워크를 보다 쉽게 사용하고 웹 애플리케이션 개발에 더 많은 유연성을 제공하는 데 도움이 될 수 있습니다.
위 내용은 vue는 외부 js의 메소드를 호출합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!