持续创作,加速成长!这是我参与「掘金日新计划 · 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绑定事件接收。