Vue.js
概念
官方说法是, Vue.js是一套构建用户界面的渐进式框架,和同类型的框架相较而言它更轻量级. 通过大概一个月的学习和实践我觉得它最重要的特点是响应式渲染DOM数据以及组件化. 再结合Vuex形成一套单向的数据流向系统.
响应式的数据渲染
<span id="demo">{{count}}</span>
let demo = new Vue ({
el: '#demo',
data: {
count: 0,
timer: undefined
},
computed: {
message: function () {
return this.count;
}
},
mounted: function () {
this.timer = setInterval(() => this.count++, 1000);
},
watch: {
count: function () {
if(this.count >= 5) {
clearInterval(this.timer)
}
}
}
});
使用vue, 可以非常方便的监控和操作DOM数据.
组件化,单文件组件
<template>
<span id="demo" :stop="stop">{{message}}</span>
</template>
<script>
export default {
data () {
return {
count: 0,
timer: undefined
}
},
props: ['stop'],
computed: {
message: function () {
return this.count
}
},
mounted: function () {
this.timer = setInterval(() => this.count++, 1000)
},
watch: {
count: function () {
if (this.count === Number(this.stop)) {
clearInterval(this.timer)
}
}
}
}
</script>
<style scoped>
</style>
如果你要使用该单文件组件,只需要在需要的文件中引入该组件即可,这种模式有利于模块化和业务扩展.
vuex状态管理与单向数据流
这是我从vuex官网截取的一张vuex的机制图. vuex保证了数据单向流动, 数据的改变严格遵循图中的变化流程.