vue 元件化開發基礎

建立元件構造器物件

註冊元件

使用元件

doctype html
>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>document
title
>
<
script 
src="../js/vue.js"
>
script
>
head
>
<
div 
id>
<
my-cpn 
/>
div>
<
body
>
<
script
>
//1、建立元件構造器物件
const cnpc 
=vue.extend()
//2、註冊元件
vue.component(
'my-cpn
', cnpc)
let vm 
=new
vue(),
methods: {}
})script
>
body
>
html
>

vue.extend（）建立了乙個元件構造器

通常在建立元件構造器的時候，通常會傳入  template  代表我們自定義元件的模板

該模板是使用元件的地方，顯示的html**

vue.component()

呼叫vue.component() 是將剛才元件構造器  構造的元件    註冊為乙個元件  ，並且給它起乙個標籤名

所需的有兩個引數：

1、標籤名    2、元件構造器名

Vue基礎 Vue元件化開發

目標 能夠知道元件化開發思想 能夠知道元件的註冊方式 能夠說出元件間的資料互動方式 能夠說出元件插槽的用法 能夠說出vue調式工具的用法 能夠基於元件的方式實現業務功能 目錄 元件化開發思想 元件註冊 vue除錯工具用法 元件間資料互動 元件插槽 基於元件的案例 1 元件化開發思想 把不同的功能封裝...

Vue基礎 七 Vue元件化開發

元件 component 是vue.js最強大的功能之一。元件可以擴充套件html元素，封裝可重用的 vue.component 元件名稱 第1個引數是標籤名稱，第2個引數是乙個選項物件 全域性元件註冊後，任何vue例項都可以用 執行效果 可以看到元件可以重複使用。元件引數的data值必須是函式同時...

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...