微信小程序和vue的区别

157 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第12天,点击查看活动详情

小程序和vue的区别

生命周期:

vue的钩子函数在跳转页面的时候,钩子函数会触发,但小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 

在页面加载请求数据时,两者钩子的使用有些类似,vue一般会在created或者mounted中请求数据,而在小程序,会在onLoad或者onShow中请求数据。

数据绑定:

vue动态绑定一个变量的值为元素的某个属性的时候,会在变量前加上冒号。也就是v-bind绑定。

小程序绑定某个变量的值为元素的某个属性时,会用两个大括号括起来,不过不加括号,会被认为是字符串。

列表渲染:

类似 v-for和wx:for

显示与隐藏元素:

vue用v-if和v-show

小程序用wx:if和hidden

事件处理:

vue使用v-on

小程序使用bindtap或catchtap(可以阻止事件冒泡)

数据双向绑定

设置值

vue使用v-model绑定data中对应的值

小程序只能通过表单内容变化触发方法,通过this.setData来将表单上的值赋值给data中的对应值。

取值

vue通过this.reason

小程序this.data.reason

绑定事件传参

vue中@click="functionName('形参')"

小程序中不能直接传参,参数作为属性值,绑定到元素的data-属性上,方法中e.currentTarget.dataset.*获取。

父子组件通信

引入

vue中子组件import引入,components中注册,模板中使用;

小程序在子组件的json文件中,将文件声明为组件,在父组件的json文件中引入

通信

vue父向子传递数据,v-bind绑定值,子组件props接收。子向父通过this.$emit将方法和数据传递给父组件

小程序,父向子传递数据,直接将值赋给一个变量,子组件用properties接收。子向父通信,用this.triggerEvent将方法和数据传递给父组件,父组件中bind:myevent绑定事件接收。