uniapp 基础 - 生命周期 - 方法 - 事件 - 数据双向绑定

基于vue的uni-app,基础概念语法

呆呆．

3068人浏览 · 2022-08-02 19:53:39

呆呆． · 2022-08-02 19:53:39 发布

一、生命周期

一个人从出生到寿终正寝是一个人的生命周期,分为几个阶段:出生-少年-青年-成年...

而在程序中也有自己的生命周期,这个生命周期是指一个实例对象从创建到销毁的过程,在这个过程中也有一些其他的阶段,eg:页面的加载---onLoad,页面的展示---onShow,而这些方法也称之为钩子函数。在程序执行的过程中,可以进行回调。

onLoad和onShow的区别:onLoad只是在实例对象创建的时候执行,onShow在页面进行重绘时都会执行,重绘是指编写html或者css的时候浏览器都会重新铺设页面(理解可能表述不是很准确),可以查看官方文档

二、方法

2.1 uni.navigateTo

// 保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
                 uni.navigateTo({
                    url: '/pages/mine/mine'
                 });

2.2 uni.redirectTo

  // 关闭当前页面，跳转到应用内的某个页面。 删除一个页
                uni.redirectTo({
                    url: '/pages/mine/mine'
                });

2.3 uni.reLaunch

// 关闭所有页面，打开到应用内的某个页面。 删除所有页
                 uni.reLaunch({
                    url: '/pages/mine/mine'
                 });

2.4 uni.switchTab

// 跳转到底部tabbar页
                 uni.switchTab({
                    url: '/pages/mine/mine'
                });

三、事件绑定

3.1点击事件 v-on

3.1.1基本使用

<template >



<button v-on:click="btn1Click">按钮1</button>

<view class="area" v-on:mousemove="mouseMove">div</view>



<button @click="btn1Click">按钮1</button>



<button @click="counter++">{{counter}}</button>



<view class="area" v-on="{click: btn1Click, mousemove: mouseMove}"></view>

<view class="area" @="{click: btn1Click, mousemove: mouseMove}"></view>

</template>

<script>

export default{

data() {

return {

message: "Hello World",

counter: 100

}

},

methods: {

btn1Click() {

console.log("按钮1发生了点击");

},

mouseMove() {

console.log("鼠标移动");

}

}

}

</script>

3.1.2参数传递

<template>



<button @click="btn1Click">按钮1</button>



<button @click="btn2Click($event, 'coderwhy', 18)">按钮2</button>

</template>

<script>

export default{

data() {

return {

message: "Hello World"

}

},

methods: {

btn1Click(event) {

console.log(event);

},

btn2Click(event, name, age) {

console.log(name, age, event);

}

}

}

}

</script>

3.2input事件

input 顾名思义就是 input标签上的事件记得只有一些输入的标签才会有这些功能

每次在input上输入一次就会执行这个方法

<input v-model="name" @input="inputName" type="text" placeholder="请输入你的姓名" style="background: skyblue;" />

inputName(e){
// e/event : 事件对象参数
console.log(e)
}

四、数据双向绑定v-model

待续...

五、封装和模块化开发

函数可以对逻辑进行复用,可以实现不同的功能,一次编写可以多次使用。想要在哪使用只需调用它就可以了。在别的文件中想要使用这个函数,只需导入这个文件就可以了,但是一个很大的文件在加载时耗时,损耗性能,而且我们只需要其中一个函数的使用,剩下大量的代码就显得赘余了,可能还有另外一个解决方法,一个函数封装一个文件,这样又需要引入大量的文件,而且需要什么功能的函数又不确定。需要一个文件的某个或者某几个函数的时候,只要把这几个函数导入使用,这样的开发效率就快的多了。下面引入模块化开发

1.所需函数所在文件需要把函数导出

2.要用函数的文件只需导入即可

// 1.所需函数所在文件需要把函数导出

// 1.1export default 默认导出只能使用一次
export default function getDate(){
let date = new Date()
let year = date.getFullYear()
let mounth = date.getMonth()
let day = date.getDate()
let time = date.getHours()
let min = date.getMinutes()
let sec = date.getSeconds()
let str = year + '-' + mounth +'-' + day + ' ' + time +':' + min + ':' + sec
return str

}

// 1.2 要用函数的文件只需导入即可

import getDate from '这个函数所在文件路径'

// 2.按需导入

export function getDate(){
let date = new Date()
let year = date.getFullYear()
let mounth = date.getMonth()
let day = date.getDate()
let time = date.getHours()
let min = date.getMinutes()
let sec = date.getSeconds()
let str = year + '-' + mounth +'-' + day + ' ' + time +':' + min + ':' + sec
return str

}

import {getDate} from '函数文件所在路径'

// 导入多个

import {getDate , getDate1 ...} from '函数文件所在路径'

六、自定义tabbar

这东西不需要我们自己去记下来是哪个单词,直接去跟着官网操作就好了官网

pages.json

"tabBar": {
       "color": "#323233",
       "selectedColor": "#EB1B34",
       "borderStyle": "black",
       "backgroundColor": "#ffffff",
       "list": [{
           "pagePath": "pages/index/index",
           "iconPath": "static/image/ic_tabar_home_n@2x.png",
           "selectedIconPath": "static/image/ic_tabar_home_n_1@2x.png",
           "text": "首页"
       }, {
           "pagePath": "pages/user/user",
           "iconPath": "static/image/ic_tabar_my_n@2x.png",
           "selectedIconPath": "./static/image/ic_tabar_my_s@2x.png",
           "text": "我的"
       }]
   }

七、封装组件

不同的页面之间有很多相同的部分,eg:导航部分,不同的商品,他们的html结构和css样式都几近相同,在原生开发时需要复制,大量的操作DOM,非常繁琐.在使用框架开发时,框架中引入了组件这个概念.

简单来说:一个.vue文件就是一个组件,下面介绍使用方法

1.全局注册,所有的vue文件都可以使用:在入口文件main.js中编写代码

import Vue from 'vue'
// 全局注册组件
import Navigation from './componets/Navigation.vue'
// (给全局注册起个名字, 组件的变量)
Vue.component('NavigationBar', Navigation)

2.局部注册:在component文件夹下新建一个.vue文件---方便组件管理

<template>
   <view class="">
       <view class="nav flexC">
           我是一个导航栏
       </view>
   </view>
</template>

<template>
   <view class="">
//第三步: 使用组件
       <NavigationBar></NavigationBar>

   </view>
</template>

<script>
// 第一步: 引入组件
   import NavigationBar from '../../componets/Navigation.vue'
   export default {
// 第二步:注册组件
       components:{
           NavigationBar
       },

   }
</script>