帮我写一个vue的前端样例
时间: 2023-08-04 18:16:10 浏览: 47
好的,这里是一个简单的 Vue.js 前端样例,其中包含了一个计数器组件和一个按钮组件,点击按钮组件可以改变计数器组件的值:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<button @click="increment">Increment</button>
<p>Count: {{ count }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment: function() {
this.count++;
}
}
});
</script>
</body>
</html>
```
这个样例中定义了一个 Vue 实例,绑定到了 `#app` 元素上。其中,`data` 属性定义了组件的数据,`methods` 属性定义了组件的方法。
点击按钮时,`increment` 方法会被调用,它会将计数器的值 `count` 加 1。
在 HTML 中,使用 `{{ count }}` 来显示 `count` 的值。