首頁  >  文章  >  web前端  >  vue.js與微信小程式區別是什麼

vue.js與微信小程式區別是什麼

coldplay.xixi
coldplay.xixi原創
2020-11-10 15:12:474258瀏覽

vue.js與微信小程式區別:1、vue實例化後,初始化data,透過【this.】能取得data內的資料;2、小程式中,初始化頁面資料之後,是透過【this.data】來取得頁面的data來取得頁面物件的。

vue.js與微信小程式區別是什麼

【相關文章推薦: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

相關文章

看更多