Vue.js学习之路
整合pdf中，5-12，这里会给出相应地方的注释
Warning: 注意，下面展示的vue中，路径这些需要自己去判断修改，我用的是我自己的路径，要修改路径也比较简单就是，自己把文件信息添加到静态文件里，然后自己对src或者url删除，回车，ide会自动给你补全，大概率就没什么问题了。
然后，开发者模式会弹出警告，不用去理会，神经病一直提醒路径错误，但是依旧可以运行。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
| <template>
<view>
<!-- uni-app事件 -->
<view class="" @tap="myClick">点击我</view>
<br>
<!-- 这里需要注意的是，鼠标长按激活不了长按事件 -->
<!-- 但可以使用按钮button去激活长按事件 -->
<view class="" @longpress="myClick2">长按出发</view>
<br>
<br>
<view class="" @click="aaa">111</view>
<view class="" @tap="shorttab">222</view>
<view class="" @longpress="longpress">333</view>
<br>
<!-- uni-app按钮操作 -->
<button type="primary">按钮</button>
<button type="primary" loading="true">页面操作</button>
<button type="primary" disabled="true">页面操作禁止点击</button>
<button size="mini">按钮</button>
<button type="primary" @tap="myClick3">页面操作，事件生效</button>
<br>
<br>
<!-- uni-app的input输入 -->
<input class="uni-input" placeholder="请输入用户名" />
<input class="uni-input" focus placeholder="请输入用户名" />
<input class="uni-input" maxlength="4" placeholder="最大输入长度为4" />
<input class="uni-input" placeholder-style="color:red" placeholder="占位符字体为红色" />
<br>
<!-- 实时获取input的值 -->
<!-- 第一种方式 使用v-model -->
<input class="uni-input" v-model="realyValue" @input="input" placeholder-style="color:red"
placeholder="使用v-model获取input的值" />
<input class="uni-input" type="number" v-model="realyValue" @input="input" placeholder-style="color:red"
placeholder="v-model输入同步" />
<!-- 第二种方式 使用event事件对象-->
<input class="uni-input" @input="get" placeholder-style="color:blue" placeholder="event获取input的值" />
<br>
<br>
<!-- 内置组件，音频 -->
<view>
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
:author="current.author" controls></audio>
</view>
<br>
<view>
<video
src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
</view>
<br>
<checkbox-group @change="chkChange" name="lanuage">
<label>
<checkbox :value="php" color="#4CD964" checked /><text>php</text>
</label>
<label>
<checkbox :value="python" disabled /><text>python</text>
</label>
<label>
<label>
<checkbox :value="java" color="#4CD964" /><text>java</text>
</label>
</label>
</checkbox-group>
<radio-group @change="radChange" name="sex">
<label>
<radio value="1" checked color="#4CD964" /><text>男</text>
<radio value="0" color="#4CD964" /><text>女</text>
</label>
</radio-group>
</view>
</template>
<script>
export default {
data() {
return {
current: {
poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-appdoc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hellouniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
},
audioAction: {
method: 'pause'
},
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
]
}
},
onLoad() {
},
methods: {
myClick() {
console.log(1)
},
myClick2() {
console.log(2)
},
aaa() {
console.log("点击文本触发方法")
},
shorttab() {
console.log("触摸触发方法")
},
longpress() {
console.log("长按触发方法")
},
myClick3() {
console.log(3)
},
input() {
console.log(this.realyValue) //这里写入的是第一种方式的方法，使用v-model，通过双向绑定的方式实现
},
get(event) {
//event是input的实现对象
console.log(event.target.value); //event事件对象
},
chChange: function(e) {
console.log(e);
},
// 实时获取到用户选中的值
radChange: function(e) {
console.log(e);
},
}
}
</script>
<style>
.uni-input {
border: 1rpx solid #ccc;
height: 60rpx;
text-align: left;
}
</style>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
| <!-- 这个vue文件主要实现的是跳转，于是我写在一个单独的页面上，你们可以根据需要去调取 -->
<template>
<view>
<view>
<navigator url="../order.vue">跳转到order</navigator>
</view>
<view>
<navigator url="/pages/good.vue">跳转到good</navigator>
</view>
<br>
<view>
<button type="primary" @tap="gonavigate">跳转按钮</button>
</view>
<view>
<button @click="toIndex">tarbar页面跳转按钮</button>
<button @click="toIndex2" class="css">tarbar页面跳转按钮</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
gonavigate(){
uni.navigateTo({
url:'/pages/order',
success: res=>{},
fail: (error)=>{console.log(error)},
complete: ()=>{}
})
},
toIndex(){
uni.switchTab({
url:'/pages/about/about'
})
},
toIndex2(){
uni.reLaunch({
url:'/pages/about/about'
})
}
}
}
</script>
<style>
.css{
background-color: crimson;
}
</style>
|
下面的是页面的路由，决定了页面文件的路径，窗口样式等，需要一个个对应上你创建的vue文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
| {
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/about/about",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/home2/home2",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},{
"path": "pages/order",
"style": {
"navigationBarTitleText": ""
}
},{
"path": "pages/good",
"style": {
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {},
<!-- 引入阿里图标库 -->
"tabBar": {
"list": [
{
"selectedIconPath": "static/homeon.png",
"iconPath": "static/home.png",
"pagePath": "pages/index/index",
"text": "页面"
},
{
"selectedIconPath": "static/stateon.png",
"iconPath": "static/state.png",
"pagePath": "pages/about/about",
"text": "关于"
},
{
"selectedIconPath": "static/personon.png",
"iconPath": "static/person.png",
"pagePath": "pages/home2/home2",
"text": "我的"
}
]
}
}
|
下面的，可以不用理会，我自己的备忘记录。有copyright© By 南秋SouthAki限制，请勿复制。
备忘：这个写在order.vue，可以写个分别跳转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| <template>
<view>
<view class="page-section page-section-gap" style="text-align: center;">
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
:author="current.author" :action="audioAction" controls></audio>
</view>
<view>
<video id="myVideo" src="https://qiniu-webassets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
</view>
<view>
<view class="uni-label">弹幕内容</view>
</view>
<view class="uni-list-cell-db">
<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
</view>
<button @click="sendDanmu" class="page-body-button">发送弹幕</button>
<checkbox-group @change="change">
<label>
<checkbox value="cb" checked="true" color="#FFCC33" />java
</label>
<label>
<checkbox value="cb" color="#FFCC33" />py
</label>
<label>
<checkbox value="cb" color="#FFCC33" />鸿蒙
</label>
</checkbox-group>
<navigator url="/pages/index/order">跳转到订单页面</navigator>
<navigator url="/pages/about/order2/order2">跳转到订单页面2</navigator>
<button type="primary" @tap="gonavigate">普通页面uni.navigateTo方法跳转按钮
</button>
<button @click="toIndex">tarbar页面uni.switchTab方法跳转按钮</button>
<button @click="toIndex2">tarbar页面uni.reLaunch方法跳转按钮</button>
</view>
</template>
<script>
export default {
data() {
return {
current: {
poster: 'https://qiniu-webassets.dcloud.net.cn/unidoc/zh/music-a.png',
name: '致爱丽丝',
author: '暂无',
src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hellouniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
},
src: '',
danmuList: [{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}
],
danmuValue: ''
}
},
onLoad() {},
methods: {
sendDanmu: function() {
this.videoContext.sendDanmu({
text: this.danmuValue,
color: this.getRandomColor()
});
this.danmuValue = '';
},
change() {
console.log(1);
},
gonavigate() {
uni.navigateTo({
url: '/pages/about/order2/order2',
success: res => {},
fail: (error) => {
console.log(error)
},
complete: () => {}
});
},
toIndex() {
uni.switchTab({
url: '/pages/about/about'
})
},
toIndex2() {
uni.reLaunch({
url: '/pages/about/about'
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
|
