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

一、生命周期

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

        而在程序中也有自己的生命周期,这个生命周期是指一个实例对象从创建到销毁的过程,在这个过程中也有一些其他的阶段,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 >

    <!-- 完整写法: v-on:监听的事件="methods中方法" -->

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

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

    <!-- 语法糖 -->

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

    <!-- 绑定一个表达式: inline statement -->

    <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>

    <!-- 默认传入event对象, 可以在方法中获取 -->

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

    <!-- $event可以获取到事件发生时的事件对象 -->

    <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>