vue的简单综合案例
时间: 2024-10-15 12:09:26 浏览: 27
Vue.js是一个流行的JavaScript前端框架,它简化了构建用户界面的过程。一个简单的Vue综合案例通常会包括组件化、数据绑定和指令。让我们看一个基础的“计数器”示例:
1. 首先,引入Vue库并创建一个实例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/vue@latest"></script>
</head>
<body>
<div id="app">
<h1>Vue计数器:</h1>
<button v-on:click="increment">点击增加</button>
<p>{{ count }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
count: 0
},
methods: {
increment() {
this.count++;
}
}
});
</script>
</body>
</html>
```
在这个例子中,“data”属性定义了一个名为“count”的变量,用于存储当前值。`v-on:click`是Vue的事件绑定语法,当按钮被点击时,调用`increment`方法。
2. **组件化**:如果项目更大一些,可以将这个计数器封装成一个独立的组件,提高复用性和管理复杂度:
```html
<template>
<div>
<button @click="increment">点击增加</button>
<p>{{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return { count: 0 };
},
methods: {
increment() {
this.count++;
}
}
};
</script>
```
然后在主应用里导入并使用这个组件。
阅读全文