- Vue.js 2 Web Development Projects
- Guillaume Chau
- 158字
- 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.
推薦閱讀
- 微服務設計(第2版)
- 測試驅動開發:入門、實戰與進階
- C語言程序設計(第2 版)
- 大學計算機基礎實驗教程
- JavaScript+jQuery網頁特效設計任務驅動教程(第2版)
- PyTorch Artificial Intelligence Fundamentals
- HTML5 Mobile Development Cookbook
- 神經網絡編程實戰:Java語言實現(原書第2版)
- Windows Server 2012 Unified Remote Access Planning and Deployment
- Eclipse Plug-in Development:Beginner's Guide(Second Edition)
- 從學徒到高手:汽車電路識圖、故障檢測與維修技能全圖解
- Python完全自學教程
- HTML 5與CSS 3權威指南(第3版·上冊)
- Solutions Architect's Handbook
- Angular Design Patterns