首页给我写一段VUE代码

给我写一段VUE代码

时间: 2024-09-20 11:10:58 浏览: 43

当然可以，下面是一个简单的Vue.js组件示例，它展示了如何创建一个响应式的数据绑定和模板结构： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> <input v-model="message" placeholder="请输入消息"> </div> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }); </script> </body> </html> ``` 在这个例子中： - `<div id="app">` 是Vue应用的主要挂载点。 - `{{ message }}` 是模板字符串，Vue会自动将数据`message`的值插入到HTML中，这就是数据绑定。 - `<input v-model="message">` 中，`v-model`是双向数据绑定指令，输入框的内容变化会实时更新`message`的数据。

阅读全文