vue.js與微信小程式區別:1、vue實例化後,初始化data,透過【this.】能取得data內的資料;2、小程式中,初始化頁面資料之後,是透過【this.data】來取得頁面的data來取得頁面物件的。
【相關文章推薦:vue.js】
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中列表渲染時,
<p v-for=”(index,item) in array” :key=”item.id”></p>;
微信小程式中,在元件上使用wx:for 控制屬性綁定一個數組,即可使用數組中各項的資料重複渲染該元件。
預設陣列的目前項目的下標變數名稱預設為index,陣列目前項目的變數名稱預設為item;
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view>
使用wx:for-item 可以指定陣列目前元素的變數名,
使用wx:for-index 可以指定陣列目前下標的變數名稱:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
三、資料取得
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) }
相關免費學習推薦:JavaScript(影片)
以上是vue.js與微信小程式區別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!