uni-app 简单介绍

模板指令

1.条件渲染   if判断

         <view>
			<view v-if="isnow>90">
				优秀
			</view>
			<view v-else-if="isnow>70 && isnow<90">
				良好
			</view>
			<view v-else-if="isnow>60 && isnow<70">
				及格
			</view>
			<view v-else="isnow<60">
				不及格
			</view>
		</view>

2.列表渲染   字符串，数字，列表，对象都可以遍历

 1 wx:for

uniapp中使用wx:for进行列表渲染数据展示，
js文件

Page({
  data: {
   item:[1,2,3,4,5]
  }
})

vue文件

<view v-for="item in list" :key="index">
   {{item}}
</view>

3.属性绑定 

<button v-bind:disabled=“true”>

<button :disabled="true">       

4.表单绑定

<form>
  <view class="form-group"><input placeholder="请输入姓名" /></view>
  <view class="form-group">
    <radio-group >
      <radio>男</radio>
      <radio>女</radio>
    </radio-group>
  </view>
</form>

5.事件绑定  

    <view>
		想去的地方:{{dizi}}
	</view>
	<radio-group name="mnmn" @change="dizi=$event.detail.value">
		<label class="radio">
			<radio value="郑州" name="mnmn" /><text>郑州</text>
		</label>
		<label class="radio">
			<radio value="上海" name="mnmn" /><text>上海</text>
		</label>
		<label class="radio">
			<radio value="北京" name="mnmn" /><text>北京</text>
		</label>
		<label class="radio">
			<radio value="深圳" name="mnmn" /><text>深圳</text>
		</label>
	</radio-group>

6.修饰符

  事件修饰符   .once 响应一次   .prevent 阻止默认事件     .stop 停止事件冒泡
  表单修饰符   .number 转换为数字   .Lazy chang事件触发 默认是input事件
  按键修饰符   .up .right .bottom .Left .space .deLete .enter .esc 

列如：

vue文件

	<button type="primary" @click.once="biaobai">表白</button>

js文件

biaobai() {
	uni.showToast({
	   title: '♥＾▽＾♥'
	})
}

其他同理   

 uni-app的生命周期   
       
 选项

data ：数据
methods： 方法
computed ：计算
watch：监听

  watch监听数据的变化   

        watch: {
			num: {
				handler(val, oldVal) {
					// val 最新值  oval  之前的值
					// 引用类型  val 和 oval 都上一个值
					uni.setStorageSync('num', val)
				},
				deep: true
			}
		},

  computed 可以计算数据的变化

     computed: {
			// 计算的数据是只读
			doubleNum: function() {
				return this.num * 2
			},
			priceNum: {
				//获取值的时候返回num*1.5
				get() {
					return this.num * 1.5
				},
				set(v) {
					//设置priceNum执行个num进行赋值
					console.log(v)
					this.num = v / 1.5
				}
			}

		},

methods同vue 

       methods: {
			showMsg(e) {
				console.log(e, );
			},
			say(e) {
				console.log(e, );
			},
			biaobai() {
				console.log(e, );
			}
		}

data 同vue 用来书写各种数据 

        data() {
			return {
				msg: '你好uni-app',
				list: {
					'name': '辰昊',
					'age': '18'
				},
				isCheck: false,
				dizi: '',
			}
		},

组件

父传子   子组件通过props来接受外界传递到组件内部的值

js文件

<script>
	export default {
		props: ['title']
	}
</script>

vue文件

<template>
	<view>
		是父组件传过来的值 {{title}}
	</view>
</template>

子传父  通过$emit触发事件进行传递参数

js文件

<script>
	export default {
		data () {
			return {
				num: 3
			}
		},
		methods: {
			sendNum() {
				console.log("给父组件传值啦")
				this.$emit("myEven",this.num)
			}
		},
	}
</script>

vue文件 

<template>
	<view>
		<view>这是父组件传过来的值{{title}}</view>
		<button @click="sendNum">给父组件传值</button>
	</view>
</template>