写一个vue的demo
时间: 2024-05-02 09:21:20 浏览: 17
很抱歉,我是一个语言模型,无法生成实际的Vue代码。但是,我可以提供一个简单的Vue demo供您参考:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Vue Demo</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
```
这个Vue demo展示了一个简单的双向绑定。当您在输入框中输入内容时,页面中的标题也会跟着改变。这是Vue的一个非常基本的功能,但也是Vue最强大的地方之一。
相关问题
使用websocket+vue写一个小demo
好的,我可以为你提供一个使用 WebSocket 和 Vue 实现的简单示例。
首先,你需要安装 `vue-socket.io` 包,它可以让你在 Vue 中方便地使用 WebSocket:
```
npm install vue-socket.io
```
然后,在你的 Vue 组件中引入 `vue-socket.io`:
```
import VueSocketIO from 'vue-socket.io'
export default {
...
components: {
...
VueSocketIO,
},
...
}
```
接着,你可以在组件的 `mounted()` 钩子函数中创建一个 WebSocket 连接:
```
mounted() {
this.$socket = io('ws://localhost:3000')
this.$socket.on('connect', () => {
console.log('连接成功')
})
this.$socket.on('disconnect', () => {
console.log('连接断开')
})
}
```
在这里,我们使用了 `io()` 函数来连接 WebSocket 服务器,并使用 `on()` 函数监听连接和断开事件。
接下来,你可以使用 `send()` 函数向服务器发送消息,或者使用 `on()` 函数监听服务器发送的消息:
```
sendMessage() {
this.$socket.send('这是一条消息')
},
mounted() {
...
this.$socket.on('message', (message) => {
console.log('收到消息:', message)
})
...
}
```
这就是使用 WebSocket 和 Vue 实现的一个简单示例。希望这对你有帮助。
给我一个vue的demo
好的,以下是一个简单的Vue demo,它展示了如何使用Vue框架来创建一个基本的Todo List应用程序:
HTML:
```html
<div id="app">
<h1>Todo List</h1>
<input v-model="newTodo" @keyup.enter="addTodo">
<button v-on:click="addTodo">Add</button>
<ul>
<li v-for="(todo, index) in todos">
<input type="checkbox" v-model="todo.done">
<span v-bind:class="{ done: todo.done }">{{ todo.text }}</span>
<button v-on:click="removeTodo(index)">Remove</button>
</li>
</ul>
</div>
```
JavaScript:
```javascript
var app = new Vue({
el: '#app',
data: {
newTodo: '',
todos: []
},
methods: {
addTodo: function() {
if (this.newTodo.trim() !== '') {
this.todos.push({
text: this.newTodo,
done: false
});
this.newTodo = '';
}
},
removeTodo: function(index) {
this.todos.splice(index, 1);
}
}
});
```
CSS:
```css
.done {
text-decoration: line-through;
}
```
这个demo展示了如何使用Vue框架来创建一个Todo List应用程序。用户可以添加新的Todo,标记已完成的Todo,以及删除Todo。