如何引入vue.js
官网有详细的介绍，有多种方式满足你的不同需求，我用的最简单快捷的方法，如直接<script>vue.js的地址(可以把vue.js下载下来放入静态文件夹static下)</script>引入，Vue 会被注册为一个全局变量。
引入 <script src="/static/vue/vue.js"></script>
为什么要开发自定义组件？
复用，高效率，好维护，方便协同开发。
了解Vue组件的组成部分
- Template: 就是html。
- Css: 为了让html好看。
- Component: Vue组件的核心，包含属性、传值、方法，其实就是把自定义组件注册下，成为vue的一员。
举例说明：光线移动的进度条
star-progress.png
Template
在原progress的基础上加上自定义的设置和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
基础样式是bootstrap.css，再加上自定义样式。
考虑到浏览器兼容器性，开发css需要多研究不同浏览器的特点，有针对的设置。
.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用于接收来自父组件的数据。官网举了props使用例子以及命名大小写的说明。
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名。
举例：prop：myName -> DOM: my-name
通过该组件可以更直观的发现，类似于为新组件增加了新属性，为了便于理解，我是这么说服自己的。
当然在以后的项目中，会再次发现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内容贴这，用单引号或反单引号括起来，像这样: ` <ul>...</ul>`
})
到此，新的进度条组件就开发完成了，怎么应用呢？
如何应用自定义组件？
Html
像html普通组件一样使用，传值通过vue实例的data数据，这是双向绑定的。vue框架是MVVM模式，所以决定了数据是双向绑定的，这是另一个课题，有兴趣自行查阅资料。
<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一个实例，设置data数据，即可显示进度条的数值。
var v = new Vue({
el: '#app',
data: {
rate: 0,
rateMin: 0,
rateMax: 100,
rateValue: '准备中'
}
....
总结
在之前的项目中开发了多个vue自定义组件，像进度条，菜单栏，时间框等，觉得有必要重新整理思路以备以后查阅，也希望有志同道合的人一起讨论。
前端开发变化多端，新技术层出不穷，宗旨只有一个，那就是更方便更快捷的开发出所需的页面。
