Vue.js_vue.js의 *.Vue 파일에 대한 첫 소개
- 韦小宝원래의
- 2018-01-04 10:14:282312검색
vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 상향식 증분 개발 디자인을 채택했습니다. 이 글에서는 주로 Vue.J의 피트 채우기 일기*.Vue 파일에 대한 소개를 소개합니다.
Vue.js가 무엇인가요?
vue.js는 사용자 인터페이스 구축을 위한 진보적인 프레임워크로 상향식 증분 개발 디자인을 채택합니다. (상향식 설계 방법은 특정 장치, 논리 구성 요소 또는 유사한 시스템에서 시작하여 시스템 기능 요구 사항을 기반으로 하며 설계자의 숙련된 기술과 풍부한 경험을 바탕으로 이를 상호 연결, 수정 및 확장하여 필요한 시스템을 형성합니다.) Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있습니다. 시작하기 쉬울 뿐만 아니라 타사 라이브러리나 기존 프로젝트와도 쉽게 통합할 수 있습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리와 결합하면 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다.
*.vue 파일이란 무엇입니까?
우선, vue-cli 스캐폴딩을 사용하여 구축한 프로젝트에서 우리는 index.vue 또는 App.vue와 같은 많은 파일을 접했습니다. 이게 대체 뭐야? Vue 개발이 처음이라면 이전에 이런 것을 본 적이 없을 수도 있습니다. *.vue 파일은 HTML과 유사한 구문을 사용하여 Vue 구성 요소를 설명하는 사용자 정의 파일 형식입니다. 각 .vue 파일에는 세 가지 유형의 최상위 언어 블록 d477f9ce7bf77f53fbcf36bec1b69b7a, 3f1c4e4b6b16bbbd69b2ee476dc4f83a 및 c9ccee2e6ea535a969eb3f532ad9fe89이 포함되어 있습니다. 이 세 부분은 각각 html, js 및 css를 나타냅니다.
그 중 ca9ceec3554d5f69281718c4b9ecdc8b과 c9b47485ffa72dcd5b8084b9194e54f7은 미리 컴파일된 언어로 작성하는 것을 지원합니다. 예를 들어, 우리 프로젝트에서는 scss 사전 컴파일을 사용하므로 다음과 같이 작성합니다.
<style lang="scss">
html에는 자체 사전 컴파일된 언어도 있는데, vue도 지원하지만 일반적으로 프론트엔드 직원이 이를 지원합니다. 여전히 기본 언어인 html을 선호하므로 너무 자세히 설명하지는 않겠습니다.
또한 App.vue 파일에서 @import "./style/style" 문장을 사용하여 지정된 위치에 스타일을 작성했습니다. 따라서 이 부분의 내용은 이후의 모든 기사에 게재되지 않습니다. 모든 스타일은 src/style/ 폴더의 해당 위치에 작성됩니다. 이것의 장점은 다양한 scss 기본 파일을 반복적으로 소개할 필요가 없고, 프로젝트의 스타일 코드를 제어할 수 있다는 점입니다.
*.vue 파일 코드 분석
먼저 간단히 살펴보겠습니다.
<template>
<p>
<Header></Header>
<p class="article_list">
<ul>
<li></li>
</ul>
</p>
<Footer></Footer>
</p>
</template>
<script>
import Header from '../components/header.vue'
import Footer from '../components/footer.vue'
export default {
components: { Header, Footer },
data () {
return {
list: []
}
},
created () {
this.getData()
},
methods: {
getData () {
this.$api.get('topics', null, r => {
console.log(r)
})
}
}
}
</script>
<style>
.article_list {margin: auto;}
</style>위는 간단한 *.vue 파일의 기본 구조입니다. 부분별로 설명해 보겠습니다.
템플릿 부분
아래에서는 더 이상 *.vue 파일이라고 부르지 않습니다. Vue 컴포넌트로 변경되었습니다. 우선, vue 구성 요소의 템플릿은 html 구조를 나타내므로 모든 사람이 이해할 수 있다고 믿습니다. 그러나 d477f9ce7bf77f53fbcf36bec1b69b7a21c97d3a051048b8e55e3c8f199a54b2에 코드를 래핑하는 것만으로는 충분하지 않으며, 모든 코드를 래핑하려면 내부에 html 태그를 배치해야 한다고 말하는 것은 아닙니다. 이 예에서는 e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 태그를 사용합니다.
이게 뭐죠? 2432be42592c7cf43d7b271eae4dbb5a31a13137de512d4e98c7af37c2f9fe88 코드를 보면 다들 많이 놀라시겠죠? 실제로 이것은 사용자 정의 구성 요소입니다. 우리는 다른 곳에서 컴포넌트를 작성한 다음 이런 방식으로 소개할 수 있습니다. 마찬가지로 479c53d55bf259afb26198039255ccd72fd8772b288aec020c7313ab369d9e3e도 구성 요소입니다.
스크립트 부분
먼저 두 개의 사용자 정의 구성 요소가 필요하며 먼저 인용하겠습니다. 다음 형식이 이해하기 더 쉽습니다.
import Header from '../components/header.vue' import Footer from '../components/footer.vue'
둘째, 참조된 파일을 제외하고 모든 코드를 다음 코드로 래핑합니다.
export default {
// 这里写你的代码，外面要包起来。
}먼저 두 구성 요소인 Header 및 Footer 파일의 소스를 소개했습니다. 다음으로 참조된 구성 요소를 구성 요소로 선언해야 합니다. 이런 식으로 템플릿에서 사용할 수 있습니다.
components: { Header, Footer },데이터는 우리의 데이터입니다. 우리의 데모 코드는 빈 배열 데이터 목록을 제공합니다. 템플릿에서 this.list를 사용하여 데이터를 사용할 수 있습니다. 이에 대해서는 다음 글에서 다룰 예정이므로 여기서는 자세히 다루지 않고 그냥 알아두시면 됩니다.
data () {
return {
list: []
}
},created는 구성 요소가 로드될 때 실행되어야 하는 항목을 나타냅니다. 예를 들어 여기서는 로드가 완료되면 구성 요소가 this.getData()라는 함수를 실행하도록 합니다. 또한 vuejs의 Hook 함수 중 하나가 생성되었습니다. (구체적인 Hook 기능은 부록을 참고해주세요)
created () {
this.getData()
},methods는 우리 컴포넌트의 메소드이며, 함수라고도 할 수 있습니다. 예를 들어 위 코드는 구성 요소가 getData()라는 메서드 함수를 사용자 정의했음을 나타냅니다.
methods: {
getData () {
this.$api.get('topics', null, r => {
console.log(r)
})
}
}style 部分
这里比较简单，就是针对我们的 template 里内容出现的 html 元素写一些样式。如下，我的代码：
<style>
.article_list {margin: auto;}
</style>到这里，我们应该对 vue 组件文件有了一定的认知。后面的博文中，将会涉及到比较多的各种写法，因此，建议在阅读完本文后，花比较多的时间，去查看 vue 的官方文档。虽然文档你不一定能全部看懂，但要有一个大概的认识，否则下面的学习将会比较困难。
附录
勾子，可以理解为vuejs的生命周期，而函数则是生命周期内各个阶段的事件方法。如下图
总结
以上所述是小编给大家介绍的初识 Vue.js 中的 *.Vue文件，希望对大家有所帮助！
相关推荐：
위 내용은 Vue.js_vue.js의 *.Vue 파일에 대한 첫 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!