元件樹向元件傳遞資料
元件例項的生命週期
乙個完整的網頁是複雜的，如果將其作為乙個整體來進行開發，將會遇到下面的困難
vue推薦使用一種更加精細的控制方案——元件化開發
所謂元件化，即把乙個頁面中區域功能細分，每乙個區域成為乙個元件，每個元件包含：
由於沒有構建工具的支撐，css**暫時無法放到元件中元件是根據乙個普通的配置物件建立的，所以要開發乙個元件，只需要寫乙個配置物件即可
該配置物件和vue例項的配置是幾乎一樣的
//元件配置物件
var mytest =},
computed:
, methods:
, template:
`....`
}
使用元件分為兩步：註冊元件和應用元件
註冊元件：讓元件可以在模板中使用
應用元件：具體的在模板中使用元件
註冊元件分為兩種方式，一種是全域性註冊，一種是區域性註冊
全域性註冊
一旦全域性註冊了乙個元件，整個應用中任何地方都可以使用該元件
全域性註冊的方式是：
// 引數1：元件名稱，將來在模板中使用元件時，會使用該名稱
// 引數2：元件配置物件
// 該**執行後，即可在模板中使用元件
vue.
component
('my-test'
, mytest)
/>
>
my-test
>
但在一些工程化的大型專案中，很多元件都不需要全域性使用。區域性註冊區域性註冊就是**要用到元件，就在**註冊比如乙個登入元件，只有在登入的相關頁面中使用，如果全域性註冊，將導致構建工具無法優化打包
因此，除非元件特別通用，否則不建議使用全域性註冊
區域性註冊的方式是，在要使用元件的元件或例項中加入乙個配置：
// 這是另乙個要使用my-test的元件
var othertest =
, template:
` `;}
但要注意以下幾點：
元件必須有結束
元件可以自結束，也可以用結束標記結束，但必須要有結束
下面的元件使用是錯誤的：
>
元件可以使用kebab-case 短橫線命名法，也可以使用pascalcase 大駝峰命名法
下面兩種命名均是可以的
var othertest =
}
pascalcase方式命名還有乙個額外的好處，即可以在模板中使用兩種元件名
var othertest =
}
/>
/>
var mytest =
var othertest =
}
於是就形成了乙個元件樹
大部分元件要完成自身的功能，都需要一些額外的資訊
比如乙個頭像元件，需要告訴它頭像的位址，這就需要在使用元件時向元件傳遞資料
傳遞資料的方式有很多種，最常見的一種是使用元件屬性 component props
首先在元件中申明可以接收哪些屬性:
var mytest =
}, }, }
`}
var othertest =
,data()
},template:
` `
}
在生命週期的各個階段，會觸發呼叫一些函式，這些函式被稱為生命週期鉤子函式
最常用的兩個鉤子函式：created和mounted
created
created函式發生在注入之後、模板編譯之前，此時，元件還沒有呈現介面
如果有些資料需要經過某些計算得到，可以在這裡進行更改，屆時，在編譯中就會直接應用新的資料
但要注意，由於還未呈現介面，如果在這裡使用了特別耗時的計算，將導致長時間的白屏
mounted
mounted函式發生在掛載之後，此時頁面已經呈現，在這裡，可以用傳統方案獲取到dom，儘管不太常見
如果某些資料在一開始就需要更新，同時又特別耗時，建議放到mounted中
關於非同步**
如果某些元件一開始時要執行一些非同步**（如ajax），created和mounted均可，效果差別不大
因為由於事件迴圈的機制，會導致非同步**最終都會在掛載完後呼叫但如果非同步**需要特別長時間的準備（與很多因素有關），則建議放置到mounted
vue依賴元件 知識
知識 1 slot就是為了向元件內部傳遞指定的內容 2 npm list vue 檢視 vue的版本 3 vue v 檢視 vue cli 的版本 4 公升級vue cli 到3.x以上 需要重新 clean install npm uninstall vue cli g 先刪 npm instal...
VUE知識整理 元件
變異方法 push pop shift unshift splice sort reverse 事件修飾符 stop prevent self once v model的修飾符 1.lazy 預設是同步更新，如果加了.lazy修飾符，等游標離開後才會進行同步的更新。2.number 這個值無法被pa...
Vue元件相關知識
建立全域性元件的第一種方式 1.先呼叫 vue.extend 得到元件的建構函式 2.通過vue.component 元件名稱 元件的建構函式 來註冊全域性元件 3.把註冊好的元件名稱以標籤的形式引入到頁面中 輸出這是建立全域性元件的第一種方式建立全域性元件的第二種方式 輸出這是建立全域性元件的第二...