uni-app随笔(一)

一.关于数据处理

1.v-model,数据绑定。

  它的本质上是个语法糖，用于实现<input>,<textarea>等标签的数据绑定。

如:

<input v-model="test" />

它完整的写法为：

<input :value="test" @input="test = $event.target.value">

其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input.

2.v-for,指令渲染。和OC中的遍历加载类似

//names是一个数据源，可以是数组也可以是字典
<button type="default" v-for="(item,index)in names":key="index"></button>

3.v-bind:动态绑定

  数据：

使用   :value="test"

//完整的写法
<input v-bind:"test">

样式绑定

当条件成立时绑定样式texts。  selectId==list 是判断条件

<text :class = "{'texts':selectId == 'list'}"></text>

注：通常省略了v-bind。

4.v-if  v-else显隐条件

如：在listActive等于5的时候显示，view显示

	<view class="bx-list" v-for="(item,index) in lists" :key="index" v-if="listActive=='5'">
</view>

注：v-if是有惰性的，等到条件成立的时候才真正的渲染。如果进入页面一开始为false,则什么都不会做。v-else 条件为假时渲染

二.关于布局样式

 1.按钮：

//文字居中
         display: flex;
		justify-content: center;
		align-items: center;
//按钮边框
border:1rpx soild #FFFFFF

2.渐变色设置

基础线性渐变，从上到下
background: linear-gradient(blue, pink);
 
改变渐变方向
background: linear-gradient(to right, blue, pink);
 
对角线渐变
background: linear-gradient(to bottom right, blue, pink);
 
设置渐变角度
background: linear-gradient(70deg, blue, pink);

 

三.其他

1.引入小程序插件：

• 创建组件的文件夹名字，名字遵循要使用的小程序的命名规则，如微信，支付宝。
• 在pages.json文件引入要使用的小程序插件。使用关键字"usingComponents"

注意：小程序插件不支持h5

2.引入文件

//外部文件引入
import vue from 'vue'

//按需引入部分组件
 import {
        mapMutations
    } from 'vuex';

//内部文件导入
import 文件名 from '路径'