2、Mpvue创建页面、绑定事件、循环数据等

一、创建页面

• 在pages文件下创建新文件夹user，user文件内创建如下三个文件
  user页面
• 在index.vue文件内写入如下内容

<template>
  <div>{{msg}}</div>
</template>
<script>
// 创建页面的时候必须暴露
export default {
  data() {
    return {
      msg:'我是一个用户组件'
    };
  }
};
</script>

• 在main.js文件内写入如下内容

import Vue from 'vue'
import App from './index'

const app = new Vue(App)
app.$mount()

• 在main.json文件内写入如下内容

{
    "navigationBarTitleText": "用户页面"
  }
  

• 在app.json文件内配置新页面
  配置页面
• 在index文件夹的index.vue页面写入如下内容

<button @click="goUser()">跳转到用户界面</button>
// 方法
goUser() {
      const url = "../user/main";
      mpvue.navigateTo({ url });
    }

• 页面跳转效果

  
  用户页面

二、绑定事件

• 在index.vue页面给按钮绑定事件

 <button @click="run()">触发事件</button>

// 方法
methods:{
    run(){
      console.log('执行成功')
    }
  }

• 执行效果

  
  执行成功

三、循环数据

• 在data里面定义空数组

data() {
    return {
      list: []
    };
  }

• 在生命周期函数created里面循环数据

created() {
    for (var i = 0; i < 10; i++) {
      this.list.push("我是老" + i);
    }
  }

• 渲染到页面

<ul>
      <li v-for="(item,index) in list" :key="index">{{item}}</li>
    </ul>

• 渲染效果

  
  循环数组

四、页面路由跳转

// 小程序的Api
const url = "../user/main";
mpvue.navigateTo({ url });

好了，今天的分享就到这里了！
愿你三冬暖，愿你春不寒；愿你天黑有灯，下雨有伞。

小晴天