Vue學習 元件的學習

元件（component）是 vue.js 最強大的功能之一。元件可以擴充套件 html 元素，封裝可重用的**。在較高層面上，元件是自定義元素， vue.js 的編譯器為它新增特殊功能。在有些情況下，元件也可以是原生 html 元素的形式，以 is 特性擴充套件。

示例**：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>元件的學習
title
>
head
>
<
style
>
.box
/*選擇第乙個之外的
:not(:first-child):not(:last-child) 選擇非第乙個和最後乙個
*/.box:not(:first-child)
.box h2
style
>
<
body
>
<
div 
id>
<
h2 style
="text-align: center"
>}
h2>
<
my-box 
id="0"
text
="讓世界聽見你的聲音"
imgurl
="">
my-box
>
<
my-box 
id="1"
text
="拉鉤,夢想集市"
imgurl
="">
my-box
>
<
my-box 
id="2"
text
="下班後多乙份收入"
imgurl
="">
my-box
>
div>
<
script 
type
="text/x-template"
id="template"
>
<
div class="
box"
@click='
getinfo(id)
'>
<
img width="
120"v-
bind:src="
imgurl
"/>
<
h2>
}<
/h2>
<
/div>
script
>
<
script 
src=""
>
script
>
<
script
>
vue.component(
"my-box",
},});
var=
newvue(,
})script
>
body
>
html
>

注意：使用標籤時，type指定為text/x-template，意在告訴瀏覽器這不是一段js指令碼，瀏覽器在解析html文件時會忽略標籤內定義的內容。

示例**：

1、

<

div 
id>
<
h2 style
="text-align: center"
>}
h2>
<
my-box 
id="0"
text
="讓世界聽見你的聲音"
imgurl
="">
my-box
>
<
my-box 
id="1"
text
="拉鉤,夢想集市"
imgurl
="">
my-box
>
<
my-box 
id="2"
text
="下班後多乙份收入"
imgurl
="">
my-box
>
div>
<
template 
id="template"
>
<
div 
class
="box"
@click
='getinfo(id)'
>
<
img 
width
="120"
v-bind:src
="imgurl"
/>
<
h2>}
h2>
div>
template
>
<
script 
src=""
>
script
>
<
script
>
vue.component(
"my-box",
},});
var=
newvue(,
})script
>

<

div 
id>
<
h2 style
="text-align: center"
>}
h2>
<
my-box 
id="0"
text
="非常精美的人護手霜"
imgurl
="./images/1.png"
>
my-box
>
<
my-box 
id="1"
text
="非常精美的洗面奶"
imgurl
="./images/2.png"
>
my-box
>
<
my-box 
id="2"
text
="非常精美的洗衣粉"
:imgurl
="errorurl"
>
my-box
>
div>
<
script
>
//建立元件構造器
let probox 
=vue.extend(}
<
/h2>
<
/div>`,
methods:
},});
var=
newvue(,
components:,
})script
>

這種方法常用在vue單頁應用（spa）中。詳情看官網： 

建立.vue字尾的檔案,元件hello.vue，放到components資料夾中

Vue學習 元件學習

元件的出現，就是為了拆分vue例項的 量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可 元件化和模組化的不同 var test yk vue.extend vue.component testyk test yk vue.component t...

Vue學習 元件學習

元件的出現，就是為了拆分vue例項的 量的，能夠讓我們以不同的元件，來劃分不同的功能模組，將來我們需要什麼樣的功能，就可以去呼叫對應的元件即可 元件化和模組化的不同 var test yk vue.extend vue.component testyk test yk vue.component t...

Vue 元件學習

全域性註冊元件的過程 1 註冊 建立 乙個全域性元件，使用 vue.component tagname,options vue.component my component 2 建立根例項 3 在父例項的模組中以元件名的形式 類似自定義標籤 使用。渲染為 a custom component 區域性...