Created
November 4, 2021 03:37
-
-
Save monkeydone/1cde53f5c9d42862ba204328e74f0eaf to your computer and use it in GitHub Desktop.
Uni-app学习片段
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| https://uniapp.dcloud.io/README |
隔行换色
<template>
<view>
<view v-for="(item,index) in 10">
<!-- 通过%运算符求余数，实现隔行换色的效果 -->
<view :class="'list-' + index%2">{{index%2}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return { }
}
}
</script>
<style>
.list-0{
background-color: #aaaaff;
}
.list-1{
background-color: #ffaa7f;
}
</style>
data的正确使用
//正确用法，使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法，会导致再次打开页面时，显示上次数据
data: {
title: 'Hello'
}
//错误写法，同样会导致多个组件实例对象数据相互影响
const obj = {
title: 'Hello'
}
data() {
return {
obj
}
}
多个事件的处理
<template>
<view>
<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">
Submit
</button>
</view>
</template>
<script>
export default {
methods: {
one(event) {
// first handler logic...
console.log("event1: ",event);
},
two(event) {
// second handler logic...
console.log("event2: ",event);
}
}
}
</script>
监控对象
<template>
<view>
<input type="number" v-model="obj.a" style="border: red solid 1px;" />
<input type="number" v-model="obj.b" style="border: red solid 1px;" />
<view>总和：{{sum}}</view>
<button type="default" @click="add">求和</button>
</view>
</template>
<script>
export default {
data() {
return {
obj: {
a: 1,
b: 1,
},
sum:""
}
},
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj-newVal:' + JSON.stringify(newVal), 'obj-oldVal:' + JSON.stringify(oldVal), );
},
deep: true//对象中任一属性值发生变化，都会触发handler方法
}
},
methods: {
add() {
this.sum = parseInt(this.obj.a) + parseInt(this.obj.b)
}
}
}
</script>
监控对象的某个属性
export default {
data() {
return {
obj: {
a: 1,
b: 1,
}
}
},
watch: {
"obj.a": {//监听obj对象中的单个属性值的变化
handler(newVal, oldVal) {
console.log('obj-newVal:' + newVal, 'obj-oldVal:' + oldVal);
}
}
}
}
Vue基础
- 模板结构
- 事件
- 数据
- 生命周期
<template>
<view>mine</view>
<button @click="counter += 1">Add 1</button>
<text>The button above has been clicked {{ counter }} times.</text>
<view>
<button @click="greet">点我显示toast</button>
</view>
<view>
<input type="number" v-model="a" style="border: red solid 1px;" />
<input type="number" v-model="b" style="border: red solid 1px;" />
<view>总和：{{sum}}</view>
<button type="default" @click="add">v-model的使用，双向绑定，求和</button>
</view>
<view>
<view>{{ fullName }}</view>
<button @click="changeName">点击修改name</button>
</view>
<view>
<button @click="warn('Form cannot be submitted yet.', $event)">
event的使用方法，点击
</button>
</view>
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="picker">
点击，选择列表，当前选择：{{array[index]}}
</view>
</picker>
<radio-group class="radio-group" @change="radioChange">
<label class="radio" v-for="(item, index) in items" :key="item.name">
<radio :value="item.name" :checked="item.checked" /> {{item.value}}
</label>
</radio-group>
<view>
<text>{{text_value}}</text>
<button :type="buttontype" @click="change_text_value()">修改文本</button>
</view>
<view v-for="(item,index) in 5">
<view :class="'list-'+index%2">{{index %2}}</view>
</view>
<image src="https://i.picsum.photos/id/100/300/300.jpg?hmac=rRJwCdAq0dwpM7tpG0mEUD9l4HJLw_ZX0pbnCw5xn_U"></image>
<view v-on:click="do_something()">点击</view>
<view v-html="rawHtml"></view>
<view class="static" :class="{active:isActive}">Hello UniApp</view>
<view class="static" :class="{active:isActive,'text-danger':hasError}">Hello UniApp Again</view>
<view :class="[activeClass,errorClass]">Hello Class Array</view>
<view :class="[isActive ? activeClass : '', errorClass]">三元表达式</view>
<view class="container" :class="computedClassStr">compoted 用法</view>
<view :style="[baseStyles, overridingStyles]">:style的使用方式</view>
<view v-if="seen" @click="change_see()">现在你看到我了,点我</view>
<view v-else @click="change_see()">你看不到我了，点我</view>
<view>
<view v-if="type === 'A'">
A
</view>
<view v-else-if="type === 'B'">
B
</view>
<view v-else-if="type === 'C'">
C
</view>
<view v-else>
Not A/B/C
</view>
</view>
<view>
<view v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</view>
</view>
<view>
<view v-for="(item,index) in objectArray" :key="item.id">
{{index +":"+item.name}}
</view>
<view v-for="(item,index) in stringArray" :key="item">
{{index+":"+item}}
</view>
</view>
</template>
<script lang="ts">
export default {
data(){
return {
text_value:"123",
isActive:true,
hasError:true,
seen:true,
type:"B",
counter:0,
activeClass:'active',
errorClass:'text-danger',
index: 0,
a:10,
b:20,
sum:0,
array: ['A', 'B', 'C'],
baseStyles: {
color: 'green',
fontSize: '30px'
},
overridingStyles: {
'font-weight': 'bold'
},
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2021-05-10'
},
objectArray:[{
id:0,
name:'li ming'
},{
id:1,
name:'wang peng'
}],
stringArray:['a','b','c'],
items: [{
name: 'USA',
value: '美国'
},
{
name: 'CHN',
value: '中国',
checked: 'true'
},
{
name: 'BRA',
value: '巴西'
},
{
name: 'JPN',
value: '日本'
},
{
name: 'ENG',
value: '英国'
},
{
name: 'TUR',
value: '法国'
}
],
firstName: 'Foo',
lastName: 'Bar',
rawHtml: '<div style="text-align:center;background-color: #007AFF;"><div >我是内容</div><img src="https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png"/></div>'
}
},
watch: {
/* 使用watch来响应数据的变化，第一个参数为newVal新值，第二个参数oldVal为旧值*/
firstName: function(newVal, oldVal) {
console.log("a--newVal: ", newVal, "a--oldVal: ",oldVal);
},
lastName: function(newVal, oldVal) {
console.log("b--newVal: ", newVal, "b--oldVal: ",oldVal);
}
},
onLoad() {
this.text_value = "456"
this.sum=this.a+this.b
},
computed: {
computedClassStr() {
return this.isActive?"active-computed":"active"
},
fullName: {
// getter
get(){
return this.firstName + ' ' + this.lastName
},
// setter
set(newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
methods : {
change_see(){
this.seen = !this.seen
},
change_text_value() {
this.text_value = "789"
},
do_something() {
alert("do some thing")
},
greet(event) {
console.log(event);
uni.showToast({
title: 'Hello ' + this.errorClass + '!'
});
},
warn(message, event) {
// 现在我们可以访问原生事件对象
if (event) {
//可访问 event.target等原生事件对象
console.log("event: ",event);
}
uni.showToast({
title: message
});
},
bindPickerChange(e) {
console.log(e)
this.index = e.detail.value
},
radioChange(e) {
console.log('radio发生change事件，携带value值为：', e.target.value)
},
changeName() {
this.fullName="John Deo"
},
add() {
this.sum = parseInt(this.a) + parseInt(this.b)
},
}
}
</script>
<style>
.list-0 {
background-color: #3CC51F;
}
.list-1 {
background-color: #777777;
}
.static {
color:#2C405A
}
.active {
background-color: #3CC51F;
font-size: 24px;
}
.active-computed {
background-color: #007AFF;
font-size: 24px;
}
.text-danger {
color:#DD524D
}
</style>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
第一个vue