模組化：是從**邏輯的角度進行劃分的
元件化：是從ui介面的角度進行劃分的
第一種方法
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
src=
"">
script
>
type
="text/css"
>
style
>
head
>
>
>
>
mycom1
>
div>
>
// 1.1使用vue.extend來建立全域性的vue元件
// var com1 = vue.extend()
// 1.2使用vue.component("元件的名稱","建立出來的元件模版物件")
// 如果使用
// 如果使用vue.component定義全域性元件的時候，元件名稱使用了駝峰命名，則在引用元件的時候，需要把大寫的駝峰改為小寫的字母,同時兩個單詞之前使用 - 鏈結
// 如果不使用駝峰命名就直接使用
// vue.component('mycom1',com1)
// vue.component('mycom1',com1)
// vue.component第乙個引數：元件的名稱，將來在引用元件的時候，就是乙個標籤形式引入；第二引數：vue.extend建立的元件，其中template就是元件將來要展示的html內容
vue.
component
('mycom1'
,vue.
extend()
)var vm =
newvue(,
methods:})
;script
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
src=
"">
script
>
type
="text/css"
>
style
>
head
>
>
>
>
mycom2
>
div>
>
vue.
component
('mycom2',)
var vm =
newvue(,
methods:})
;script
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
src=
"">
script
>
type
="text/css"
>
style
>
head
>
>
>
>
mycom3
>
div>
"tmpl"
>
>
>
這是通過template元素，在外部定義的元件結構h1
>
>
好用h4
>
div>
template
>
>
vue.
component
('mycom3',)
var vm =
newvue(,
methods:})
;script
>
body
>
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
documenttitle
>
src=
"">
script
>
type
="text/css"
>
style
>
head
>
>
>
>
login
>
div>
>
var vm =
newvue(,
//私有元件
components:}}
);script
>
body
>
html
>
Vue學習筆記之元件模板
在html5標準中標籤裡只能寫,但又希望row元件的內容顯示在中，可以使用is屬性 在根元件裡，定義data可以直接通過物件定義，但在非根元件裡定義data，data必須是乙個函式，而且要返回乙個包含資料的物件，這是因為乙個子元件不像根元件只會被呼叫一次，子元件在很多地方都會被呼叫，每乙個子元件都應...
Vue父子元件建立
1.首先搭建vue cli簡易腳手架 搭建步驟 2.在src目錄下新建component資料夾 3.在component下新建父元件頁面user.vue,在component下新建子元件頁面main.vue 4.mian.vue頁面中 如下 注意 template下方只能有乙個根元素 我是子元件 m...
vue元件的建立
為了可重用性高，減少重複性開發，我們可以按照template style script的拆分方式，放置到對應的.vue檔案中。vue元件可以理解為預先定義好的viewmodel類。乙個元件可以預定義很多選項，最核心的有 模板template 模板反映了資料和最終展現給使用者的dom之間的對映關係，初...