首页生成一个简单的vue.js项目代码

生成一个简单的vue.js项目代码

时间: 2023-08-01 11:10:24 浏览: 79

好的，以下是一个简单的Vue.js项目代码示例： index.html： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js Example</title> </head> <body> <div id="app"> <h1>{{ message }}</h1> <button v-on:click="reverseMessage">Reverse Message</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` app.js： ``` var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) ``` 这个简单的Vue.js应用程序包括一个页面，其中有一个标题和一个按钮。当单击按钮时，使用JavaScript的split()，reverse()和join()方法反转标题中的文本。希望这个示例可以对您有所帮助！

阅读全文