简单聊两句

小程序是微信开发的一种不需要下载安装即可使用的应用，目前只能在微信中使用，开发使用微信的小程序开发语言，vue是尤雨溪大神开发的一套构建用户界面的渐进式框架，可以很好的开发单页面应用程序，开发语言js，或者不久将支持的ts

数据绑定对比

内容绑定，两者采用的都是 Mustache 语法（双大括号）：

有一点不同的是：vue的内容可以是html，而小程序不行，小程序会把你写的标签字段完全展示为字符串，如下：

而我们在vue中可以使用v-html指令显示html

那么在小程序开发过程中，我们有时会收到服务器返回的html代码，（注意：小程序不支持原生的HTML标签），我们要怎么显示出来呢，这里我推荐一个插件wxParse，使用wxParse，我们就可以显示我们的HTML代码了，而且可以把HTML格式转化为wxml格式，非常的好用哦。

组件属性的绑定对比：

组件属性的获取：

小程序中有一个event，可以通过点击事件传入响应函数，我们在这里看看event都包含什么：

通过event，我们可以发现currentTarget.id就是组件的id属性，currentTarget.dataset这里包含的是我们自定义的属性字段，但是我们并没有发现style这个属性出现在哪一个字段中，答案是：我们没有办法获取到除了id和自定义以外的其他属性，解决方法可以把属性变成自定义属性，或者复制一份自定义属性，然而这并不是数据驱动所推荐的。

有没有思考过，通过这个组件，获取到另一个组件的属性，这种想法就是原始的jq时代的dom操作为王的年代的遗留恶习，小程序最重要的一点：小程序不允许dom操作，所有想要的数据都在data字段中，去里面取就好了嘛！

vue 获取组件属性

vue的组件属性获取分为：获取自身属性、父组件获取子组件的属性、子组件获取父组件的属性；

获取自身属性：直接在data字段中查询即可，如需必要刻意使用refs操作dom，不过不推荐

父子之间属性的相互获取参考官网：组件这一章节

列表渲染：

除了语法不同外，小程序是不可以对对象类型进行渲染的，这一点与vue是不同的。

关于小程序的wx:key和vue的:key是设定是一样的，这里也推荐在做列表渲染的时候，给出key这个字段！

条件渲染：

两者几乎是一样的，不过在一些细节上有所不同比如：小程序中使用hidden属性也可以控制组件的渲染，而vue使用v-show指令；具体可以看官网介绍。

模板的定义：

小程序和.vue文件都是使用<template>标签来定义模板的，在这一方面上，两者并没有多大区别，然而需要注意的是vue中模板的定义远不止这一种，具体的可以参考官网，这里不做更多描述。

模板的引用：

小程序通过import或者include命令引入模板，引入后通过template中的is属性即可指定对应的模板来使用，vue通过把模板（组件）注册在components加以使用

模板的数据传递：

小程序中的模板没有自己的作用域，也就是模板中不能有自己的变量，只能使用data传入的数据，而vue中既可以有自己的作用域data，也可以通过props接受父组件传递过来的数据

事件的对比：

小程序中普通组件支持的事件分类：

其中使用bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。小程序事件的优势是微信已经给我们封装好了相应的事件，我们只需要调用即可，不过对于不支持的事件，我们是没办法调用的

vue中通过v:on或者简写的"@"符号绑定事件，不过vue更人性化或者更方便的是事件修饰符和键值修饰符的使用。

关于事件传参：

vue的事件传参和我们使用js一样，只是要使用原生的event事件时，把$event传入函数即可；而小程序的事件传参，组件的响应事件不能写入任何参数，而是默认携带了一个event的事件状态，如果我们想要传递参数怎么办，使用自定义的data-字段，通过e.currentTarget.dataset来获取。

关于模板事件的参数传递：

vue中的hello组件（props接受父组件传递的数据，data是子组件自己的作用域）

数据绑定问题：

小程序中的数据绑定是单向绑定，也就是

而vue中的模型是双向绑定，即：

小程序是通过setdata方法来改变model，同时更新视图，而vue是利用对象属性的getter和setter来同时更新view和model，两者不同的设计给我们的代码操作就会有所不同：

结束语

基础的对比就写到这里，后面会讲一些我在开发过程中遇到的坑，如有错误，欢迎指正！