書名： Vue.js 2 Web Development Projects
作者名： Guillaume Chau
本章字?jǐn)?shù)： 158字
更新時(shí)間： 2021-07-02 22:34:25

Setting up the project

For this project, we will have a few files ready to get us started:

First, download simple-notebook project files and extract them in the same folder. Open the index.html file and add a p element with the notebook ID and a nested section element with the main class. You should have the following content inside the file:

      <html>
      <head>
        <title>Notebook</title>
        <!-- Icons & Stylesheets -->
        <link href="https://fonts.googleapis.com/icon?                   
        family=Material+Icons" rel="stylesheet">
        <link rel="stylesheet" href="style.css" />
      </head>
      <body>
        <!-- Include the library in the page -->
        <script src="https://unpkg.com/vue/dist/vue.js"></script>

        <!-- Notebook app -->
        <p id="notebook">

          <!-- Main pane -->
          <section class="main">

          </section>

        </p>

        <!-- Some JavaScript -->
        <script src="script.js"></script>
      </body>
      </html>

Now, open the script.js file to add some JavaScript. Just like you did in Chapter 1, Getting Started with Vue, create a Vue instance mounted on the #notebook element with a Vue constructor:

      // New VueJS instance
      new Vue({
        // CSS selector of the root DOM element
        el: '#notebook',
      })

Then, add a data property called content that will hold the content of your note:

      new Vue({
        el: '#notebook',

        // Some data
        data () {
          return {
            content: 'This is a note.',
          }
        },
      })

Now you are ready to create your first real Vue app.

官术网_书友最值得收藏!

Vue.js 2 Web Development Projects

Setting up the project