Vue.js学习Day1
Vue.js学习之路
Vue文件项目的文件的功能解释
- pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航
栏、底部的原生tabbar 等- manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。
- App.vue 是我们的跟组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件，可以调用
应用的生命周期函数。- main.js 是我们的项目入口文件，主要作用是初始化 vue 实例并使用需要的插件。
- uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格， uni.scss 文
件里预置了一批scss变量预置。- unpackage 就是打包目录，在这里有各个平台的打包文件
- pages 所有的页面存放目录
- static 静态资源目录，例如图片等
- components 组件存放目录
页面结构解释
以下面源码举例子
下面是index.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//template视图，用来展示数据，html结构，静态
//其中的view视图只能出现一个，但是可以层级结构，就是在外面的view里面嵌入view，实现。
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
//script 行为，动词，让画面能够动起来
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
//这是页面加载的时候调用里面的方法
},
methods: {
//定义各种方法
}
}
</script>
//style样式，外观，通过写下参数实现可以展示出你想展示的，这是负责界面ui，提升用户的体验感
<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>
其中，关键的是package.json的源码
负责的是页面的路由配置1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"//这里写的是导航栏的文本
}
}//这是用户能看见的第一个页面，如果要加新页面，就继续加就行了
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"uniIdRouter": {}
}
view 视图标签
注意：ctrl +s 保存代码才能运行，而且要注意< template > 标签下只能有一个根节点，跟vue一样。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23【属性1】hover-class='xxx'
hover-class 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
<view hover-class='demo1'>123</view>
.demo1{
color: pink;
}
按下去之后，文字的颜色【马上】会发生改变。
【属性2】 hover-start-time='1000' 按住后多久出现点击态
<view hover-class='demo1' hover-start-time='1000'>456</view>
(1)hover-class
(2)hover-start-time
.demo1{
color: pink;
}
按下去之后，文字的颜色【1s后】会发生改变。
【属性3】hover-stay-time='5000' 手指松开后点击态保留时间
一定要注意属性2和属性3的区别！！！！！！
<view hover-class='demo1' hover-start-time='1000' hover-staytime='5000'>789</view>
.demo1{
color: pink;
}
按下去之后，文字的颜色【1s后】会发生改变。手指松开后会保留时间5s，
注意<template> 下只能由一个根节点。
常用scroll-view滚动标签
注意点：
scroll-view 可滚动视图区域
scroll-x Boolean true 允许横向滚动
scroll-y Boolean true 允许纵向滚动
用竖向滚动时，需要给一个固定高度，通过 css 设置 height。
横向滚动的时候需要给 white-space: nowrap; // 不换行 横向滚动必须加的属性
1 | //这里的是垂直滚动的示例 |
