一.关于数据处理
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 '路径'