微信小程序与vue的不一样的地方

微信小程序和与VUE的差别

一、数据绑定

vue: 绑定一个变量的值为元素的属性时，可以直接使用 Mastache语法{{msg}}，也可以在变量前面加"v-bind-“或语法糖” : "

<p> {{ msg }} </p>
<img v-bind:src="imgUrl">
<img :src="imgUrl">

小程序: 全都是Mastache语法{{}},不让会被认定为字符串

<img src="{{imgUrl}}">
<view>{{msg}}</view>

二、标签与元素

1. 小程序中的 < view >代替原来的< div >，< text >代替原来的< span >
2. 显示与隐藏元素
   • vue 使用v-if(不渲染)和v-show(标签中加display)控制
   • 小程序 使用wx-if和hidden控制(方式一样)
3. 循环
   • vue: v-for
   • 小程序: wx-for

-- vue
<div v-for="(item, index) in list" :key="this">
	<span>{{item}}</span>
</div>
-- 小程序
<view wx:for="{{lists}}" wx:key="this" wx:for-item="item" wx:for-index="index">
	{{item}}
</view>

三、事件的绑定与传值

• 绑定
  • vue: 使用v-on+event绑定事件，或使用语法糖"@event"
  • 小程序: 使用bind+event绑定事件，

-- vue
<button @click="increment">+1</button>
-- 小程序
<buuton bindtap="increment">+1</button>

• 传参
  • vue: 直接跟普通的js一样，参数写在事件后的（）中
  • 小程序: 比较麻烦，不能跟之前一样写，需要将参数作为属性值，绑定到元素的 data-属性，然后在方法中，通过e.currentTarget.dataset.属性才能获取到

-- vue
<button @click="increment(1)">+1</button>
-- 小程序
<buuton bindtap="increment" data-num="1">+1</button>

 // vue 
 methods:{
	increment(num) {
		console.log(num)
    }
 }
 // 小程序
 increment(e) {
 	// let { num } = e.currentTarget.dateset
	let num = e.currentTarget.dateset.num
 }

四、数据的绑定

• vue: 使用v-mode指令来实现表单元素和数据的双向绑定,当表单元素或data中的绑定值发生改变时，另一端也会随之改变
  其本质是两种操作,v-bind绑定一个value属性,v-on指令给当前元素绑定input事件
• 小程序: 没有vue当中的双向绑定功能,只能在表单中绑定事件，当发生改变时，触发事件，然后在方法中通过this.setData({key:value})，来赋值给data中的属性值

-- vue
<input v-mode="idcard" placeholder="请输入帐号" />

-- 小程序
<input class="weui-input" password="true" value="{{password}}" placeholder="请输入密码" bindinput="passwordInput" />

// vue
data:{
	idcard: ''
}

// 小程序
data:{
	password: ''
},
passwordInput: function (e) {
  this.setData({
    password: e.detail.value
  })
},

取值:

• 在vue中直接this.idcard取值
• 小程序中需要 this.data.password取值

五、父子组件

• vue: 组件的使用之前写过(不详写)

• 小程序: 与vue使用有些不同
  1.在子组件的json文件中声明自己是组件

  {
    "component": true
  }
  

  2.在父组件中引用也是在json文件中引用

  {
   "usingComponents": {
    "nav-bar": "/commpents/navbar/navbar"
   }
  }
  

  3.在父组件的wxml引用与vue很类似

  <nav-bar current-index='{{index}}'></nav-bar>
  

  4.通信: 父组件向子组件传递数据

  // 父组件
  Page({
  	data:{
  		index: 1
  	}
  })
  // 子组件
  Component({
  	properties:{ // 与vue一样，只是vue的属性值时prop
  		currentIndex: {
  			type: number,
  			value: 1
  		}
  	}
  })
  

  5.子组件向父组件传递(与vue一样也是提交事件)

  -- 子组件
  <button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>
  -- 父组件
  <!-- 当组件触发“myevent”事件时，调用“onMyEvent”方法 -->
  <component-tag-name bindmyevent="onMyEvent" />
  <!-- 或者可以写成 -->
  <component-tag-name bind:myevent="onMyEvent" />
  

  // 子组件
  Component({
  	methods:{
  		onTap: function(){
       		var myEventDetail = {} // detail对象，提供给事件监听函数
        		var myEventOption = {} // 触发事件的选项(冒泡等)
        		// vue使用 this.$emit()提交
        		this.triggerEvent('myevent', myEventDetail, myEventOption)
  	 	}
  	}
  })
  // 父组件
  onMyEvent: function(e){
   	e.detail // 组件触发事件时提供的detail对象
  }
  

  6.获取组件，调用组件的方法
  - vue: 使用 ref 属性绑定到组件上，使用this.$ref.属性值来获取组件
  - 小程序: 给组件绑定一个id 或 class，然后通过this.selectComponent()来获取组件

  -- vue 
  <bar ref="bar"></bar>
  -- 小程序
  <bar id="bar"></bar>
  

  // vue
  this.$ref.bar.get() //(组件中方法)
  // 小程序
  this.selectComponent("#bar").get()
  

六、生命周期

• vue
  -常用的几个钩子函数
  -created() : 请求数据
  -mounted()：挂载数据
  -destroyed()：组件销毁(清理定时器等)

• 小程序
  -生命周期比vue的要长，钩子函数要多，而且小程序的钩子函数，页面不同的跳转方式，触发的钩子也并不一样。
  -onLoad(options) ： 加载页面时触发，options可以获取跳转过来所带的参数
  -onShow()：每次打开页面都会触发
  -onHide()：页面隐藏(暂停或者清除定时器 )
  …很多，创建一个js后会显示所有的函数及注释作用

  跳转:
  navigateTo跳转时不关闭页面，返回时不触发onLoad(),但触发onShow()
  redirectTo关闭页面，再打开时触发onLoad()和onShow()
  reLaunch关闭所有页面
  navigateBack返回可以返回到原页面。小程序中页面栈最多十层

小程序的功能、接口很多有需要在微信官方文档 查找