好记性不如烂笔头，学过的知识不复盘，不经常使用就会记不清楚。之前工作中一直用的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.operationthis.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.组件的生命周期
第八 组件间的通信方式
vue1.父组件给子组件传值，在子组件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.jsComponent({/*** 组件的属性列表*/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.jsComponent({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>//父页面的jsconst 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.jsComponent({properties: {},methods: {onTap: function () {var myEventDetail = {} // detail对象，提供给事件监听函数var myEventOption = {} // 触发事件的选项this.triggerEvent('myevent', myEventDetail, myEventOption)}}})
3.父组件拿到子组件实例
可在父组件里调用 this.selectComponent ，获取子组件的实例对象。（插件的自定义组件将返回 null）
调用时需要传入一个匹配选择器 selector，如：this.selectComponent(“.my-component”)。
//父组件index.wxml<my-component class="my-component my-child-component"></my-component><button bindtap="getChildComponent">获取子组件实例</button>//父组件 index.jsPage({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.jsComponent({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>
