【web前端】简洁的VUE

Vue.js 是用于构建交互式的 Web 界面库，主打轻量级，通过简洁的API提供高效的MVVM数据绑定和一个可组合的组件系统。Vue.js 专注于 MVVM 模型的 ViewModel 层，通过双向数据绑定把View层和Model层连接起来，实际的DOM操作和输出格式被抽象的方式到指令（Directives）和过滤器（Filters），特点是简单、快速、组合、对模块友好；

AngularJS完全使用JavaScript编写的客户端技术，同其它Web技术（html、css、js）结合使用，使Web应用开发比以往更简单、更快捷，它的特点是动态视图、由google这个强大的后台做维护、技术完善且大而全，学起来有一定难度；

Avalon.js是一个简单易用的迷你MVVM框架，它是为解决同一业务逻辑存在各种视图呈现而开发出来的，它的特点是在HTML中添加绑定，在JS中用avalon.define定义ViewModel，再调用avalon.scan方法，使用类似CSS的重叠覆盖机制，让各个ViewModel分区交替地渲染页面。

这三种前端技术各有利弊，个人用过Vue，比较喜欢它的filter功能，但是周围用AngularJS的偏多，Avalon没怎么接触过。总体来说它们的风格很相像，过渡起来不会太难。

MVVM的本质是通过数据绑定连接View和Model，让数据的变化自动映射为视图的更新，不管view还是model，一层的变化总是及时的同步到另一层。在Vue.js中，ViewModels是实例化的Vue的构造器或者是它的子类，View是用户可见的html、DOM页面，Model可看成是javascript对象，Component组件是一个简单的视图模型构造函数（通过一个关联的ID，嵌套其它视图模型），filter过滤器可以在数据传输到页面之前进行一定的处理（有点类似于方法的作用）。

Demo示例：

html：

<div class="content">
	<a @tap="readme(item)">
		<a v-href="http://baidu.com">百度一下</a>
		<span>{{getCount(1)}}</span>
		<span>{{this.message | test}}</span>
	</a>
</div>

Vue：

<script>
    import People from '../util'; //引入vue

    export default{
        props: [],
        components: {
            //加载组件
            people : People
        },
        ready(){
            this.pageLoad();
        },
        watch: {
            //页面数据监控
        },
        data() {
            return {
                count:1,
                message:"hello"
            }
        },
        methods: {
            pageLoad: function () {
                alert("Hello World!");
            },
            getCount:function(value){
                if (value != 0) {
                    this.count = value + 1;
		}
		return this.count;
            }
        }
    }

    //过滤器
    Vue.filter('test', function (value) {
        return value + " filter";
    });

</script>

Vue.js在设计过程中借鉴了AngularJS、KnockoutJS等框架技术，它在嵌入式场景和响应式方面都做得很好，有兴趣有时间的可以尝试一下，也可以查阅相关文档了解一下： http://cn.vuejs.org/

【web前端】简洁的VUE

猜你喜欢