vue.js与微信小程序区别是什么-木庄网络博客

本文摘自PHP中文网，作者coldplay.xixi，侵删。

vue.js与微信小程序区别：1、vue实例化后，初始化data，通过【this.】能获取到data内的数据；2、小程序中，初始化页面数据之后，是通过【this.data】来获取页面的data来获取页面对象的。

【相关文章推荐：vue.js】

vue.js与微信小程序区别：

一、微信小程序有自己封装的一套组件视图容器，它把平时我们可能会用的一些页面视图效果都进行了分装；

eg: swiper,scroll-view,表单组件

在Vue项目中，我们可能要通过引入第三方组件库swiper,表单组件更多的是结合element-ui或者ant-ui 或者 iview 来实现表单页面的实现。

二、条件渲染与列表渲染

在js中我们都知道，用于条件判断，用的最多的就是if(){}else{}，而在vue和微信小程序框架中，它对该类方法进行了封装，通过指令调用方式来实现。

vue中：

1	`v-if="Math.random() > 0.5"或者v-if=”true”` `//当指令的表达式返回 truthy 值的时候内容会被渲染`

习惯于vue框架的人，长时间没接触微信小程序的后果：

1	`wx-if=”Math.random() > 0.5”` `//报错倒是不会，但是并没有按条件执行`

然后执行，完全没毛病是不是，可是数据就是出不来，我曾经反反复复检查了好几遍代码，自信绝对没问题，再去console后台数据，返现数据是可以console出来的，才惊觉可能是微信小程序的条件渲染不对，然后查看微信小程序文档才发现，在微信里面，都是通过

{{ }} 的语法把一个变量绑定到界面上的，正确操作

1	`wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”`

vue中列表渲染时，

1	`<p v-for=”(index,item) in` `array” :key=”item.id”></p>；`

微信小程序中，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item；

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

使用 wx:for-item 可以指定数组当前元素的变量名，

使用 wx:for-index 可以指定数组当前下标的变量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

三、数据获取

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者