uniapp学习(一)
【新课uniapp零基础入门到项目打包（微信小程序/H5/vue/安卓apk）全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p=24&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1
竖着的话要给容器加固定高度
横着需要给盛东西的那个view（在这里是group）加上css样式，white-space: nowrap;
<template>
<view>
<scroll-view scroll-x="true" scroll-y class="scroll">
<view class="group">
<view class="item">111</view>
<view class="item">222</view>
<view class="item">333</view>
<view class="item">444</view>
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.scroll{
box-sizing: border-box;
border: 1px solid greenyellow;
height: 220px;
.group{
white-space: nowrap;
.item{
height: 300px;
width: 750rpx;
background-color: powderblue;
border: 1px solid red;
display: inline-block;
}
}
}
</style>
<template>
<view>
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
circular
indicator-color="rgba(255,255,255,0.5)"
indicator-active-color="rgba(255,255,255,1)"
class="hi">
<swiper-item>
<view class="swiper-item">a</view>
</swiper-item>
<swiper-item>
<view class="swiper-item">b</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.hi{
box-sizing: border-box;
height: 250rpx;
width: 750rpx;
.swiper-item{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
width: 100%;
background-color: thistle;
}
}
</style>data属性
<template>
<view>
<view class="">
当前标题：{{title}}
</view>
<view class="">
123
</view>
<view class="">{{arr}}</view>
<view class="">{{arr[0]}}</view>
<view class="">{{obj}}</view>
<view class="">{{obj.name}}</view>
</view>
</template>
<script>
export default {
data() {
return {
title:"微信小程序",
num:123,
arr:["aaa","bbb","ccc"],
obj:{
name:"zhangSan",
age:22
}
}
},
methods: {
}
}
</script>
<style>
</style>条件渲染
v-if
<template>
<view>
<view v-if="state">显示</view>
<view v-if="notshow">显示</view>
<view v-if="notshow">假如不显示</view>
<view v-else>显示这个</view>
<view v-if="day=='周一' ">周一</view>
<view v-else-if="day=='周二'">周二</view>
<view class="" v-else>周末吗</view>
</view>
</template>
<script>
export default {
data() {
return {
state:true,
notshow:false,
day:"周一"
}
},
methods: {
}
}
</script>
<style>
</style>v-show
<view v-show="state">hello</view>
<view v-show="!state">world</view>小区别
- v-if把不显示的元素原地蒸发
- v-show是使用了css的display= none
v-for
(v-bind：key 简写成：key)
<template>
<view>
<view v-for="item in user" :key="index">
<view class="">{{item.name}}+{{item.age}}</view>
</view>
<view v-for="(item,index) in arr" :key="index">
<view >{{(index+1)+"-"+item }}</view>
</view>
<view v-for="(value,name,index) in obj" :key="index">
<view >{{index}}--{{ name}}:{{value}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
arr:["aaa","bbb","ccc"],
obj:{
name:"zhangSan",
age:22
},
user:[
{
name:"张三",
age:20
},
{
name:"李四",
age:21
}
]
}
},
methods: {
}
}
</script>
<style>
</style>其他指令
v-html
<template>
<view>
<view>{{title}}</view>
<view v-html="title"></view>
-----------------------------------------
<view>{{code}}</view>
<view v-html="code"></view>
</view>
</template>
<script>
export default {
data() {
return {
code:"<h1>hello world</h1>",
title:"微信小程序"
}
},
methods: {
}
}
</script>
<style></style>v-bind
动态属性绑定
<template>
<view>
<image v-bind:src="imgSrc"
mode=""
></image>
<!-- 简写 -->
<image :src="imgSrc"
mode=""
></image>
<!-- 循环 -->
<image :src="`../../static/images/pic${item}.jpg`"
v-for="item in [1,2,3]"
></image>
</view>
</template>
<script>
export default {
data() {
return {
imgSrc:"../../static/logo.png",
}
},
methods: {
}
}
</script>
<style>
</style>v-on
事件触发
<template>
<view>
<!-- v-on 指令，它用于监听 DOM 事件。v-on缩写为‘ @ ’，下文简称为 @事件 -->
<!-- 完整语法 -->
<view v-on:click="doSomething">{{title}}</view>
<!-- 缩写 -->
<view @click="returnOrigin">{{title}}</view>
<button @click="addNum">{{num}}</button>
</view>
</template>
<script>
export default {
data() {
return {
title:"(｡･∀･)ﾉﾞ嗨",
num:0
}
},
methods: {
doSomething(){
this.title ="┗|｀O′|┛ 嗷~~"
},
returnOrigin(){
this.title="(｡･∀･)ﾉﾞ嗨"
},
addNum(){
this.num = this.num+1
}
}
}
</script>
<style>
</style>class和style的绑定
style
<template>
<view>
<view class="box"
:style="{background:'blue'}"
>
</view>
<view class="box"
:style="{background:bgcolor}"
@click="clickBg"
>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgcolor:"yellow"
}
},
methods: {
doSomething(){
this.title ="┗|｀O′|┛ 嗷~~"
},
returnOrigin(){
this.title="(｡･∀･)ﾉﾞ嗨"
},
addNum(){
this.num = this.num+1
},
clickBg(){
// 也可以在data里面写个变量点击后改变data里面的变量然后v-bind给style
let r = Math.random()*255
let g = Math.random()*255
let b = Math.random()*255
this.bgcolor = "rgb("+r+","+g+","+b+")"
}
}
}
</script>
<style>
.box{
height: 200rpx;
width: 750rpx;
border: 1px solid black;
background-color: pink;
}
</style>Class 与 Style 绑定
<template>
<view>
<view class="block"
:class="{activeBlock:ifactive}"
@click="changeActive"
></view>
<view class="block"
:class="ifactive ? 'activeBlock' :' ' "
@click="changeActive"
>
</view>
</view>
</template>
<script>
export default {
data() {
return {
ifactive: false
}
},
methods: {
changeActive(){
this.ifactive = !this.ifactive
}
}
}
</script>
<style>
.block{
width: 100%;
height: 250rpx;
background-color: darkgray;
border: 1px solid black;
}
.activeBlock{
background-color: lightcyan;
}
</style>案例 点击导航高亮显示
<template>
<view>
<view class="nav">
<view class="item"
:class="navIndex==index ? 'active': ' ' "
v-for="(item,index) in navArr"
:key="index"
@click="highLight(index)">
{{item}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
navArr:[
"第一项",
"第二项",
"第三项",
"第四项",
"第wu项",
],
navIndex:-1
}
},
methods: {
highLight(index){
this.navIndex = index
}
}
}
</script>
<style lang="scss">
.nav{
display: flex;
justify-content: space-around;
align-items:center;
}
.item{
flex: 1;
line-height: 90rpx;
background-color: aliceblue;
text-align: center;
&.active{
background-color: greenyellow;
color: white;
}
}
// css写法，上面那个 &是scss写法
// .item.active{
// background-color: greenyellow;
// }
// }
</style>v-model
<template>
<view>
<view class="" @click="clickChange">标题：{{title}}</view>
<input type="text" v-model="title">
</view>
</template>
<script>
export default {
data() {
return {
title:"(｡･∀･)ﾉﾞ嗨"
}
},
methods: {
clickChange(){
this.title = "┗|｀O′|┛ 嗷~~"
}
}
}
</script>
<style lang="scss">
input{
border: 1px solid #ccc;
}
</style>小案例表单提交-双向绑定
（选择器一类的是无法用v-model进行双向绑定的，需要使用组件。就是这种也能用，但是。。。不能配合其他组件。就是个案例意思意思。配合组件的在下一个）
<template>
<view>
<view class="out">
<view class="row">
<input type="text" placeholder="用户名" class="border"
v-model="message.username"
>
</view>
<view class="row">
<input type="text" placeholder="电话" class="border"
v-model="message.tel"
>
</view>
<view class="row">
<textarea name="" id="" cols="30" rows="10" placeholder="请输入留言内容"
class="border"
v-model="message.content"
></textarea>
</view>
<view class="row">
<button type="primary"
@click="submitMessage"
>提交</button>
</view>
</view>
<view class="">
{{message}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
message:{
username:"",
tel:"",
content:""
}
}
},
methods: {
submitMessage(){
}
}
}
</script>
<style lang="scss">
.out{
padding: 30rpx;
.row{
margin-bottom: 10rpx;
}
.border{
border:1px solid #eee;
width: 100%;
min-height: 80rpx;
padding: 0 20rpx;
box-sizing: border-box;
}
}
</style>模拟真实表单提交，详细介绍表单组件
① 提交按钮（button）需要属性 form-type="submit"
② 输入的组件添加属性 name
③ form 添加事件 @submit="abc"，在methods里通过abc(e)来获取表单内容
<template>
<view>
<form class="out" @submit="sub">
<view class="row">
<input type="text" name="username">
</view>
<view class="row">
<textarea name="content" id="" cols="30" rows="10"></textarea>
</view>
<view class="row">
<radio-group name="gender">
<label>
<radio value="0" /><text>男</text>
</label>
<label>
<radio value="1" /><text>女</text>
</label>
<label>
<radio value="2" /><text>保密</text>
</label>
</radio-group>
</view>
<view class="row">
<!-- mode="" :range="" @change="" -->
<picker mode="selector" :range="options" name="school"
:value="selectSchool"
@change="changeSchool"
>
<view>点击选择学历：{{options[selectSchool]}}</view>
</picker>
</view>
<view class="row">
<button type="primary" form-type="submit">提交表单</button>
<button type="primary"
form-type="reset"
>重置</button>
</view>
</form>
<view class="">
{{obj}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
obj:null,
options:["高中","大专","本科","硕士","博士"],
selectSchool:0,
}
},
methods: {
sub(e){
this.obj = e.detail.value
this.obj.school = this.options[this.selectSchool]
},
changeSchool(e){
this.selectSchool = e.detail.value
}
}
}
</script>
<style lang="scss">
.out{
padding: 30rpx;
.row{
margin-bottom: 10rpx;
border:1px solid #eee;
width: 100%;
min-height: 80rpx;
// padding: 0 20rpx;
box-sizing: border-box;
}
}
</style>计算属性
<template>
<view>
<input type="text" v-model="title">
<view>
原标题：{{title}}
</view>
<view>
修改后：{{changeTitle}}
</view>
<view>
{{demo}}
</view>
<view>
{{fun()}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title:"",
text:"hello world"
}
},
methods: {
fun(){
return "vue学习"
}
},
// 计算属性 动态计算 优化性能
computed:{
demo(){
return "(｡･∀･)ﾉﾞ嗨 "+this.text
},
changeTitle(){
return this.title.toUpperCase()
}
}
}
</script>
<style lang="scss">
input{
border: 1px solid #eee;
}
</style>手机扫一扫
移动阅读更方便
你可能感兴趣的文章