uni-app初识

整体结构

• template
  数据都写在{{}}中，类似于django的数据传递方式
• script
  里面就有一个协调者、调度器，mvvm架构的vm。
  data就是model，存在所有的数据；return的对象可以是任意的
• style
  以上三个结构在一个页面只能出现一次

data的值就是不同的模型内部的变量

项目初识

pages.json

是一个json对象，https://uniapp.dcloud.io/collocation/pages
详情可以在网站查看
“navigationBarTitleText”: "uni-app"可以修改页面的导航栏

app.vue

全局样式，公共页面的样式css可以放在这里

main.js

项目入口文件，可以采用默认配置。
也可以在这里配置全局变量

mainfest.json

应用配置

应用表示不可更改

应用名称

自定义

应用版本名称

自定义

应用生命周期

• onLaunch
  初始化完成时候触发，只触发一次
• onShow
  页面启动
• onHide
  页面进入后台
• onUniNViewMessage
  用于通信，对nvue页面发送的数据进行监听

标签内部数据绑定

标签外部

必须使用{{}}表达式传值

标签内部

不支持{{}}传递
应该用
v-bind:组件属性名,缩写用:开头
例如：

<view class="content">
			<navigator v-bind:url="url"><button type="primary">跳转到新页面</button>/navigator>
</view>
或者
<view class="content">
			<navigator :url="url"><button type="primary">跳转到新页面</button>/navigator>
</view>

<script>
	export default {
		data() {
			return {
				title: 'Hello world!',
				student: {
					name: "wangxiong",
					age: 18
				},
				url:"../hello/hello"
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

事件

在标签内部用 @+方法，之后在下方的methods里编写对应的方法。

• @tap和@click建议使用tap事件，两者取其一即可
• @longpress和longtap,不建议使用longtap
• @touchstart
• @touchend
• @touchmove
• @touchcancel,注意来电时候可以做出的一些回调函数

条件渲染

1. v-if
   若是错误会在view中被移除
   • 支持三元表达式
     
2. v-show
   display若为错误只是显示为display为none

		<view v-if="sex==1?true:false">
			男性
		</view>
		<view v-else-if="sex==0?true:false">
			女性
		</view>
		<view v-else>
			未知
		</view>		
        <script>
        export default {
		data() {
			return {
				isShow: true,
				sex: 3
			}
		},
        </script>

for

		<view v-for="student in studentArray">
			姓名:{{student.name}}
			年龄:{{student.age}}
			<view>
				技能:<block v-for="skill in student.skill">
					{{skill}}
				</block>
			</view>
		</view>

v-for key

设置了:key可保证选中的元素的绑定的一致性

<template>
	<view>
		<view v-for="stu in studentArray" :key="stu.id">
			<checkbox :value="stu.name" />{{stu.name}}
		</view>
		<button type="primary" @click="addstu">新增学生</button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				studentArray: [{
					id: 1,
					name: "jack",
					age: 19,
					skill: ["c++", "java"]
				}, {
					id: 2,
					name: "tom",
					age: 12,
					skill: ["c++"]
				}, {
					id: 3,
					name: "jarry",
					age: 25,
					skill: ["python"]
				}, {
					id: 4,
					name: "wx",
					age: 63,
					skill: ["QT"]
				}, ]
			}
		},
		methods: {
			addstu() {
				var studentArray = this.studentArray;
				var newId = studentArray.length + 1;
				var newStu = {
					id: newId,
					name: "新生" + newId,
					age: 18
				}
				// studentArray.push(newStu);
				studentArray.unshift(newStu);
			}
		}
	}
</script>