uniapp之vue

我们知道uni-app 使用vue的语法+小程序的标签和API，这里补充一下vue相关常用的内容。

数据绑定：

<template>
	<view class="">
		<!-- 文本插值绑定 -->
		<view class="">message:{{msg}}</view>
		<!-- js表达式绑定 -->
		<view class="">{{num+1}}</view>
		<view class="">{{ok?"Yes":"No"}}</view>
		<!-- 倒叙显示msg  绑定的表达式只能是一条语句 -->
		<view class="">{{msg.split("").reverse().join("")}}</view>
		<!-- 各行换色 -->
		<view class="">
			<view class="" v-for="(item,index) in 10" :key="index">
				<!-- <view :class="'list-'+index%2">{{item}}</view> -->
				<view :class="[index%2==0?'list-0':'list-1']">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				msg:"Hello Vue!",
				num:1,
				ok:true
			}
		}
	}
</script>
<style>
	.list-0{background: #aaaaff;}
	.list-1{background: #ffaa7f;}
</style>

动态绑定样式及条件渲染：

<template>
	<view class="">
		<!-- class绑定 -->
		<view class="static" :class="{'active':isActive}">class</view>
		<view class="static" :class="{'active':isActive,'text-danger':hasError}">class</view>
		<view class="static" :class="[isActive?'active':'text-danger']">class</view>
		<!-- style -->
		<view class="" :style="{color:activeColor,fontSize:fontSize+'px'}">style样式</view>
		
		<!-- 条件渲染 -->
		<view class="">
			<view class="" v-if="seen">现在你看见我了true</view>
			<view class="" v-else>看不到false</view>
		</view>
		<view class="">
			<view class="" v-if="type==='A'">A</view>
			<view class="" v-else-if="type==='B'">B</view>
			<view class="" v-else-if="type==='C'">C</view>
			<view class="" v-else>not A\B\C</view>
		</view>
		<view class="">
			<!-- template分组 -->
			<template v-if="seen">
				<view class="">标题</view>
				<view class="">内容：内容部分</view>
			</template>
		</view>
		<view class="" v-show="seen">Hello</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isActive:true,
				hasError:true,
				activeColor:'green',
				fontSize:20,
				seen:true,
				type:'B'
			}
		}
	}
</script>

<style>
	.static{color: #8a6de9;}
	.active{background: #0a98d5;}
	.text-danger{color: #e80080;}
</style>

列表渲染：

<template>
	<view class="">
		<!-- 1.遍历items数组  输出message  -->
		<view class="" v-for="(item,index) in items">
			{{index}}--{{item.message}}
		</view>
		<!-- 2. 遍历object对象-->
		<view class="" v-for="(value,name,index) in object ">
			{{index}}--{{name}}--{{value}}
		</view>
		<!-- 3.遍历items添加下划线框  列表渲染分组-->
		<view class="">
			<template v-for="(item,index) in items">
				<view class="">{{item.message}}</view>
				<view class="divider"></view>
			</template>
		</view>
		<!-- 4.key的绑定 -->
		<view class="">
			<view class="" v-for="(item,index) in objectArray" :key="item.id">{{item.name}}</view>
		</view>
		
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				items: [{
						message: 'Foo'
					},
					{
						message: 'Bar'
					}
				],

				object: {
					title: 'How to do lists in Vue',
					author: 'Anley',
					publishedAt: '2021-07-10'
				},

				objectArray: [{
					id: 0,
					name: 'li ming'
				}, {
					id: 1,
					name: 'wang peng'
				}],

				stringArray: ['a', 'b', 'c']
			}
		}
	}
</script>

<style>
	.divider {
		width: 100vw;
		height: 2px;
		background-color: gray;
	}
</style>

表单相关数据绑定：

<template>
	<view class="">
		<!-- 数据双向绑定 -->
		<view>
			<input v-model="message" type="text" value="" />
			<text>Message is:{{message}}</text>
		</view>
		<!-- 单选按钮 -->
		<view class="">
			<radio-group name="" @change="radioChange">
				<label v-for="(item,index) in items" :key="item.name">
					<radio :value="item.name" :checked="item.checked"/><text>{{item.value}}</text>
				</label>
			</radio-group>
		</view>
		<!-- 选择器  类似下拉选择框  
		:range="array"绑定数组对象
		:value="index"选中值下标
		-->
		<view class="">
			<picker  :range="array" :value="index" @change="pickerChange">
				<view>当选选择的值：{{array[index]}}</view>
			</picker>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				message: "11",
				index:1,
				array: ['A', 'B', 'C'],

				items: [{
						name: 'USA',
						value: '美国'
					},
					{
						name: 'CHN',
						value: '中国',
						checked: 'true'
					},
					{
						name: 'BRA',
						value: '巴西'
					},
					{
						name: 'JPN',
						value: '日本'
					},
					{
						name: 'ENG',
						value: '英国'
					},
					{
						name: 'TUR',
						value: '法国'
					}
				]
			}
		},
		methods:{
			radioChange(e){
				console.log(e);
				console.log("当前选中的是："+e.detail.value);
			},
			pickerChange(e){
				console.log(e);
				this.index=e.detail.value;
			}
		}
	}
</script>

<style>
</style>

组件：

局部组件：

自定义组件pageHeader.vue

<template>
	<view class="top">
		<!-- 定位城市 -->
		<view class="top-position">
			<view class="iconfont">&#xe61b;</view>{{cityName}}
		</view>
		<!-- 搜索框 -->
		<view class="ipt-wrap">
			<input type="text" value="" placeholder="默认关键字" placeholder-style="font-size:28rpx;" placeholder-class="pc"/>
			<view class="iconfont">&#xe615;</view>
		</view>
		<!-- 提示信息 -->
		<view class="top-notice">
			<view class="iconfont">&#xe634;</view>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				cityName:"北京"
			}
		},
		onLoad(){
			//定位城市  修改this.cityName
		}
	}
</script>
<style lang="scss">
		
</style>

注册pageHeader局部组件home.vue

<template>
	<view>
		<!-- 页眉 -->
		<page-header></page-header>
			
	</view>
</template>
<script>
	import pageHeader from "@/pages/tabBar/home/pageHeader.vue";
	export default {
		components:{pageHeader},//局部组件
		data() {
			return {
				
			}
		},
		onLoad() {
				
		}
	}
</script>

<style>
</style>

全局组件（任意页面都可以直接使用）

第一步：在main.js中引入，注册。

import Vue from 'vue'
import App from './App'
// 引入pageHeader
import pageHeader from "@/pages/tabBar/home/pageHeader.vue"


Vue.config.productionTip = false
//全局注册pageHeader
Vue.component("page-header",pageHeader);

App.mpType = 'app'

const app = new Vue({
    ...App
})
app.$mount()

第二步：在其他vue页面直接使用

<template>
	<view>
		<!-- 页眉 -->
		<page-header></page-header>
			
	</view>
</template>
<script>
	
	export default {
		
		data() {
			return {
				
			}
		},
		onLoad() {
				
		}
	}
</script>

<style>
</style>