區別:1、vue中使用「v-if」和「v-show」控制元素的顯示和隱藏,而小程式中則使用「wx-if」和「hidden」;2、vue中使用「v-on:event」來綁定事件,而小程式中使用「bindtap(bind event)」來綁定事件。
本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
先貼兩張圖:
vue生命週期
小程式生命週期
相較之下,小程式
的鉤子函數要簡單得多。
vue
的鉤子函數在跳轉新頁面時,鉤子函數都會觸發,但是小程式
的鉤子函數,頁面不同的跳轉方式,觸發的鉤子並不一樣。
onLoad
: 頁面載入onLoad
中取得開啟目前頁面所呼叫的 query
參數。 onShow
: 頁面顯示onReady
: 頁面初次渲染完成wx.setNavigationBarTitle
請在onReady
之後設定。詳見生命週期onHide
: 頁面隱藏navigateTo
或底部tab切換時呼叫。 onUnload
: 頁面卸載redirectTo
或navigateBack
的時候呼叫。 資料請求
在頁面載入請求資料時,兩者鉤子的使用有些類似,vue
通常會在created
或mounted
中請求數據,而在小程式
,會在onLoad
或onShow
中請求資料。
VUE
:vue動態綁定一個變數的值為元素的某個屬性的時候,會在變數前面加上冒號: ,例:
<img :src="imgSrc"/>
小程式
:綁定某個變數的值為元素屬性時,會用兩個大括號括起來,如果不加括號,為被認為是字元串。例:
<image src="{{imgSrc}}"></image>
直接貼程式碼,兩者還是有些相似
vue:
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li></ul>var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
小程式:
Page({ data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })<text wx:for="{{items}}">{{item}}</text>
vue
中,使用v-if
和v-show
控制元素的顯示和隱藏
#小程式
中,使用wx-if
和hidden
控制元素的顯示和隱藏
#vue
:使用v-on:event
綁定事件,或使用@event
綁定事件,例如:
<button v-on:click="counter += 1">Add 1</button> <button v-on:click.stop="counter+=1">Add1</button> //阻止事件冒泡
小程式
中,全用bindtap(bind event)
,或catchtap(catch event)
綁定事件,例如:
<button bindtap="noWork">明天不上班</button> <button catchtap="noWork">明天不上班</button> //阻止事件冒泡
1.設定值
在vue
中,只需要再表單
元素上加上v-model
,然後再綁定data
中對應的一個值,當表單元素內容改變時,data
中對應的值也會隨之改變,這是vue
非常nice的一點。
<div id="app"> <input v-model="reason" placeholder="填写理由" class='reason'/> </div> new Vue({ el: '#app', data: { reason:'' } })
但是在小程式
中,卻沒有這個功能。那怎麼辦呢?
當表單內容變更時,會觸發表單元素上綁定的方法,然後在該方法中,透過this.setData({key:value})
來將表單上的值賦值給data
中的對應值。
下面是程式碼,可以感受一下:
<input bindinput="bindReason" placeholder="填写理由" class='reason' value='{{reason}}' name="reason" /> Page({ data:{ reason:'' }, bindReason(e) { this.setData({ reason: e.detail.value }) } })
當頁面表單元素很多的時候,更改值就是一件體力活了。和小程式
一比較,vue
的v-model
簡直爽的不要不要的。
2.取值
vue
中,透過this.reason
取值
小程式
中,透過this.data.reason
取值
在#在 ##vue中,綁定事件傳參挺簡單,只需要在觸發事件的方法中,把需要傳遞的資料當作形參傳入就可以了,例如:
<button @click="say('明天不上班')"></button> new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } })
小程式中,不能直接在綁定事件的方法中傳入參數,需要將參數當作屬性值,綁定到元素上的
data-屬性上,然後在方法中,透過
e.currentTarget.dataset.*的方式獲取,從而完成參數的傳遞,很麻煩有沒有...
<view class='tr' bindtap='toApprove' data-id="{{item.id}}"></view> Page({ data:{ reason:'' }, toApprove(e) { let id = e.currentTarget.dataset.id; } })
1.子组件的使用
在vue
中,需要:
编写子组件
在需要使用的父组件中通过import
引入
在vue
的components
中注册
在模板中使用
//子组件 bar.vue <template> <div class="search-box"> <div @click="say" :title="title" class="icon-dismiss"></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } }, methods:{ say(){ console.log('明天不上班'); this.$emit('helloWorld') } } </script> // 父组件 foo.vue <template> <div class="container"> <bar :title="title" @helloWorld="helloWorld"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"我是标题" }, methods:{ helloWorld(){ console.log('我接收到子组件传递的事件了') } }, components:{ Bar } </script>
在小程序
中,需要:
编写子组件
在子组件的json
文件中,将该文件声明为组件
{ "component": true }
在需要引入的父组件的json
文件中,在usingComponents
填写引入组件的组件名以及路径
"usingComponents": { "tab-bar": "../../components/tabBar/tabBar" }
在父组件中,直接引入即可
<tab-bar currentpage="index"></tab-bar>
具体代码:
// 子组件 <!--components/tabBar/tabBar.wxml--> <view class='tabbar-wrapper'> <view class='left-bar {{currentpage==="index"?"active":""}}' bindtap='jumpToIndex'> <text class='iconfont icon-shouye'></text> <view>首页</view> </view> <view class='right-bar {{currentpage==="setting"?"active":""}}' bindtap='jumpToSetting'> <text class='iconfont icon-shezhi'></text> <view>设置</view> </view> </view>
2.父子组件间通信
在vue
中
父组件向子组件传递数据,只需要在子组件通过v-bind
传入一个值,在子组件中,通过props
接收,即可完成数据的传递,示例:
// 父组件 foo.vue <template> <div class="container"> <bar :title="title"></bar> </div> </template> <script> import Bar from './bar.vue' export default{ data:{ title:"我是标题" }, components:{ Bar } </script> // 子组件bar.vue <template> <div class="search-box"> <div :title="title" ></div> </div> </template> <script> export default{ props:{ title:{ type:String, default:'' } } } </script>
子组件和父组件通信可以通过this.$emit
将方法和数据传递给父组件。
在小程序
中
父组件向子组件通信和vue
类似,但是小程序
没有通过v-bind
,而是直接将值赋值给一个变量,如下:
<tab-bar currentpage="index"></tab-bar> 此处, “index”就是要向子组件传递的值
在子组件properties
中,接收传递的值
properties: { // 弹窗标题 currentpage: { // 属性名 type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型) value: 'index' // 属性初始值(可选),如果未指定则会根据类型选择一个 } }
子组件向父组件通信和vue
也很类似,代码如下:
//子组件中 methods: { // 传递给父组件 cancelBut: function (e) { var that = this; var myEventDetail = { pickerShow: false, type: 'cancel' } // detail对象,提供给事件监听函数 this.triggerEvent('myevent', myEventDetail) //myevent自定义名称事件,父组件中使用 }, } //父组件中 <bar bind:myevent="toggleToast"></bar> // 获取子组件信息 toggleToast(e){ console.log(e.detail) }
vue
会给子组件添加一个ref
属性,通过this.$refs.ref的值
便可以获取到该子组件,然后便可以调用子组件中的任意方法,例如:
//子组件 <bar ref="bar"></bar> //父组件 this.$ref.bar.子组件的方法
小程序
是给子组件添加id
或者class
,然后通过this.selectComponent
找到子组件,然后再调用子组件的方法,示例:
//子组件 <bar id="bar"></bar> // 父组件 this.selectComponent('#id').syaHello()
【相关推荐:《vue.js教程》】
以上是vue和微信小程式的差別有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!