写一个vue的demo
时间: 2024-05-09 17:20:14 浏览: 8
这里是一个简单的Vue.js的demo,展示了如何使用Vue.js的基本语法和指令:
HTML部分:
```html
<div id="app">
<h1>{{ message }}</h1>
<input type="text" v-model="inputValue">
<button v-on:click="addTodo">Add Todo</button>
<ul>
<li v-for="todo in todos">{{ todo }}</li>
</ul>
</div>
```
JavaScript部分:
```javascript
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
inputValue: '',
todos: []
},
methods: {
addTodo: function() {
if (this.inputValue) {
this.todos.push(this.inputValue);
this.inputValue = '';
}
}
}
});
```
这个demo展示了一个简单的todo list,用户可以通过输入框添加todo,同时展示已经添加的todo列表。其中,`{{ message }}`是Vue.js的插值语法,`v-model`指令可以实现双向绑定,`v-on:click`指令可以绑定事件,`v-for`指令可以循环渲染列表。在JavaScript部分,我们定义了Vue实例的`el`、`data`和`methods`属性,用来管理视图的渲染和数据的处理。