初识uni-app

1、介绍：

uni-app是一个使用Vue.js开发所有前端应用的框架，编写一套代码，可以发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

2、vue的优势：

• 轻量级渐进式框架
• 视图、数据和结构的分离
• 响应式双向数据绑定
• 组件化
• 虚拟DOM
• 运行速度快，易于上手
• 便于与第三方库或既有项目整合

 3、与html页面的区别

（1）uni-app里不使用div标签，而使用view标签；图片标签不使用img，而使用image

（2）script中跟平常的js写法不同

（3）页面后缀名成了.vue文件

（4）vue一个页面分为template、script、style三部分

（5）template模板中必须有一个根标签

（6）js中的this指向window；而vue里边的this指向vue实例，想要获取变量、方法，要使用this.名

（7）vue减少了DOM操作

4、插值表达式（胡子表达式）

插值表达式是用两对花括号引起来的写法，可以直接写变量名，也可以使用三元进行判断

{{变量、判断条件（三元运算符）}}  ，如果里边想使用字符串得加引号

		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>

5、data

data是定义初始数据的地方

写法：data() {

        return {

                        键：值

        }

}

6、methods方法

methods里边是写一些我们自己定义的方法（函数）的地方

7、app.vue

app.vue里边的style标签，写一些公共的css，不需要在每一个页面单独写

8、v-bind

可以动态添加类名，简写 就是一个  ：

写法：

        <view>
			<view v-bind:class="status==1?'orange' : 'blue'">
				{{status==1?'已发货': '未发货'}}
			</view>
		</view>

 

status是定义在data里的数据 ，这里我定义的status值为1

还可以动态使用style样式

		<view :style="{color: status==1? 'red':'black'}">
					{{status==1?'已支付':'未支付'}}
		</view>

 

 

 这里我定义的status值为2

 9、v-if

判断哪些元素 是否显示 如果不显示会直接把当前元素删掉

注：使用v-else 必须要和 使用的v-if同级  否则的话会报错

		<view>
			<view v-if="type === 'A'">
				A
			</view>
			<view v-else-if="type === 'B'">
				B
			</view>
			<view v-else>
				C
			</view>
		</view>

这里我没有在data里定义type，所以页面显示出来的是C

 10、v-for

写法：v-for="(每一项，索引)  in  数组"

		<view class="box" v-for="(item,index) in list">
			<view class="flexC">
				<view>商品名称</view>
				<view>{{item.name}}</view>
			</view>
			<view class="flexC">
				<view>数量</view>
				<view>{{item.num}}</view>
			</view>
			<view class="flexC" v-bind:class="">
				<view>价格</view>
				<view>￥{{item.price}}</view>
			</view>
		</view>

				list: [{
						name: '奥特曼1',
						num: 10,
						price: 50
					},
					{
						name: '奥特曼2',
						num: 44,
						price: 34
					},
					{
						name: '奥特曼3',
						num: 6,
						price: 77
					}
				]

11、v-html 和 v-text 的区别 

v-html   和  v-text 都可以识别文字    但是 v-html可以识别标签