首页 微博热点 正文

深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网

写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和差异。

一、生命周期

先贴两张图:

vue生命周期


小程序生命周期

相比之下,小程序的钩子函数要简略得多。

vue的钩子函数在跳转新页面时,钩子函数都会触发,可是小程序的钩子函数,页面不同的跳转办法,触发的钩子并不相同。

onLoad:页面加载

一个页面只会调用一次,能够在 onLoad 中获取翻开当时页面所调用的 query 参数。

onShow:页面显现

每次翻开页面都会调用一次。

onReady:页面初度烘托完结

一个页面只会调用一次,代表页面现已预备稳当,能够和视图层进行交互。

对界面的设置如 wx.setNavigationBarTitle请在 onReady之后设置。详见生命周期。

onHide:页面躲藏

当 navigateTo或底部tab切换时调用。

onUnload:页面卸载

当 redirectTo或 navigateBack的时分调用。

数据恳求

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

二、数据绑定

vue:vue动态绑定一个变量的值为元素的某个特点的时分,会在变量前面加上冒号:,例:


小程序:绑定某个变量的值为元素特点时,会用两个大括号括起来,假如不加括号,为被认为是字符串。例:


三、列表烘托

直接贴代码,两者仍是有些类似:

vue:



  • {{ item.message }}



var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

小程序:

Page({
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})

{{item}}

四、显现与躲藏元素

vue中,运用 v-if 和 v-show操控元素的显现和躲藏。

小程序中,运用 wx-if和 hidden操控元素的显现和躲藏。

五、事情处理

vue浙江省会:运用 v-on:event绑定事情,或许运用 @event绑定事情,例如:


//阻挠事情冒泡

小程序中,全用 bindtap(bind+event),或许 catchtap(catch+event)绑定事情,例如:深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网


//阻挠事情冒泡

六、数据双向绑定

1、设置值

在vue中,只需求再表单元素上加上 v-model,然后再绑定 data中对应的一个值,当表单元素内容发生变化时, data中对应的值也会相应改动,这是vue十分nice的一点。





new Vue({
el: '#app',
data: {
reason:''
}
})

可是在小程序中,却没有这个功用。那怎么办呢?

当表单内容发生变化时,会触发表单元素上绑定的办法,然后在炖鱼该办法中,经过 this.setData({key:value})来将表单上的郑浩南值赋值给 data中的对应值。

下面是代码,能够感受一下:



Page({
data:{
reason:''
},
bindReason(e易丽美) {
this.setData({
reason: e.dehusbandtail.value
})
}
})

当页面表单元素许多的时分,更改值便是一件膂力活了。和小程序一比较,vue的 v-mod深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网el简直爽的不要不要的。

2、取值

vue中,经过 this.reason取值。

小程序中,经过 this.data.reason取值。

七、绑定事情传参

在vue中,绑定事情传参挺简略瓜田李下,只需求在杨戬触发事情的办法中,把需求传支凌翔递的数据作为形参传入就能够了,例如:




new Vue({
el: '#app',
methods:{
say(arg){
consloe.log(arg)
}
}
})

在 小程序中,不能直接在绑定事情的办法中传入参数,需求将参数作为特点值,绑定到元素上的 data-特点上,然后在办法中,经过 e.currentTarget.dataset.*的办法获取,然后完结参数的传递,很费事有没有...


Page({//在此我向我们引荐一个前端全栈开发沟通圈:619586920 打破技能瓶颈,提高思维能力
data:{
reason:''
},
toApprove(e) {
let id = e.currentTarget.dataset.id;
}
})

八、父子组件通讯

1、子组件的运用

在vue中,需求:

1、编写子组件

2、在需求运用的父组件中经过 import引进

3、在 vue的 components中注册

4、在模板中运用

//子组件 bar.vue



// 父组件 foo.vue


\

在小程序中,需求:

1、编写子组件

2、在子组件的 json文件中,将该文件声明为组件


{
"component": true
}

3、在需求引进的父组件的 json文件中,在 usingComponents填写引进组件的组件名以及途径

"usingComponents": {
军旗"tab-bar": "../../compo三专两探一撤苏远晴nents/tabBar/tabBar"
}

4、在父组件中,直接引进即可


详细代码:

// 子组件




主页
//在此我向我们引荐一个前端全栈开发沟通圈:619586920 打破技能瓶颈,提高思维能力


设置


2、父子组件间通讯

在vue中

父组闪婚件向子组件传递数据,只需求在子组件经过 v-bind传入一个值,在子组件中,经过 p肉段子rops接纳,即可完结数据的传递,示例:

// 父组件 foo.vue


//4009286999在此我向我们引荐一个前端全栈开发沟通圈:619586920 打破技能瓶颈,提高思维能力
// 子组件bar.vue


子组件和父组件通讯能够经过 this.$emit将办法和数据传递给父组件。

在小程序中

父组件向子组件通讯和vue类似,可是小程序没有经过 v-bind,而是直接将值赋值给一个变深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网量,如下:


此处, “index”便是要向子组件传递的值

在子组件 properties中,接纳传递的值

properties: {
// 弹窗标题
currentpage: { // 特点名
type: String, // 类型(必填),现在承受的类型包含:Str深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网ing, Number, Boolean, Object, Array, null(表明恣意类型)
value: 'inde亚州色图x' // 特点初始值(可选),假如未指定则会依据类型挑选一个
肝功用查看}
}

子组件向父组件通讯和 vue也很类似,代码如下:

//子组件中
methods: {
// 传递给父组件
cancelBut: function (e) {
var that = this;
var myEventDetail = { pickerShow: false, type: 'cancel' } // detail目标,提供给事情监听函数
this.triggerEvent('myevent', myEventDetail) //myevent自定义称号事情,父组件中运用
},
}

//父组件中


// 获取子组件信息
toggleToast(e){
console.log(e.detail)
}

假如父组件想要调用子组件的办法

vue深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网会给子组件增加一个 ref特点,经过 this.$refs.ref的值便深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网能够获取到该子组件,然后便能够调用子组件中的恣意办法,例如:

//子组件

//在此我向我们引荐一个前端全栈开发沟通圈:619586920 打破技能瓶颈,提高思维能力
//父组件
this.$ref.bar.子组件的办法

小程序是给子组件增加 id或许 class,然后经过 this.selectComponent找到子组件,然后再调用子组件的方深入分析Vue和微信小程序的差异和比较-betvictor_伟德BETVICTOR|伟德betvictor官网法,示例:

//子组件


// 父组件
this.selectComponent('#id').s来月经不能吃什么yaHello()

小程序和vue在这点上很类似

结语

感谢您的观看,如有不足之处,欢迎批评指正票预安。

对前端的技能,前端全栈技能感兴趣的同学重视我的头条号,并在后台私信发送关键字:“前端”即可获取免费的前端开发攻城师学习材料

常识系统已整理好,欢迎免费收取。还有视频共享能够免费获取。重视我,能够获得没有的经历哦!

相关推荐

  • 暂无相关文章