微信小程序中与vue中不同的一些用法

在这里插入代码片@TOC

HTML

div => view
span =>text
img =>image

循环

wx:for="{ {}}"

if

wx:if="{ {}}"

改变item和index名字

wx:for-item=“item1”
wx:for-index=“index1”

绑定事件

点击事件：bintap
长按事件：bindlongtap
vue中所有事件的@全部换成bind 如bindchange bininput bindblue

点击传参

WXML中

//绑定事件然后吧变量item和index传入
<view bindtap="click" data-item="{
    
    {item}}" data-index="{
    
    {index}}"></view>

js文件中

click(e){
    
    
console.log(e.currentTarget.dataset.item)
console.log(e.currentTarget.dataset.index)
}

data中数据

小程序data中数据不能this使用 ，需要用this.data如

this.data.num='tom'
//必须用this.setData({})不然不能在页面上渲染
this.setData({
    
    
     num:'jack'
})

跳转非Tabbar

//跳转路由
wx.navgetTo{
    
    {
    
    
      url:'pages/detail/detail'detaildetail
      }}
//跳转路由并传参 (注意！！！路由传参传太多可能会丢失)
wx.navgetTo{
    
    {
    
    
      url:`pages/detail/detail?name=${
      
      this.data.name}&age=${
      
      this.data.age}`
      }}

另外一个路由接受在js文件中如下

 onLoad: function (options) {
    
    
         console.log(options) //options中便是收到的内容
  },

笔记

项目结构

项目结构
1.pages文件：路由组件	
2.自己在根目录下新建一个component文件夹：一般组件