1. 什麼是組件?有兩種解釋 1. 第一種解釋: 什麼是組件? 1. 組件是 vue 中的一個可復用的實例,所以new Vue() 是vue中最大的那個組件(根組件),有名字,使用的時候以單標簽或雙標簽使用。 2. Vm = new vue() 是最大的組件,具有很多實用性的屬性,比如 data,m ...
1. 什麼是組件?有兩種解釋
1. 第一種解釋:
什麼是組件?
1. 組件是 vue 中的一個可復用的實例,所以new Vue() 是vue中最大的那個組件(根組件),有名字,使用的時候以單標簽或雙標簽使用。
2. Vm = new vue() 是最大的組件,具有很多實用性的屬性,比如 data,methods,computed等,所以定義的組件也有這些屬性。
2. 第二種解釋:
什麼是組件?
1. 組件的出現就是為了拆分 vue 實例的代碼量的,能夠讓我們以不同的組件,來劃分不同的功能模塊,將來我們需要什麼樣的功能,就可以調用對應的組件即可。
組件化和模塊化的不同之處?
模塊化:是從代碼邏輯的角度,進行劃分的,在node是給予模塊化的,node沒ui界面,node用得最多的是模塊化,把代碼按照不同的功能進行劃分,保證每個模塊化的值單一。方便後臺代碼,分離開發,保證每個功能模塊的 值 能單一。
組件化:是從ui界面的角度來劃分的,方便ui組件的重用
3. 組件的定義
1. vue 使用 Vue.component() 方法定義組件,這個方法有兩個參數,第一個是組件名,第二個是 options對象,這個對象裡面有 template,data,methods,computed等屬性。
2. template 是模板,裡面是html格式,只能有一個頂層標簽。
3. data 是放數據的,它是一個函數 return 一個對象,數據都放在這個對象離面。
全局註冊組件:
1. Vue.component 第一個參數,組件的名稱,將來 在引用組件的時候,就是一個以標簽形式來引入它的。
2. 第二個參數:將Vue.extend 省略掉,直接 {} 創建的組件,其中 template就是組件將來要展示的html內容。
Vue.component('mycom3', { template:'#tmp1' })
3. 屬於組件的結構,也要符合定義組件的規則,只能有一個唯一的根元素
<template id="tmp1"> <div> <h1>這是 template 在外部定義的組件結構,這個方式有代碼的提示和高亮</h1> <h3>好用</h3> </div> </template>
4. 在被控制的 #app 外面 使用咱們的 template 元素定義屬性的模板結構
<div id="app"> <mycom3></mycom3> </div>
以上都是創建全局的組件,所謂全局就是創建的組件不僅僅,能讓你app1能使用,
你再創建個vue根元素也能使用。
插件私有組件:
組件中的 data 和 實例中的 data 有什麼區別?
1. 組件可以有自己的 data 數據
2. 組件的 data 和 實例的 data 有點不一樣,實例中的data,可以為一個對象,但組件中的data,必須是個方法。
3. 組件中的 data 除了必須為一個方法之外,這個方法內部,還必須返回一個對象才行。
4. 組件中的 data 數據 使用方法 和 實例中的data 使用方式完全一樣。
作者:晉飛翔
手機號(微信同步):17812718961
希望本篇文章 能給正在學習 前端的朋友 或 以及工作的朋友 帶來收穫 不喜勿噴 如有建議 多多提議 謝謝!