Vue元件（一）
阿新 • • 發佈：2021-01-27
Vue元件（一）
Vue元件介紹
Vue元件使用步驟
Vue元件的使用
元件中data 和 el 選項
使用 <script> 或 <template> 標籤
V元件
元件系統是Vue中一個重要的概念，他提供了一種抽象，可以獨立使用和可複用的小元件來構建大型應用，任意型別的應用介面都可以抽象為一個元件樹。元件是可複用的Vue例項，切帶有一個名字。元件可以擴充套件HTML元素，封裝可重用的HTML程式碼，可以將元件看作自定義的HTML元素。
Vue元件使用步驟
1.Vue元件的使用有以下3個步驟：
1. 建立元件：呼叫Vue.extend()方法建立元件
2. 註冊元件：呼叫Vue.component()方法註冊元件
3. 使用元件：使用Vue例項頁面內自定義標籤元件
2.樣例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id 注意：元件的命名方式有兩種：
- kebab-case(短橫線分隔命名)
- PasecalCase(首字母大寫命名)
因為直接在DOM中使用時只有 kebab-case(短橫線分隔命名)是有效的，所有一般推薦 kebab-case(短橫線分隔命名)方式命名。
Vue元件使用
元件註冊
1.全域性註冊
<div id="app">
<!--使用元件-->
<mycomp></mycomp>
</div>
<script>
//建立元件
var myComp=Vue.extend({
template:"<h2>使用Vue元件</h2>"
});
//註冊元件
Vue.component("mycomp",myComp);
//例項化元件
var vm=new Vue({
el:"#app"
})
</script>
2.區域性註冊
<div id="app">
<!--使用元件-->
<mycomp></mycomp>
</div>
<script>
//建立元件
var myComp=Vue.extend({
template:"<h3>使用區域性Vue元件</h3>"
})
var vm=new Vue({
el:"#app",
components:{
"mycomp":myComp//區域性註冊元件
}
})
</script>
3.元件語法糖
- 簡化全域性註冊
<div id="app">
<!--使用元件-->
<my-comp></my-comp>
</div>
<script>
//全域性註冊，my-comp是元件標籤名
Vue.component("my-comp",{
template:"<div><h3>使用Vue元件</h3></div>"
})
var vm=new Vue({
el:"#app"
})
</script>
- 簡化區域性註冊
<div id="app">
<!--使用元件-->
<mycomp></mycomp>
</div>
<script>
var vm=new Vue({
el:"#app",
//區域性註冊，mycomp是元件標籤名
components:{
"mycomp":{
template:"<div><h3>使用Vue元件</h3></div>"
}
}
})
</script>
元件中data 和 el 選項
一般例項化Vue的多數選項也可以用在Vue.extend)或Vue .component()中的，不過有兩個特殊選項引數除外即data和el。Vue.js 規定:在定義元件的選項時，data 和el選項必須使用函式。如果data選項指向某個物件，這意味著所有的元件例項共用一個data。使用一個函式作為data選項，讓這個函式返回一個新物件。
1. 全域性註冊元件語法
<script>
//全域性註冊元件
Vue.component("元件名稱"，{
el:function(){...}，
data:function(){
return{
屬性：值
}
},
template:"元件模板"
}
}
})
</script>
2. 區域性註冊元件語法
<script>
//區域性註冊元件
var vm=new Vue({
el:"#app",
components:{
"元件名稱":{
el:function(){...}
data:function(){
return{
屬性：值
}
},
template:"元件模板"
}
}
})
</script>
3. 樣例Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h3>新奇水果</h3>
<fruit-list-comp></fruit-list-comp>
</div>
<template id="fruitTemplate">
<div>
<ul>
<li v-for="fruit in items">{{fruit}}</li>
</ul>
</div>
</template>
<script>
var vm=new Vue({
el:"#app",
components:{
"fruit-list-comp":{
data:function(){
return{
items:["火龍果","蘋果","西瓜","草莓"]
}
},
template:"#fruitTemplate"
}
}
})
</script>
</body>
</html>
使用 <script> 或 <template> 標籤
儘管語法糖簡化了元件註冊，但在template 選項中拼接HTML元素比較麻煩，這也導致了HTML 和JavaScript 拼接的高耦合性。所有Vue提供了兩種方式將定義在 JavaScript 中的 HTML 模板分離出來。
1.使用 script 標籤
<div id="app">
<!--使用元件-->
<my-comp></my-comp>
</div>
<script type="text/javascript" id="myComp">
<div>
<h4>使用Vue元件</h4>
</div>
</script>
<script>
//全域性註冊，my-comp是元件標籤名
Vue.component("my-comp",{
template:"#myComp"
});
var vm=new Vue({
el:"#app",
components:{
"my-comp":{
template:"#myComp"
}
}
})
</script>
template選項現在不再是HTML元素，而是一個id。Vue.js根據這個id查詢對應的元素，然後將這個元素內的HTML作為模板進行編譯
2. 使用 template 標籤
如果使用 <template> ，則不需要指定type屬性
<div id="app">
<!--使用元件-->
<my-comp></my-comp>
</div>
<template id="myComp">
<div>
<h4>使用Vue元件</h4>
</div>
</template>
<script>
//全域性註冊，my-comp是元件標籤名
var vm=new Vue({
el:"#app",
components:{
"my-comp":{
template:"#myComp"
}
}
})
</script>