首页创建规范网站目录，搭建Vue应用环境，创建testB.html网页，定义挂载dom，引入vue库文件，实例化vue对象

创建规范网站目录，搭建Vue应用环境，创建testB.html网页，定义挂载dom，引入vue库文件，实例化vue对象

时间: 2023-08-16 17:07:41 浏览: 106

创建规范网站目录： ``` - your-project-folder/ - css/ - style.css - js/ - vue.js - index.html ``` 搭建Vue应用环境： 1. 在index.html中添加以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My Vue App</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="app"></div> <script src="js/vue.js"></script> <script src="js/app.js"></script> </body> </html> ``` 2. 在js文件夹中创建app.js文件。创建testB.html网页：在your-project-folder中创建testB.html文件，并在其中添加以下代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test B</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="app"></div> <script src="js/vue.js"></script> <script src="js/testB.js"></script> </body> </html> ``` 定义挂载dom：在testB.html中的div元素中添加id属性，该id值为"app"，用于实例化vue对象时挂载该元素。引入vue库文件：在testB.html中引入vue.js库文件。实例化vue对象：在js文件夹中创建testB.js文件，并在其中添加以下代码： ``` new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) ``` 在上述代码中，我们实例化了一个Vue对象，并将其挂载到id为"app"的div元素上。该Vue对象包含一个data属性，其中包含一个名为message的属性，其初始值为'Hello Vue!'。

阅读全文