>  기사  >  웹 프론트엔드  >  Vue 페이지는 무엇으로 구성되나요?

Vue 페이지는 무엇으로 구성되나요?

青灯夜游
青灯夜游원래의
2022-01-10 16:32:565767검색

A vue 페이지는 세 부분으로 구성됩니다. 1. 템플릿 태그로 래핑된 인터페이스 표시 코드(HTML 코드) 2. 스크립트 태그로 래핑된 비즈니스 구현 코드(js 스크립트 코드) CSS) 스타일 태그 스타일 코드로 래핑됩니다.

Vue 페이지는 무엇으로 구성되나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, vue 버전 2.9.6, DELL G3 컴퓨터.

Vue 페이지 구성

Vue 페이지는 크게 세 부분으로 구성됩니다.

  • <template>인터페이스 표시 코드(대형 div는 하나만 있을 수 있음)</template><template>界面展示代码(需要注意的是只能有一个大的div)</template>

  • <script>export default {业务实现代码}</script>

  • <style scoped >界面布局代码(scoped 解决了css全局污染)</style>

<script>기본값 내보내기 { 비즈니스 구현 code}</script>

<style 범위 >인터페이스 레이아웃 코드(범위가 지정되어 CSS 전역 오염 해결)</style>

HTML: You 템플릿에서 html 태그를 사용할 수 있으며 보다 시각적인 element-ui vant-ui 구성 요소도 가질 수 있습니다.

js: 스크립트: 계산된 바인딩 메서드가 탑재된 데이터 구성 요소 메서드 속성과 8개의 수명 주기 등이 있습니다.

css: scss less 전처리 등

vue family bucket

vue-cli + vue2.0 + vuex + vue-router + axios + element-ui

vue-cli는 vue 프로젝트를 빠르게 구축하기 위한 스캐폴딩입니다.

vue 2.0은 사용자 인터페이스 구축을 위한 진보적인 프레임워크인 vue.js입니다. vue는 버전 2.0에서 vdom을 도입했습니다. vdom 알고리즘은 snabbdom 알고리즘의 수정을 기반으로 합니다.

vuex 애플리케이션의 핵심은 store(warehouse)입니다. "Store"는 기본적으로 애플리케이션의 대부분의 상태를 포함하는 컨테이너입니다. vuex는 반응형이며 상태를 직접 변경할 수 없습니다. 가게에서. 표시해야 할 제출물

vue-router는 vue 생태계의 라우팅 도구로 라우팅을 사용하여 단일 페이지 프로그램을 쉽게 구현할 수 있습니다.

axios는 네트워크 요청 방식입니다. 도메인 간 문제를 해결할 수 있는 axios-jsonp도 있습니다. 🎜🎜element-ui는 개발자, 디자이너, 제품 관리자를 위해 준비된 vue2.0 기반의 데스크톱 구성 요소 라이브러리 세트입니다. 🎜🎜【관련 추천: 🎜vue.js tutorial🎜】🎜

위 내용은 Vue 페이지는 무엇으로 구성되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.