跨平台框架uni-app
一、页面
1. 创建新页面
- 在pages文件夹下直接创建
.vue
的新页面文件
文件目录如下
┌─components
│
├─pages 页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
└─other.vue 创建的新页面
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
- 把新的页面文件放在pages下的一个文件夹内
文件目录如下
┌─components
│
├─pages 页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─other
│ └─other.vue 创建的新页面
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
2. 显示新页面
如果想要显示新页面,我们需要在pages.json
中进行页面的注册
注:
pages
是一个数组pages
中第一项表示应用启动页(在没设置页面跳转之前,我们都把新页面放在第一项,这样才能在应用启动时显示新页面)
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/other",
"style" : {
"navigationBarTitleText": "新页面"
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
二、事件
1. 注册事件
在页面文件的中template
标签内注册事件 @click="handleClick"
样例:
<template>
<view class="content">
<view @click="handleClick"> 点我试试</view>
</view>
</template>
2. 定义事件监听回调函数
在methods
中定义事件监听回调函数
在页面文件的script
标签的导出模块的method
中加入该事件监听的回调函数handleClick()
样例:
<script>
export default {
methods: {
handleClick(){
console.log("你好帅(你好美)!!!");
}
}
}
</script>
3. 事件的传参
我们可以通过事件来传递参数
3.1 简单传参
通过给事件函数加入实参
回调函数中通过event
对象来调用
样例:
<template>
<view class="content">
<view @click="handleClick(1)"> 点我获取要传递的参数</view>
</view>
</template>
<script>
export default {
methods: {
handleClick(event){
console.log(event);
}
}
}
</script>
event
为注册函数中传递的参数,可以为数字类型、字符串类型甚至是对象类型
我们可以通过event
对象来调用它的属性 ,调用方法: event.property
,property
为event
对象所拥有的其中一个属性
如果有一个属性为transfernum
,可以通过event.transfernum
来调用
注:event
可以简写成e
效果是一样的
如下
handleClick(e){
console.log(e);
}
3.2 传入标签内自定义参数
<template>
<view class="content">
<view data-pro="11" @click="handleClick(1,$event)"> 点击我获取标签中自定义的数据的值</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
handleClick(index,event){
console.log(index);
console.log(event);
console.log(event.currentTarget.dataset.pro);
}
}
}
</script>
event
返回值是一个对象
如下
我们通过event.currentTarget.dataset.pro
来获取event对象的currentTarget属性下的pro
pro
属于数据集 dataset
,因为我们定义的是data-pro="11"
,data
就相当于是一个前缀,pro
作为实际放在数据集中的数据名
当然自定义的数据值也可以是子组件的值,或者是从页面用户输入的值,这些在后面学习了组件获取参数,将获取到的参数放到自定义数据中就可以了
三、组件
组件是视图层的基本组成单元。
一个组件包括开始标签和结束标签,标签上可以写属性,并对属性赋值。
内容写在开始标签和结束标签之内。
页面上内容的变化是通过挂载和销毁组件来完成。
注:
根节点为 <template>
,这个 <template>
下只能且必须有一个根<view>
组件。这是vue
单文件组件规范。
1. 组件的共有属性
属性名 | 类型 | 描述 | 注解 |
---|---|---|---|
id | String | 组件的唯一标识 | 保持整个页面唯一 |
class | String | 组件的样式类 | 在对应的 css 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否隐藏 | 所有组件默认是显示的 |
data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数(*表示自定义的内容) |
@* | EventHandler | 组件的事件 | 用于事件绑定(*表示自定义的内容) |
2. 添加组件
在component
文件夹下创建一个组件文件phoneComp
<template>
<view>
<text>这是一个组件</text>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style>
</style>
3. 导入组件
在index.vue
中的script
标签中导入创建的组件文件
<script>
import textCom from "@/components/phoneComp";
</script>
4. 注册组件
将导入的组件注册到页面中
<script>
import phoneCompfrom "@/components/phoneComp";
export default {
components:{
//注册组件 name:value 当name=value时可以简写成 name , 全写为 phoneComp:phoneComp
phoneComp
}
</script>
5. 使用注册的组件
通过标签的形式来使用组件
<template>
<view>
<phoneComp></phoneComp>
</view>
</template>
注:
vue
推荐用phone-comp
的格式来表示组件
但是这个必须是在注册组件时将模块名用驼峰命名法来表示,才能使用
如:注册时使用phoneComp
作为注册时的组件名,那么你可以使用<phone-comp></phone-comp>
来使用组件
如果不使用驼峰命名法,如:phonecomp
作为注册时的组件名,那么你不可以使用<phone-comp></phone-comp>
来使用组件
实际是使用-
来代替 驼峰
phoneComp
→phone-comp
组件的源文件的命名方式不会影响导入模块后的命名
6. 组件传递参数
父向子传递参数通过属性
的方式
子向父传递参数通过触发事件
的方式
使用全局数据传递参数
- 通过挂载
vue
的原型上 - 同通过
globalData
的方式
6.1 父向子传递数据
父页面向子组件ul-com
通过属性名list
传递了一个数组数据
子组件通过props
进行接收数据
父组件
<transfer-par :list="[1,2,3,4]"></transfer-par>
transfer-par
为导入的组件(模块)的自定义组件名
import transferPar from '@/components/transferPar.vue';
当然我们也可以在父组件上用 导出模块的属性值来代替直接赋值
例如:list="filterList"
这里filterList
为在data
中定义的一个数组
子组件
<template>
<view :list="list">
{{list[2]}}
</view>
</template>
<script>
export default {
data() {
return {
};
},props:{
list:Array
}
}
</script>
<style>
</style>
6.2 子向父传递数据
子组件
<template>
<view >
<text @click="handleClick"> 点击获取子组件的数据</text>
</view>
</template>
<script>
export default {
data() {
return {
sr:"来自子组件的数据"
};
},
methods:{
handleClick(){
console.log("点击了子组件");
this.$emit("textChange",this.sr);
}
}
}
</script>
<style>
</style>
父组件
<template>
<view>
<!-- <view >{{sr}} </view> -->
<child-transfer
@textChange="handleTextChange">
</child-transfer>
</view>
</template>
<script>
import childTransfer from '@/components/childTransfer.vue';
export default {
data() {
return {
sr:""
}
},
methods: {
handleTextChange(e){
console.log("点击了");
// this.sr=e;
}
},
components: {
childTransfer
}
}
</script>
<style>
</style>