vue.js 파일을 HTML에 도입하는 방법
- 藏色散人원래의
- 2021-02-05 09:48:2822669검색
vue.js 파일을 HTML에 도입하는 방법: 먼저 Vue.js 공식 웹사이트에서 직접 vue.js 파일을 다운로드한 다음 "1ca22f4e35b7d7b597a1d4832832eab7eb30df65bcbc41de0fbbb08cb301be63" 메서드를 사용하여 로컬 vue.js 파일을 소개합니다.
이 문서의 운영 환경: Windows7 시스템, HTML5&&Vue2.2.2, Dell G3 컴퓨터.
vue.js 파일을 html로 어떻게 도입하나요?
Vue.js는 인기 있는 JavaScript 프런트 엔드 프레임워크로, 사용자 인터페이스 생성을 위한 오픈 소스 JavaScript 프레임워크로, 웹 개발을 더 잘 구성하고 단순화하도록 설계되었습니다.
Vue의 핵심 초점은 MVC 패턴의 뷰 레이어입니다. 동시에 데이터 업데이트를 쉽게 얻고 구성 요소 내의 특정 메서드를 통해 뷰와 모델 간의 상호 작용을 실현할 수도 있습니다.
그렇다면 vue.js 파일을 html에 어떻게 도입할까요?
방법 1. Vue.js 공식 홈페이지에서 vue.js 파일을 직접 다운로드하고 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 가져올 수 있습니다.
다운로드 주소: https://vuejs.org/js/vue.min.js
그런 다음 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 로컬 vue.js 파일을 소개하세요
<script src="vue/vue.min.js"></script>
참고: vue/vue.min.js is vue .js 파일의 상대 주소
방법 2: CDN 방법을 사용하고 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 사용하여 네트워크에 vue.js 파일을 도입합니다.
다음은 외국에서 추천하는 비교적 안정적인 CDN 2개입니다. 현재 중국에서는 어느 것이 더 좋은지 찾지 못했습니다.
Staticfile CDN(국내): https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg: https://unpkg.com/vue/dist /vue.js는 npm이 출시한 최신 버전과 일관성을 유지합니다.
cdnjs: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
권장: "vue tutorial"
Staticfile CDN( 국내)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>unpkg (권장)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>cdnjs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
</script>
</body>
</html>3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그
3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 JavaScript와 같은 클라이언트 측 스크립트를 정의하는 데 사용됩니다.
script 요소는 스크립트 문을 포함하거나 src 속성을 통해 외부 스크립트 파일을 가리킬 수 있습니다.
필수 유형 속성은 스크립트의 MIME 유형을 지정합니다.
JavaScript의 일반적인 응용 프로그램은 이미지 조작, 양식 유효성 검사 및 동적 콘텐츠 업데이트입니다.
3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 src 속성: 외부 스크립트 파일의 URL을 지정합니다.
위 내용은 vue.js 파일을 HTML에 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!