Vue 단일 파일의 참조 경로에 대한 방법은 무엇입니까?
이 글에서는 Vue 단일 파일의 참조 경로 처리에 대한 관련 정보를 주로 소개합니다. 이 글에서는 vue.js를 배우고 사용하는 모든 사람이 참조할 수 있는 학습 가치가 있습니다. 따라올 수 있습니다. 와서 저와 함께 배우세요.
Foreword
Vue의 단일 파일 구성 요소는 Vue를 사용할 때 매우 일반적으로 사용됩니다. Vue 단일 파일 개발 프로세스 중에 파일 경로 처리는 , 배경 스타일 처리 등 다음은 다양한 시나리오에서
의 src 처리에 대해 설명하고 vue+webpack을 사용하여 개발 프로세스 중에 정적 리소스(예: 이미지 처리)를 올바르게 참조하는 방법을 설명합니다.
아래에 표시된 것처럼 다양한 시나리오에서 이미지 경로를 참조하는 예는 아래 단일 파일 구성 요소에 제공됩니다(이미지 정적 리소스는 src/assets/small.png에 저장됨).
<template> <p id="app"> <!-- 1. 模版中src选项直接写相对路径 --> <img src="./assets/small.png" alt="图片相对路径测试"> <!-- 2. 模版中src选项绑定相对路径字符串 --> <img :src="relative_img" alt="图片相对路径测试"> <!-- 3. 模版中src选项绑定html绝对路径字符串 --> <img :src="absolute_img" alt="图片绝对路径测试"> <!-- 4. 模版中src选项绑定手动加载的图片资源 --> <img :src="smallImg" alt="图片资源测试"> </p> </template> <script> import smallImg from './assets/small.png'; export default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', }; }, } </script>
위의 코드 조각은 4가지 유형을 제공합니다. 시나리오에서는 img 태그를 사용하여 Vue 단일 파일 구성 요소의 이미지 리소스를 참조합니다. 물론 이 네 가지 방법 모두가 이미지 리소스를 올바르게 로드할 수 있는 것은 아닙니다.
시나리오 1:
템플릿의 상대 경로를 사용하여 src 속성에 직접 바인딩하면 이미지 리소스를 올바르게 로드할 수 있습니다. 우리는 웹팩이 vue 단일 파일 구성요소를 처리하는 과정에서 vue-loader가 주로 *.vue 파일 처리를 담당한다는 것을 알고 있습니다. vue-loader 문서의 vue-loader 리소스 경로 처리 섹션에서는 vue-loader가 템플릿에서 리소스 경로를 처리하는 방법을 설명합니다. 예: , background: url(), @import 등은 모듈 종속성으로 처리됩니다. 즉, 이러한 경우 vue-loader는 경로의 리소스 참조와 최종 경로 교체를 자동으로 처리합니다. img 처리는 다음과 같습니다.
<img src="./logo.png">
는 vue 템플릿 컴파일러에 의해 다음과 같이 컴파일됩니다.
createElement('img', { attrs: { src: require('./logo.png') }})
이것은 또한 vue-loader가 자동으로 리소스 및 경로 가져오기를 도와주기 때문에 사례 1에서 이미지 콘텐츠가 올바르게 표시될 수 있는 이유를 설명합니다. 교체 문제.
사례 2:
상대 경로 문자열 변수가 템플릿의 src 속성에 바인딩되어 있으면 이미지가 정상적으로 표시되지 않습니다. 그 이유는 vue-loader가 변수가 경로 문자열인지 식별할 수 없기 때문에 vue-loader가 자동으로 리소스를 도입하고 경로 교체를 하는 데에는 문제가 없습니다. 이 경우 컴파일된 템플릿은 여전히 상대 경로 문자열입니다. 분명히 해당 리소스 소개와 잘못된 경로가 없으면 이미지가 올바르게 표시될 수 없습니다.
상황 3:
상대 경로를 올바르게 표시할 수 없는 경우 많은 사람들이 절대 경로 변수를 사용하여 이미지를 가져오려고 합니다. 분명히 이 경우 이미지 리소스를 수동으로 가져오지 않았기 때문에 이미지를 표시할 수 없습니다. 참고: 많은 학생들이 리소스를 수동으로 도입한 다음 절대 경로 변수에 따라 src를 바인딩하려고 시도합니다. 실제로 dist/static/img/ 경로 아래에 참조된 리소스가 있지만 vue-cli 웹팩 템플릿의 url-loader가 있음을 발견합니다. img 유형 파일에서는 작동하지 않습니다. 로드 시 해시 값 처리가 추가됩니다. 이 경우 절대 경로 변수를 바인딩하더라도 해시 값이 추가된 이미지 파일과 정확하게 일치하지 않기 때문에 이미지를 올바르게 참조할 수 없습니다. 이미지를 수동으로 도입해야 하는 경우 상황 4에 대한 접근 방식이 권장됩니다.
사례 4:
템플릿에서 src 속성은 수동으로 도입된 이미지 리소스에 직접 바인딩됩니다. 이 경우 이미지가 올바르게 표시될 수 있습니다. 이 방법은 자동으로 가져온 경로에 해당하는 리소스를 처리할 때 vue-loader에서도 사용됩니다.
요약하자면, vue 단일 파일 구성 요소에서 이미지를 올바르게 표시하는 열쇠는 다음과 같습니다.
이미지 리소스가 필요하거나 가져온 경우 webpack의 url-loader에 의해 최종 디렉터리로 처리됩니다
img src 속성을 최종 이미지 리소스 경로로 바꿔야 합니다
위의 두 가지 사항은 필수입니다. Case 1과 Case 4에서 그림이 올바르게 표시될 수 있는 이유는 두 경우 모두 위의 두 가지 조건이 충족되기 때문입니다. 첫 번째 경우에는 vue-loader가 자동으로 이 작업을 수행했고, 네 번째 경우에는 수동으로 수행했습니다.
개발 중에 발생할 수 있는 문제:
개발 중에 그림 목록이 루프로 렌더링되는 시나리오가 발생할 수 있습니다. 위의 요약을 기반으로 그림 정보 개체의 배열을 구성할 수 있습니다. 예:
<template> <p id="app"> <!-- 1. 模版中 src 选项直接写相对路径 --> <img src="./assets/small.png" alt="图片相对路径测试"> <!-- 2. 模版中 src 选项绑定相对路径字符串 --> <img :src="relative_img" alt="图片相对路径测试"> <!-- 3. 模版中 src 选项绑定绝对路径字符串 --> <img :src="absolute_img" alt="图片绝对路径测试"> <!-- 4. 模版中 src 选项绑定手动加载的图片资源 --> <img :src="smallImg" alt="图片测试"> <!-- 5. 循环加载图片资源示例 --> <img v-for="image in imgList" :key="image.id" :src="image.src" :alt="image.title"> </p> </template> <script> import smallImg from './assets/small.png'; import bigImg from './assets/big.jpg'; export default { name: 'app', data() { return { smallImg: smallImg, relative_img: './assets/small.png', absolute_img: '/static/img/small.png', imgList: [ { id: 1, title: 'test1', src: require('./assets/logo1.png') }, { id: 2, title: 'test2', src: require('./assets/logo2.png') }, { id: 3, title: 'test3', src: require('./assets/logo3.png') }, ], }; }, } </script>
이것은 우리가 렌더링한 그림을 루프로 완벽하게 표시할 수 있습니다.
위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
js와 jQuery를 사용하여 지정된 할당 방법을 구현하는 방법
위 내용은 Vue 단일 파일의 참조 경로에 대한 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











vue.js에서 bootstrap 사용은 5 단계로 나뉩니다 : Bootstrap 설치. main.js.의 부트 스트랩 가져 오기 부트 스트랩 구성 요소를 템플릿에서 직접 사용하십시오. 선택 사항 : 사용자 정의 스타일. 선택 사항 : 플러그인을 사용하십시오.

HTML 템플릿의 버튼을 메소드에 바인딩하여 VUE 버튼에 함수를 추가 할 수 있습니다. 메소드를 정의하고 VUE 인스턴스에서 기능 로직을 작성하십시오.

vue.js의 시계 옵션을 사용하면 개발자가 특정 데이터의 변경 사항을들을 수 있습니다. 데이터가 변경되면 콜백 기능을 트리거하여 업데이트보기 또는 기타 작업을 수행합니다. 구성 옵션에는 즉시 콜백을 실행할지 여부와 DEEP를 지정하는 즉시 포함되며, 이는 객체 또는 어레이에 대한 변경 사항을 재귀 적으로 듣는 지 여부를 지정합니다.

VUE 멀티 페이지 개발은 vue.js 프레임 워크를 사용하여 응용 프로그램을 구축하는 방법입니다. 여기서 응용 프로그램은 별도의 페이지로 나뉩니다. 코드 유지 보수 : 응용 프로그램을 여러 페이지로 분할하면 코드를보다 쉽게 관리하고 유지 관리 할 수 있습니다. 모듈 식 : 각 페이지는 쉬운 재사용 및 교체를 위해 별도의 모듈로 사용할 수 있습니다. 간단한 라우팅 : 페이지 간의 탐색은 간단한 라우팅 구성을 통해 관리 할 수 있습니다. SEO 최적화 : 각 페이지에는 자체 URL이있어 SEO가 도움이됩니다.

vue.js에서 JS 파일을 참조하는 세 가지 방법이 있습니다. & lt; script & gt; 꼬리표;; mounted () 라이프 사이클 후크를 사용한 동적 가져 오기; Vuex State Management Library를 통해 수입.

vue.js는 이전 페이지로 돌아갈 수있는 네 가지 방법이 있습니다. $ router.go (-1) $ router.back () 사용 & lt; router-link to = & quot;/quot; Component Window.history.back () 및 메소드 선택은 장면에 따라 다릅니다.

vue.js가 트래버스 어레이 및 객체에 대한 세 가지 일반적인 방법이 있습니다. V- 결합 지시문은 V-FOR와 함께 사용하여 각 요소의 속성 값을 동적으로 설정할 수 있습니다. .MAP 메소드는 배열 요소를 새 배열로 변환 할 수 있습니다.

VUE에서 DIV 요소를 점프하는 두 가지 방법이 있습니다. VUE 라우터를 사용하고 라우터 링크 구성 요소를 추가하십시오. @Click 이벤트 리스너를 추가하고 이것을 호출하십시오. $ router.push () 메소드를 점프하십시오.
