符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
小编给大家分享一下vue.js与微信小程序有哪些区别,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联公司是一家集网站建设,太子河企业网站建设,太子河品牌网站建设,网站定制,太子河网站建设报价,网络营销,网络优化,太子河网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
vue.js与微信小程序区别:1、vue实例化后,初始化data,通过【this.】能获取到data内的数据;2、小程序中,初始化页面数据之后,是通过【this.data】来获取页面的data来获取页面对象的。
vue.js与微信小程序区别:
一、微信小程序有自己封装的一套组件视图容器,它把平时我们可能会用的一些页面视图效果都进行了分装;
eg: swiper,scroll-view,表单组件
在Vue项目中,我们可能要通过引入第三方组件库swiper,表单组件更多的是结合element-ui或者ant-ui 或者 iview 来实现表单页面的实现。
二、条件渲染与列表渲染
在js中我们都知道,用于条件判断,用的最多的就是if(){}else{},而在vue和微信小程序框架中,它对该类方法进行了封装,通过指令调用方式来实现。
vue中:
v-if="Math.random() > 0.5"或者v-if=”true” //当指令的表达式返回 truthy 值的时候内容会被渲染
习惯于vue框架的人,长时间没接触微信小程序的后果:
wx-if=”Math.random() > 0.5” //报错倒是不会,但是并没有按条件执行
然后执行,完全没毛病是不是,可是数据就是出不来,我曾经反反复复检查了好几遍代码,自信绝对没问题,再去console后台数据,返现数据是可以console出来的,才惊觉可能是微信小程序的条件渲染不对,然后查看微信小程序文档才发现,在微信里面,都是通过
{{ }}
的语法把一个变量绑定到界面上的,正确操作
wx-if=” {{ Math.random() > 0.5 }}” 或者 wx-if=”{{true}}”
vue中列表渲染时,
;
微信小程序中,在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item;
{{index}}: {{item.message}}
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
{{idx}}: {{itemName.message}}
三、数据获取
vue实例化后,初始化data,通过this.能获取到data内的数据,正常操作:
data(){ return { message:”” } }, methods:{ change:function(){ this.message = “呵呵哒” } }
小程序中,初始化页面数据之后,是通过this.data来获取页面的data来获取页面对象的,同样操作,
data:{ message:”呵呵” }, methods:{ this.data.message = “呵呵哒”; //视图界面上的值并没有发生改变 }
先不说一不小心this.message,后来幡然醒悟过来这是小程序,那么,问题又来了,视图界面上的值并没有发生变化。
再去查询文档(来自微信小程序官方文档说明):
1、直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。
2、单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
3、this.data与this.setData的关系就是this.setData里面存储的是this.data的副本,而界面是从this.setData里面托管的this.data的副本取数据的。所以我们更改this.data并不会直接更新界面,因为这个时候的this.setData里面的副本还是没有更新前的。
简而言之,就是,setData 函数刷新数据并展示在页面上,this.data改变了数据,但是不会改变视图页面的内容。
所以,正确操作
methods:{ this.data.message = “呵呵哒”; this.setDate({ message:this.data.message }); console.log(this.data.message) }
看完了这篇文章,相信你对vue.js与微信小程序有哪些区别有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!