给出一个vue完整模板
时间: 2023-10-29 11:15:39 浏览: 32
以下是一个基本的 Vue.js 完整模板:
```
<template>
<div>
<h1>{{ message }}</h1>
<button @click="incrementCounter">Click me</button>
</div>
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
message: 'Hello, Vue!',
counter: 0
}
},
methods: {
incrementCounter() {
this.counter++;
}
}
}
</script>
<style>
h1 {
color: #42b983;
}
button {
background-color: #42b983;
color: white;
border: none;
padding: 10px;
border-radius: 5px;
cursor: pointer;
}
</style>
```
在这个模板中,我们定义了一个名为 `MyComponent` 的组件,它包含了一个数据项 `message` 和一个计数器 `counter`,以及一个增加计数器的方法 `incrementCounter`。我们还定义了一个样式表,为标题和按钮添加了样式。
当用户点击按钮时,`incrementCounter` 方法会被调用,计数器会自增。这个变化会自动地反映到模板中的 `{{ counter }}` 表达式上。
你可以根据自己的需要进行修改和扩展,这只是一个基本的模板。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)