uni-app入门基础

目录结构

• pages --页面存放记录
• static --静态页面资源目录
• APP.vue --应用入口文件 和小程序app.js类似
• main.js --应用入口文件 注册vue等
• manifest.json --项目配置
• pages.json --页面配置
• common --存放公用的文件目录
• components --自定义组件目录
• store --vuex目录
• unpackage --编译后(发行打包后自动生成)的文件存放目录

模板语法

• v-bind
  • 简写为 : 语法忘记，重新看
  • 组件属性要使用data中定义的数据变量，或者组件属性要使用表达式，要使用v-bind指定

<text v-bind:class="title" v-bind:data="true ? '对的' : '错的':">{{title}}</text>

• v-on
  • 简写为@，绑定各类事件 <button v-on:click="show">点我</button>

数据绑定

• 基础数据绑定

//视图中使用 {{}} 调用变量
<template>
    <view class="content">
        <text class="title">{{title}}</text>
        <view>
        hi....{{name}}
        </view>
    </view>
<template>

//变量赋值
<script>
export default {
    data: {
    title: 'Hello',
    name : 'hcoder'
},
</script>

• 数组形式的数据绑定

data: {
  students : [
   {name : "张三", age : 18},
   {name : "李四", age : 20}
  ]
 }, 
//调用
<view>
    {{students[0]['name']}}
    {{students[0].name}}
</view>

• v-model 双向绑定

<input type="text" v-model="title" />

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				
			}
		}

条件判断

• 在做条件判断和循环时建议使用空标签（block)
• 挂载和不显示的区别在于，挂载直接删除标签，不显示则是添加属性（display:none;）
• v-if
  • 条件判断，决定某个内容或者区块是否挂载
  • v-if v-else v-else-if

<view v-if="flag == 'vue'">vue</view>
<view v-else-if="flag == 'react'">react</view>
<view v-else>c++</view>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				flag: 'dadas'
				
			}
		}

• v-show
  • 条件判断，是否显示

<view v-show="flag">c++</view>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				flag: 'dadas'
				
			}
		}

列表渲染

• 遍历数组
  • 当in前填写一个名称时，则默认的是数组的内容，俩个值时，第二个则是数组内容的下标（索引）
  • 示例：

<view v-for="(item, index) in arr">{{index}} : {{item}}</view>

<script>
	export default {
		data() {
			return {
				arr: [
					'vue',
					'react',
					'anguajs'
					]
			}
		},

• 遍历对象
  • 当in前填写一个名称时，则默认的是对象的值，俩个值时，第二个则是对象内容的键
  • 示例：

<view v-for="(value, key) in obj">{{key}} : {{value}}</view>

<script>
	export default {
		data() {
			return {
            //对象里左边是键，右边是值
				obj:{
					name: 'vue',
					age:'12',
					sex: '男'
				}
			}
		}

事件绑定

• 为防止事件穿透，在事件后加 .stop可以组织事件穿透
• click为点击事件
• 事件穿透原理：
  • 当给父级和子级都绑定了事件
  • 当子级触发事件时，父级事件也会相继触发
  • 示例：

<view @click="c1">
    我是父级
    <view @click.stop="c2">我是子级</view>
</view>

<script>
	export default {
		methods: {
			c1(){
				console.log('我是父级事件');
			},
			c2(){
				console.log('我是子级事件');
			}
		}
	}
</script>