Vue組件基礎(chǔ)操作介紹

更新時(shí)間：2023年01月14日 15:49:31 作者：鳴鯛有柒

這篇文章主要介紹了Vue組件基礎(chǔ)操作，組件是vue.js最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無(wú)法相互進(jìn)行直接的引用

一、組件

組件是vue的重要的特征之一，可以擴(kuò)展html的功能，也可以封裝代碼實(shí)現(xiàn)重復(fù)使用。

二、組件的創(chuàng)建

1. 非腳手架方式下創(chuàng)建

? 第一步：使用Vue.extend創(chuàng)建組件

? 第二步：使用Vue.component注冊(cè)組件

? 第三步：在html頁(yè)面中使用組件

 <div id="app">
        <my-com></my-com>  <!-- 使用組件：名稱之間用'-'連接  -->
    </div>
    <script>
        //第一步：使用Vue.extend創(chuàng)建組件
        var mycom = Vue.extend({
            template:'<h2>白樺林</h2>'   //template：指定頁(yè)面中要展示的html結(jié)構(gòu)
        })
        //第二步：使用Vue.component注冊(cè)組件
        Vue.component('myCom',mycom)  //'myCom'是注冊(cè)的組件名，在注冊(cè)時(shí)采用駝峰命名
        new Vue({
            el:'#app'
        })
    </script>

2. 使用template創(chuàng)建組件

? 第一步：使用template創(chuàng)建html頁(yè)面模板，并給template定義id屬性

? 第二步：使用template的id屬性值進(jìn)行注冊(cè)

強(qiáng)調(diào)：在Vue實(shí)例外部通過(guò)Vue.component創(chuàng)建或注冊(cè)的組件稱為全局組件

局部組件：創(chuàng)建方式和全局組件的創(chuàng)建方式一樣，注冊(cè)時(shí)必須放在Vue實(shí)例內(nèi)部通過(guò)components完成

3. 在WebStorm中使用腳手架創(chuàng)建組件：

創(chuàng)建Vue component，組件命名采用駝峰命名法

  <template>
      //必須有一個(gè)html的標(biāo)簽作為模板的根標(biāo)簽
  </template>

三、組件中的data

1. 每個(gè)組件都有自己的數(shù)據(jù)：即每個(gè)組件都有自己的data

2. vue實(shí)例的data和組件的data的區(qū)別

? 1）vue實(shí)例的data是一個(gè)對(duì)象

? 2）組件的data必須是一個(gè)方法，該方法必須返回一個(gè)對(duì)象

3）vue實(shí)例中的data和組件中data在使用方法上是一樣的

四、組件中的methods

組件中的methods和vue實(shí)例中的methods用法相同

練習(xí)：定義一個(gè)Vue組件，組件的名稱是StudentInfo，在該組件中顯示3條學(xué)生信息(編號(hào)、姓名、性別、地址)

<template>
<div>
  <table border="1" align="center">
    <thead>
    <tr>
      <th width="100">編號(hào)</th>
      <th width="100">姓名</th>
      <th width="100">年齡</th>
      <th width="100">性別</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(info,index) in info" :key="index">
      <td>{{ info.id}}</td>
      <td>{{ info.name}}</td>
      <td>{{ info.age}}</td>
      <td>{{ info.sex}}</td>
    </tr>
    </tbody>
  </table>
</div>
</template>
<script>
export default {
  name: "StudentInfo",
  data(){
    return {
      info:[
        {id:1001,name:'黃忠',age:44,sex:'男'},
        {id:1001,name:'小喬',age:19,sex:'女'},
        {id:1001,name:'周瑜',age:22,sex:'男'},
        {id:1001,name:'劉備',age:34,sex:'男'},
      ]
    }
  }
}
</script>
<style scoped>
</style>

到此這篇關(guān)于Vue組件基礎(chǔ)操作介紹的文章就介紹到這了,更多相關(guān)Vue組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: