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保证了数据单向流动, 数据的改变严格遵循图中的变化流程.

学习Vue.js

https://cn.vuejs.org/
https://vuex.vuejs.org/zh-cn/