如何显示来自Firebase的-vue应用笔记数据？

Question

我尝试使用vue.js和firebase构建一个记事应用程序。事情是我是新手，保存笔记后我不知道如何显示笔记。我看了一些教程，但是没有用。另外，当我导入“从'vuefire'导入VueFire”和“ Vue.use（VueFire）”时，我的代码不起作用。这是我的app.vue

<template>
  <div id="app">
    <button v-on:click="openNote" v-show="!newNote.isOpening">Add note</button>
    <div class="noteBox" v-show="newNote.isOpening">
      <label >title:</label>
      <input type="text" v-model="newNote.titleText" />
      <br>
      <label >content:</label>
      <textarea type="text" v-model="newNote.contentText" />
      <br>
      <button  v-on:click="saveNote()">Save</button>
    </div>
    <div>
      <ul>
        <li v-for="note of notes" v-bind:key="note['.key']">
          {{note.newNote.titleNote}}
          {{note.newNote.contentNote}}  
        </li>
      </ul>
    </div>  
  </div>
</template>
    
<script>
  import {notesRef} from './firebase' 
  import { database } from 'firebase'
    
  export default {
    name: 'app',
    data () {
      return {
        newNote:{
          titleText:'',
          contentText:'',
          isOpening:false,
        },
        notes:[]
      }
    },
    firebase:{
      notes:notesRef
    },   
    methods: {
      openNote() {
        this.newNote.isOpening=true;
      },
      saveNote() {
        notesRef.push({titleNote:this.newNote.titleText, contentNote:this.newNote.contentText, edit:false})
      },
    }, 
  }