vue与微信小程序的写法对比-CFANZ编程社区

好记性不如烂笔头，学过的知识不复盘，不经常使用就会记不清楚。之前工作中一直用的vue，遇到新的项目需要做微信小程序，发现有很多相似之处，容易混淆；做个笔记对比着记更容易一些

第一、指令

vue中都是"v-"开头，例如v-for，v-if，v-html
小程序中都是“wx：”开头，例如wx:for,wx:if

第二、条件和列表渲染区别

vue中写法：v-if=“”，v-else-if=“”，v-else=“”，v-show,v-for=“(item,index) in list”
小程序中：wx:if=“”,wx:elif=“”,wx:else=“”,hidden,wx:for=“{{list}}”,wx:for-item=“item”,wx:for-index=“index”

第三、事件绑定的方式不同

vue中事件绑定：@click=“”,on:click=“”，@change=“”,on:change=“”，以@开头或者’on:’
小程序中事件绑定：bindtap=“”，bindinput=“”,bindchange=‘’，无法在小程序中的事件直接传递参数
而是通过自定义属性data-来传递参数，然后在事件源e中拿到这个参数

//错误
<button bindtap="handlePlue(1)"></button>
<button bindtap="handlePlue(-1)"></button>

//正确
<button bindtap="handlePlue" data-operation="{{1}}">+</button>
<button bindtap="handlePlue" data-operation="{{-1}}">_</button>

  handlePlue(e){
    console.log(e)
    const opera = e.currentTarget.dataset.operation
    this.setData({
      num:this.data.num +opera
    })
  },

在这里插入图片描述

第四、数据绑定

-vue 使用v-model进行双向数据绑定

<input v-model="sss">

-小程序中使用setData(在自定义组件中触发双向绑定更新只能用setData),或者简易的数据双向绑定`

<input model:value="{{sss}}">`

<input type="text" bindinput="handleInput"/>
<view>{{num}}</view>`  

handleInput(e){
    console.log(e)
    this.setData({
      num:e.detail.value
    })

第五、wxss的单位rpx和px关系

px换算成rpx 750/屏幕尺寸
rpx换算成px 屏幕尺寸/750

第六、页面中引入css

vue中scope参数可选

<style src="./style.css" />

小程序中使用@import相对路径导入

@import ‘./style.css’；

第七、生命周期

vue的生命周期
小程序的生命周期
1.页面onResize()生命周期，可在页面.json文件中全局app.json文件中配置,横屏
2.页面onTabItemTap()生命周期，只能在tabBar的页面上使用并且只能是点击自己的tab item时触发

{
	"pageOrientation":"auto"
}

在这里插入图片描述
3.组件的生命周期

第八组件间的通信方式

vue
1.父组件给子组件传值，在子组件props中定义，在父组件中传入值

//子组件
props: {
    tableData: {
      default: () => [],
    },
    }

//父组件
<toolbar :tableData="tableData"  />

2.子组件向父组件传值（通过事件形式$emit()）

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: 'app-header',
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>

// 父组件
<template>
  <div id="app">
    <app-header v-on:titleChanged="updateTitle" ></app-header>//与子组件titleChanged自定义事件保持一致
   // updateTitle($event)接受传递过来的文字
    <h2>{{title}}</h2>
  </div>
</template>
<script>
import Header from "./components/Header"
export default {
  name: 'App',
  data(){
    return{
      title:"传递的是一个值"
    }
  },
  methods:{
    updateTitle(e){   //声明这个函数
      this.title = e;
    }
  },
  components:{
   "app-header":Header,
  }
}
</script>

3.父组件拿到子组件的实例 （$refs）

//父组件
<toolbar :tableData="tableData"  ref=“toolbar”/>

、、、、、

methods：{
	query(){
	console.log(this.$refs.toolbar)
	}
}

微信小程序中
1.父组件给子组件传值(properties)

//sl-tab.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
      tabNameList:{
        type:Array,
        value:[],
      }
  },
  options: {
    addGlobalClass: true
},


  /**
   * 组件的初始数据
   */
  data: {
    currentTab:0
  },

  /**
   * 组件的方法列表
   */
  methods: {

  swichNav: function(e) {
    var cur = e.target.dataset.current;
    if (this.data.currentTab == cur) {
      return false;
    } else {
      this.setData({
        currentTab: cur
      })
    }
  },  

  }
})



// custom-component.js
Component({
  properties: {
    myValue: String
  }
}

//sl-tab.wxml
 <view class="weui-navbar">
    <block wx:for="{{tabNameList}}" wx:key="index">
      <view class="weui-navbar__item {{currentTab===index?'weui-bar__item_on':''}}" data-current="{{index}}" bindtap="swichNav">
        {{item}}-{{index}}
      </view>
    </block>
  </view>

<!-- custom-component.wxml -->
<input model:value="{{myValue}}" />

//父页面中使用子组件
<sl-tab tabNameList="{{tabNameList}}"></sl-tab>
<custom-component model:my-value="{{pageValue}}" />

2.子组件给父组件传值（需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项）

//父页面中 index.wxml

  <my-component bindmyevent="myEventListener">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view>这里是插入到组件slot中的内容</view> 
  </my-component>

//父页面的js
	
const app = getApp()
Page({
  data: {},
  myEventListener: function(e) {
    console.log(e)
  }
})

//子组件 的component-tag-name.jwxml页面

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
  <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
</view>

//子组件的js文件
// components/component-tag-name.js
Component({
  properties: {},
  methods: {
    onTap: function () {
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

3.父组件拿到子组件实例

//父组件index.wxml

<my-component class="my-component my-child-component"></my-component>
<button bindtap="getChildComponent">获取子组件实例</button>

//父组件 index.js

Page({
  data: {

  },
  getChildComponent: function () {
    const child = this.selectComponent('.my-component >>> #my-child-component');
    console.log('子组件实例为：', child);
  },
  )}

//子组件 my-component.wxml

<my-child-component id="my-child-component"></my-child-component>

//子组件 my-component.js
Component({
  data: {
    name: 'my-component'
  },
  attached() {

    const child = this.selectComponent('#my-child-component');
    console.log('在 my-component 中获取 my-child-component 实例：', child)
  }
})

//子子组件 my-child-component.wxml
<text>my-child-component</text>