vue.js原生元件化開發（一）——元件開發基礎
前言
vue作為一個輕量級前端框架，其核心就是元件化開發。我們一般常用的是用腳手架vue-cli來進行開發和管理，一個個元件即為一個個vue頁面，這種叫單檔案元件。我們在引用元件之時只需將元件頁面引入，再註冊即可使用。那麼不用腳手架，如何進行元件開發呢，本文先介紹一下基礎知識吧。
元件使用流程
1.元件構建
1.1 extend構建法
呼叫Vue.extend()方法，構建一個名字為myCom的元件
var myCom = Vue.extend({
template: '<div>這是我的元件</div>'
})
其中template定義模板的標籤，模板的內容需寫在該標籤下
1.2 template標籤構建法
template標籤構建，需在標籤上加id屬性用以後期註冊
<template id="myCom">
<div>這是template標籤構建的元件</div>
</template>
1.3 script標籤構建法
script標籤同樣需加id屬性，同時還得加type="text/x-template"，加這個是為了告訴瀏覽器不執行編譯裡面的程式碼
<script type="text/x-template" id="myCom1"> <div>這是script標籤構建的元件</div> </script>
2.註冊元件
（1）全域性註冊：一次註冊，可在多個vue例項中使用，需呼叫Vue.component()方法，這個方法需傳2個引數，第一個引數為元件名稱，第二個引數為元件構造時定義的變數。
我們先用全域性註冊註冊上面例子中建立的myCom元件
Vue.component('my-com',myCom)
還有一種不需構建直接註冊的寫法——註冊語法糖
Vue.component('my-com',{
'template':'<div>這是我的元件</div>'
})
'my-com'為給元件自定義的名字，在使用時會用到，後面myCom對應的就是上面構建的元件變數。
注意命名規範，一般元件名字以短橫線分隔或一個小寫單詞。
例：footer-nav，footernav
如果是用template及script標籤構建的元件，第二個引數就改為它們標籤上的id值
Vue.component('my-com',{
template: '#myCom'
})
（2）區域性註冊：只能在註冊該元件的例項中使用
var app = new Vue({
el: '#app',
components: {
'my-com': myCom
}
})
註冊語法糖
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '<div>這是我的元件</div>'
}
}
})
template及script構建的元件
var app = new Vue({
el: '#app',
components: {
'my-com': {
template: '#myCom'
}
}
})
3.呼叫元件
我們只需在需要呼叫元件的地方寫上元件名字的標籤即可
<div>
/*呼叫元件*/
<my-com></my-com>
</div>
4.例子
4.1 全域性註冊
新建一個html檔案，引入vue.js，並且定義2個vue例項app1和app2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue元件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
/*構建元件*/
var myCom = Vue.extend({
template: '<div>這是我的元件</div>'
});
/*全域性註冊元件*/
Vue.component('my-com',myCom);
/*定義vue例項app1*/
var app1 = new Vue({
el: '#app1'
});
/*定義vue例項app2*/
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
開啟瀏覽器檢視效果
可以看到全域性註冊的元件在例項app1和例項app2中都可以被呼叫
一次註冊，多處使用
4.2 區域性註冊
修改上面例子的html程式碼，將全域性註冊的元件改為區域性註冊，註冊到例項app1下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue元件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
</div>
<div id="app2">
<my-com></my-com>
</div>
<script>
var myCom = Vue.extend({
template: '<div>這是我的元件</div>'
});
// Vue.component('my-com',myCom);
/*區域性註冊元件*/
var app1 = new Vue({
el: '#app1',
components:{
'my-com':myCom
}
});
var app2 = new Vue({
el: '#app2'
});
</script>
</body>
</html>
開啟瀏覽器檢視效果
可以看到只渲染了app1例項下的元件，app2例項雖然呼叫了該元件，但是因為這個元件沒有在其內部註冊，也沒有全域性註冊，所以報錯說找不到該元件。
一次註冊，一處使用
4.3 template及script標籤構建元件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue元件</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app1">
<my-com></my-com>
<my-com1></my-com1>
</div>
<template id="myCom">
<div>這是template標籤構建的元件</div>
</template>
<script type="text/x-template" id="myCom1">
<div>這是script標籤構建的元件</div>
</script>
<script>
Vue.component('my-com1',{
template: '#myCom1'
});
var app1 = new Vue({
el: '#app1',
components:{
'my-com':{
template: '#myCom'
}
}
});
</script>
</body>
</html>
開啟瀏覽器檢視效果
非同步元件
當專案比較大型，結構比較複雜時，我們一般選用vue-cli腳手架去構建專案。因為vue-cli集成了webpack環境，使用單檔案元件，開發更簡單，易上手，尤其是在對元件的處理上。對於原生vue.js，我們就得將元件構建在同一個html的script標籤下或者html的外部js中，所有元件集中在一塊，不容易管理，這也是原生vue,js的一點不便之處。
當然，在不使用腳手架的情況下想將一個個元件分別獨立成一個個html檔案，再去引用註冊它們，也是可以實現的，但一般不推薦這樣做。
vue.js可以將非同步元件定義為一個工廠函式。
例子
新建一個head.html
<div>
這是頭部
</div>
在index.html中非同步引入head.html作為元件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue元件</title>
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app1">
<head-com></head-com>
</div>
<script>
Vue.component('head-com', function (resolve, reject) {
$.get("./head.html").then(function (res) {
resolve({
template: res
})
});
});
var app1 = new Vue({
el: '#app1'
});
</script>
</body>
</html>
當然要注意一點，使用$.get獲取本地檔案是會跨域的，所以我們要把專案部署到伺服器環境中。
我這裡用的是xampp整合環境，將專案資料夾component放置在xampp/htdocs下，然後訪問localhost/component/index.html，
效果如下
可以看到在index.html中引入的head.html裡的內容已經被新增進去
轉載至簡書：https://www.jianshu.com/p/3504a1edba42