Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석-View.js-php.cn

这是使用 Vue.extend 创建的组件

这是直接使用 Vue.component 创建出来的组件

这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮

好用,不错!

这是私有的 login 组件

집

웹 프론트엔드

View.js

Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석

醉折花枝作酒筹

Mar 31, 2021 am 11:09 AM

vue

Vue 컴포넌트를 생성한다는 것은 Vue 인스턴스의 코드량을 나누고, 다양한 컴포넌트를 통해 다양한 기능을 찾는 것입니다. Vue에서 컴포넌트를 생성하는 세 가지 방법이 있습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다. Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석

방법 1: Vue.extend를 사용하여 전역 Vue 구성 요소 만들기

인스턴스:

var com1 = Vue.extend({
    template: &#39;<h3 id="这是使用-nbsp-Vue-extend-nbsp-创建的组件">这是使用 Vue.extend 创建的组件</h3>&#39; // 通过 template 属性，指定了组件要展示的HTML结构
     })

로그인 후 복사

Vue.component('组件名称', 创建的组件对象)来创建vue组件的时候，名称使用首字母大写来命名，引用组件时，将大写的改为小写字母，两个单词之前使用 - 连接；参数一：一个标签形式来引入组件的，参数二：template就是组件展示的HTMLcontent를 사용합니다.

<div id="app">
    <!-- 如果要使用组件，直接，把组件的名称，以 HTML 标签的形式，引入到页面中，即可 -->
    <mycom1></mycom1>
  </div>

  <script>
Vue.component(&#39;mycom1&#39;, Vue.extend({
      template: &#39;<h3 id="这是使用-nbsp-Vue-extend-nbsp-创建的组件">这是使用 Vue.extend 创建的组件</h3>&#39;
    }))
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {},
    });
  </script>

로그인 후 복사

얻은 결과는 다음과 같습니다.

Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석

방법 2: Vue.comComponent를 직접 사용

<body>
  <div id="app">
    <!-- 使用标签形式,引入自己的组件 -->
    <mycom2></mycom2>
  </div>

  <script>
    Vue.component(&#39;mycom2&#39;, {
      template:`<div>
                  <h3 id="这是直接使用-nbsp-Vue-component-nbsp-创建出来的组件">这是直接使用 Vue.component 创建出来的组件</h3>
                  <span>123</span>
               </div> `
    })
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: &#39;#app&#39;,
      data: {},
      methods: {}
    });
  </script>
</body>

로그인 후 복사

결과:

Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석

방법 3: 제어된 #app 외부에서 Vue.comComponent를 사용합니다. 템플릿 요소

제어된 #app 외부에서 템플릿 요소를 사용하여 구성 요소의 HTML 템플릿 구조를 정의합니다

<body>
  <div id="app2">
     <login></login>
    <mycom3></mycom3>
    <login></login>
  </div>
  <template id="tmpl">
    <div>
      <h1 id="这是通过-nbsp-template-nbsp-元素-在外部定义的组件结构-这个方式-有代码的只能提示和高亮">这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的只能提示和高亮</h1>
      <h4 id="好用-不错">好用,不错!</h4>
    </div>
  </template>
  <template id="tmpl2">
    <h1 id="这是私有的-nbsp-login-nbsp-组件">这是私有的 login 组件</h1>
  </template>
  <script>
    Vue.component(&#39;mycom3&#39;, {
      template: &#39;#tmpl&#39;,
    })
    // 创建 Vue 实例，得到 ViewModel
    var vm2 = new Vue({
      el: &#39;#app2&#39;,
      data: {},
      methods: {},
      filters: {},
      directives: {},
      components: { // 定义实例内部私有组件的
        login: {
          template: &#39;#tmpl2&#39;
        }
      },
    })
  </script>
</body>

로그인 후 복사

출력 결과:

Vue에서 구성 요소를 생성하는 여러 가지 방법에 대한 간략한 분석

참고: 구성 요소가 어떻게 생성되든 관계없이 구성 요소의 템플릿이 가리키는 콘텐츠에는 루트 요소가 하나만 있습니다.

핫 AI 도구

Video Face Swap

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

뜨거운 도구

뜨거운 주제

자바 튜토리얼

1667

Cakephp 튜토리얼

1426

라라벨 튜토리얼

1328

PHP 튜토리얼

1273

C# 튜토리얼

1255

Related knowledge

Vue에서 부트 스트랩을 사용하는 방법 Apr 07, 2025 pm 11:33 PM

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

Vue 용 버튼에 기능을 추가하는 방법 Apr 08, 2025 am 08:51 AM

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

Vue에서 시계를 사용하는 방법 Apr 07, 2025 pm 11:36 PM

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

Vue가 이전 페이지로 돌아 오는 방법 Apr 07, 2025 pm 11:30 PM

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

Vue 다중 페이지 개발은 무엇을 의미합니까? Apr 07, 2025 pm 11:57 PM

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

React vs. Vue : Netflix는 어떤 프레임 워크를 사용합니까? Apr 14, 2025 am 12:19 AM

NetflixusesAcustomFrameworkCalled "Gibbon"BuiltonReact, NotreactorVuedirectly.1) TeamExperience : 2) ProjectComplexity : vueforsimplerProjects, 3) CustomizationNeeds : reactoffersmoreflex.4)