Vue를 사용하여 기본 시스템을 구축하는 방법

프런트 엔드 기술의 급속한 발전으로 Vue.js는 업계에서 널리 사용되는 Javascript 프레임워크가 되었습니다. 복잡한 단일 페이지 웹 애플리케이션을 구축하는 데 사용할 수 있습니다. 이 글에서는 Vue를 사용하여 기본 시스템을 구축하는 방법을 소개합니다.

1. 시작하기

먼저 Vue를 로컬에 설치해야 합니다. 공식 Vue.js 라이브러리를 직접 다운로드하거나 npm을 사용하여 다음과 같이 설치할 수 있습니다.

npm install vue

Vue.js 라이브러리를 HTML 페이지에 소개합니다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vue CLI(명령어)를 통해 새 프로젝트를 빠르게 빌드할 수 있습니다. 라인 인터페이스). 여기서는 Vue CLI 3을 사용하여 새 프로젝트를 만듭니다.

npm install -g @vue/cli
vue create my-project

입력해야 할 일련의 구성 옵션이 있습니다. 선택한 후 새 Vue 프로젝트를 만들 수 있습니다.

2. 컴포넌트 생성

Vue는 MVVM 모드를 채택합니다. 즉, 뷰 레이어와 데이터 레이어가 분리되어 있습니다. Vue.js를 통해 컴포넌트를 빠르게 생성할 수 있으며, 컴포넌트는 데이터의 컨테이너와 같습니다.

컴포넌트를 생성하는 것은 매우 간단합니다. Vue 인스턴스에 컴포넌트를 등록하고 필요한 데이터와 메서드를 선언하기만 하면 됩니다. 다음은 구성 요소를 생성하는 간단한 예입니다.

<div id="app">
  <my-component></my-component>
</div>

Vue.component('my-component', {
  data: function () {
    return {
      message: 'Hello Vue!'
    }
  },
  template: '<div>{{ message }}</div>'
})

new Vue({ el: '#app' })

위 코드에서는 Vue.comComponent 메서드를 통해 Vue 인스턴스에 "my-comComponent"라는 구성 요소를 등록했습니다. 해당 데이터는 data 메소드의 message 속성에서 가져옵니다. Vue.component 方法注册了一个名为“my-component”的组件。它的数据来源于 data 方法中的 message 属性。

最后，在 Vue 实例中将 my-component 组件挂载到指定的 HTML 元素上。

3. 组件通信

在 Vue 中，组件间通信是比较常见的需求，下面说明一下组件之间的通信方式。

3.1 Props

Props 是一种将数据传递给子组件的方式。它允许父组件通过属性绑定传递数据给子组件。

父组件模板中：

<template>
  <child-component :message="messageFromParent"></child-component>
</template>
<script>
export default {
  data() {
    return {
      messageFromParent: 'parent message'
    }
  }
}
</script>

子组件模板中：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

在上述代码中，我们在父组件 template 标签中创建了一个名为“child-component”的子组件，并使用 :message 属性传递了一个名为 messageFromParent 的字符串。

子组件的 props 是一个对象，用来定义当前组件可以接收的属性及其类型。在这个例子中，子组件只用了一个 message 属性，它的类型是 String。

3.2 Event

Event 是一种允许子组件向父组件通信的方式。它允许子组件通过事件通知父组件发生了某些事情。

子组件模板中：

<template>
  <div @click="onChildClick">click me</div>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      this.$emit('child-click')
    }
  }
}
</script>

父组件模板中：

<template>
  <child-component @child-click="onChildClick"></child-component>
</template>
<script>
export default {
  methods: {
    onChildClick() {
      console.log('child clicked')
    }
  }
}
</script>

在上面的代码中，子组件中的 @click 监听了一个点击事件，并通过 $emit 方法向父组件发射了一个名为“child-click”的事件。

父组件中的 <child-component> 使用了 @child-click 来监听该事件，并在“onChildClick”方法被触发时，控制台将输出“child clicked”。

4. 路由

在 Vue 中，路由是一个重要的概念。它允许我们根据不同的 URL 跳转到不同的页面。Vue 框架中使用的是 Vue Router 来实现路由功能。

首先需要在项目中安装 Vue Router：

npm install vue-router --save

在 router.js 文件中创建一个路由组件：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

使用 Vue.use 来安装 Vue Router，然后定义了两个路由，分别为主页和关于页面，并通过 component

마지막으로 my-comComponent 구성 요소를 Vue 인스턴스의 지정된 HTML 요소에 마운트합니다.

3. 컴포넌트 통신

Vue에서는 컴포넌트 간 통신이 일반적인 요구사항입니다.

3.1 Props

Props는 하위 구성 요소에 데이터를 전달하는 방법입니다. 이를 통해 상위 구성 요소는 속성 바인딩을 통해 하위 구성 요소에 데이터를 전달할 수 있습니다. 🎜🎜상위 구성 요소 템플릿에서: 🎜

import Vue from 'vue'
import router from './router'
import App from './App.vue'

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

🎜하위 구성 요소 템플릿에서: 🎜rrreee🎜위 코드에서는 상위 구성 요소 template 태그에 "child-comComponent"라는 하위 구성 요소를 생성했습니다. :message 속성을 ​​사용하여 messageFromParent라는 문자열을 전달했습니다. 🎜🎜하위 구성 요소의 props는 현재 구성 요소가 받을 수 있는 속성과 유형을 정의하는 데 사용되는 개체입니다. 이 예에서 하위 구성 요소는 하나의 message 속성만 사용하고 해당 유형은 String입니다. 🎜

3.2 이벤트

🎜이벤트는 하위 구성 요소가 상위 구성 요소와 통신할 수 있도록 하는 방법입니다. 이를 통해 하위 구성 요소는 이벤트를 통해 어떤 일이 발생했는지 상위 구성 요소에 알릴 수 있습니다. 🎜🎜하위 구성 요소 템플릿: 🎜rrreee🎜상위 구성 요소 템플릿: 🎜rrreee🎜위 코드에서 하위 구성 요소의 @click은 클릭 이벤트를 수신하고 $emit를 전달합니다. 메소드는 상위 구성요소에 "child-click"이라는 이벤트를 발생시킵니다. 상위 구성 요소의 🎜🎜<child-comComponent>는 @child-click을 사용하여 이벤트를 수신하고 "onChildClick" 메서드가 트리거되면 콘솔이 "자식 클릭"을 출력합니다. 🎜🎜4. 라우팅🎜🎜Vue에서는 라우팅이 중요한 개념입니다. 이를 통해 다양한 URL을 기반으로 다양한 페이지로 이동할 수 있습니다. Vue 프레임워크는 Vue Router를 사용하여 라우팅 기능을 구현합니다. 🎜🎜먼저 프로젝트에 Vue Router를 설치해야 합니다. 🎜rrreee🎜router.js 파일에 라우팅 구성 요소를 만듭니다. 🎜rrreee🎜Vue.use를 사용하여 Vue Router를 설치한 다음 두 가지를 정의합니다. 각각 홈 페이지와 정보 페이지에 대한 Routes 이며, 각 경로에 해당하는 구성 요소는 comment 속성을 ​​통해 지정됩니다. 🎜🎜마지막으로 Vue 인스턴스에 라우팅 구성 요소를 도입해야 합니다: 🎜rrreee🎜5. 요약🎜🎜이 기사에서는 Vue를 사용하여 기본 시스템을 구축하는 방법을 간략하게 소개했습니다. 시작부터 구성 요소 통신 및 라우팅까지 Vue의 작은 부분만 다루었습니다. Vue에는 많은 강력한 기능이 있습니다. 이 기사가 초보자에게 도움이 되기를 바랍니다. 🎜

위 내용은 Vue를 사용하여 기본 시스템을 구축하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!