如何引入vue.js
官網(wǎng)有詳細的介紹携取，有多種方式滿足你的不同需求卿捎，我用的最簡單快捷的方法辽社，如直接<script>vue.js的地址(可以把vue.js下載下來放入靜態(tài)文件夾static下)</script>引入喘先，Vue 會被注冊為一個全局變量。
引入 <script src="/static/vue/vue.js"></script>
為什么要開發(fā)自定義組件解幽？
復(fù)用贴见，高效率，好維護躲株，方便協(xié)同開發(fā)片部。
了解Vue組件的組成部分
- Template: 就是html。
- Css: 為了讓html好看霜定。
- Component: Vue組件的核心档悠，包含屬性、傳值望浩、方法辖所，其實就是把自定義組件注冊下，成為vue的一員磨德。
舉例說明：光線移動的進度條
Template
在原progress的基礎(chǔ)上加上自定義的設(shè)置和css樣式奴烙。
<script type="x-template" id="star-progress-block">
<ul class="border-box">
<li style="font-size:40px;"><span v-text="perValue"></span></li>
<li>
<div>
<progress class="progress-linear" :value="value - min" :max="max - min" style="width:100%"></progress>
<div ref="star" class="star-light" v-bind:style="starStyle"></div>
</div>
</li>
<li style="color:rgb(93,133,141);"><slot></slot></li>
</ul>
</script>
Css
基礎(chǔ)樣式是bootstrap.css，再加上自定義樣式剖张。
考慮到瀏覽器兼容器性切诀，開發(fā)css需要多研究不同瀏覽器的特點，有針對的設(shè)置搔弄。
.border-box {
height: 130px;
padding: 20px;
border: 1px solid rgb(45, 44, 60);
}
/*漸變+星光進度條*/
progress.progress-linear {
width: 200px;
height: 1px;
color: #5D858D;
/*兼容IE10的已完成進度背景*/
border: none;
background-color: #2D3C41;
/*這個屬性也可當作Chrome的已完成進度背景幅虑，只不過被下面的::progress-bar覆蓋了*/
}
@keyframes foxfire-bg-gradient
{
0% {background-image: -moz-linear-gradient(0deg, #56BBCA 0%, #2D3C41 100%);}
10% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 10%, #2D3C41 100%);}
20% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 20%, #2D3C41 100%);}
30% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 30%, #2D3C41 100%);}
40% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 40%, #2D3C41 100%);}
50% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 50%, #2D3C41 100%);}
60% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 60%, #2D3C41 100%);}
70% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 70%, #2D3C41 100%);}
80% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 80%, #2D3C41 100%);}
90% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 90%, #2D3C41 100%);}
100% {background-image: -moz-linear-gradient(0deg, #2D3C41 0%, #56BBCA 100%);}
}
@keyframes chrome-bg-gradient
{
0% {background-image: -webkit-linear-gradient(0deg, #56BBCA 0%, #2D3C41 100%);}
10% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 20%, #2D3C41 100%);}
20% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 40%, #2D3C41 100%);}
30% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 60%, #2D3C41 100%);}
40% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 80%, #2D3C41 100%);}
50% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 100%);}
60% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 80%, #2D3C41 100%);}
70% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 60%, #2D3C41 100%);}
80% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 40%, #2D3C41 100%);}
90% {background-image: -webkit-linear-gradient(0deg, #2D3C41 0%, #56BBCA 20%, #2D3C41 100%);}
100% {background-image: -webkit-linear-gradient(0deg, #56BBCA 0%, #2D3C41 100%);}
}
.star-light {
position: relative;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #ECFABD;
}
/*firefox*/
progress.progress-linear::-moz-progress-bar {
animation-name: foxfire-bg-gradient;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/*chrome*/
progress.progress-linear::-webkit-progress-bar {
background-color: #2D3C41;
/*背景顏色*/
}
progress.progress-linear::-webkit-progress-value {
animation-name: chrome-bg-gradient;
animation-duration: 3s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
Component
為了讓新組件成為vue的一員，所以需要注冊顾犹。
其中props用于接收來自父組件的數(shù)據(jù)倒庵。官網(wǎng)舉了props使用例子以及命名大小寫的說明。
camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名炫刷。
舉例：prop：myName -> DOM: my-name
官網(wǎng)：https://cn.vuejs.org/v2/guide/components-props.html
通過該組件可以更直觀的發(fā)現(xiàn)擎宝，類似于為新組件增加了新屬性，為了便于理解浑玛，我是這么說服自己的绍申。
當然在以后的項目中，會再次發(fā)現(xiàn)props的用處確實是父組件傳遞值到子組件中顾彰。特別是當一個.vue文件作為組件的時候极阅，尤其明顯。而且這種傳值是單向的涨享，父傳子筋搏。
Vue.component('star-progress-block', {
data: function () {
return {}
},
props: {
min: {
type: Number,
default: 0
},
max: {
type: Number,
default: 100,
},
value: {
type: Number,
default: 0,
},
perValue: {
type: String,
default: ''
}
},
computed: {
'starStyle': function() {
var top = '-5px', left = '' + ((this.value - this.min)/(this.max - this.min)) * 100 + '%'
return {top, left}
}
},
template:'#star-progress-block' // 也可以把star-progress-block內(nèi)容貼這，用單引號或反單引號括起來厕隧，像這樣: ` <ul>...</ul>`
})
到此奔脐，新的進度條組件就開發(fā)完成了俄周，怎么應(yīng)用呢？
如何應(yīng)用自定義組件髓迎？
Html
像html普通組件一樣使用栈源，傳值通過vue實例的data數(shù)據(jù)，這是雙向綁定的竖般。vue框架是MVVM模式，所以決定了數(shù)據(jù)是雙向綁定的茶鹃，這是另一個課題涣雕，有興趣自行查閱資料。
<div class="col-md-3 first">
<star-progress-block
:value="rate"
:min="rateMin"
:max="rateMax"
:per-value="rateValue">
測試
</star-progress-block>
</div>
Script
既然需要vue實例闭翩，所以new一個實例挣郭，設(shè)置data數(shù)據(jù)，即可顯示進度條的數(shù)值疗韵。
var v = new Vue({
el: '#app',
data: {
rate: 0,
rateMin: 0,
rateMax: 100,
rateValue: '準備中'
}
....
總結(jié)
在之前的項目中開發(fā)了多個vue自定義組件兑障，像進度條，菜單欄蕉汪，時間框等流译，覺得有必要重新整理思路以備以后查閱，也希望有志同道合的人一起討論者疤。
前端開發(fā)變化多端福澡，新技術(shù)層出不窮，宗旨只有一個驹马，那就是更方便更快捷的開發(fā)出所需的頁面革砸。
