vuejs의 인스턴스와 구성 요소의 차이점은 무엇입니까

차이점: 1. 인스턴스에는 el 마운트 지점이 있지만 구성 요소에는 없습니다. 2. 인스턴스에서는 "data:{}"이고, 구성 요소에서는 "data(){return{}}"입니다. 3. vue 인스턴스의 html 요소는 페이지에 직접 렌더링되는 반면 구성 요소의 html 요소는 템플릿에 정의된 다음 호출을 통해 페이지에 렌더링됩니다.

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

저번에 vue 단일 컴포넌트 항목과 라우팅을 작성할 때 문제가 있다는 생각이 들었습니다. new Vue({...})는 Vue 인스턴스이므로 구성 요소도 Vue 인스턴스인가요?

Analytics

앞서 말했듯이 개발 방법에는 두 가지가 있습니다. 하나는 브라우저 기반(즉, main.js가 스크립트에 직접 도입됨)이고, 다른 하나는 vue-cli(vue 프로젝트)로 구축된 명령줄 기반 개발 방식입니다.

실제 프로젝트가 대부분이니까요. 명령줄 개발 방법을 사용하므로 우리는 여전히 명령줄 개발 방법의 구성 요소에 대해 이야기합니다.

프로젝트의 main.js에서

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//这里就是一个vue实例
  el: '#app',//el挂载点
  router,
  components: { App },
  template: &#39;<App/>&#39;,//此处引根组件
})

그리고 App.vue 코드에서

<template>
  <div id="app">
       <div class="welcome">welcome! {{name}}, you are {{age}} years old</div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: &#39;App&#39;,
  data:function(){
    return {
      name:&#39;wangyue&#39;,
      age:&#39;25&#39;
    }
  },
  }
</script>

<style>
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
</style>

렌더링은 다음과 같습니다. 보라색 텍스트 아래에 있는 내용은 무시해도 됩니다.

확대 및 비교

vuejs에서 인스턴스와 구성 요소의 차이점

구성 요소의 데이터는 함수이고 구성 요소가 아닌 것은 데이터입니다.{}, 구성 요소는 그렇지 않습니다. el 마운트 지점 옵션이 있습니다. 공식 웹사이트에 따르면 구성 요소는 이름이 있는 재사용 가능한 Vue 인스턴스입니다.

vue 프로젝트에는 일반적으로 main.js에 정의된 VUE 인스턴스가 하나만 있고 나머지는 vue 구성 요소 인스턴스입니다. 사실 모두 Vue 인스턴스인데, 구분의 편의상 그렇게만 말씀드렸습니다. 루트 구성 요소 외에도 구성 요소에는 많은 작은 구성 요소가 있습니다.

즉,

1. vue 인스턴스에는 장착 요소를 지정하는 el이 있지만 구성 요소는 그렇지 않습니다. 왜냐하면 구성 요소도 호출하여 렌더링 페이지에 렌더링되고 구성 요소 이름을 호출하여 직접 렌더링되기 때문입니다.

2. 인스턴스와 구성 요소의 데이터 속성 형식이 다릅니다

vue 인스턴스의 데이터 속성: data:{"name":"aa","age":18}, 구성 요소의 데이터 속성: data(){ return{"name":"aa","age": 18} },

3. vue 인스턴스의 html 요소는 페이지에 직접 렌더링되는 반면 구성 요소의 html 요소는 페이지에 정의됩니다. 템플릿을 만든 다음 호출을 통해 페이지에 렌더링됩니다

관련 추천: "

vue.js tutorial

"

위 내용은 vuejs의 인스턴스와 구성 요소의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!