vue 一个简单实例化Vue.js 是一个流行的前端框架,如何创建一个基本的计数器应用

当然可以!Vue.js 是一个流行的前端框架,用于构建用户界面。下面是一个简单的 Vue.js 例子,演示了如何创建一个基本的计数器应用。

首先,确保你已经在项目中引入了 Vue.js。你可以通过 CDN 引入 Vue.js,或者在项目中安装它。

然后,创建一个 HTML 文件,并在其中编写以下代码:

html 复制

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Vue 简单例子</title>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>

<div id="app">

<p>计数器: {{ counter }}</p>

<button @click="increment">增加</button>

<button @click="decrement">减少</button>

</div>

<script>

new Vue({

el: '#app',

data: {

counter: 0

},

methods: {

increment: function() {

this.counter++;

},

decrement: function() {

this.counter--;

}

}

});

</script>

</body>

</html>

相关推荐
zzzzzz31013 小时前
从 react-bits 看动效组件化:别把视觉效果写成一次性页面代码
javascript·react.js·开源
用户9385156350713 小时前
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
前端·javascript·react.js
滴滴答答哒14 小时前
VUE3+element-plus MultiSelect 多选下拉组件
前端·javascript·vue.js
其美杰布-富贵-李14 小时前
04 watch 与 Vue 响应式数据流
前端·javascript·vue.js
kyriewen17 小时前
我排查了一个React内存泄漏——罪魁祸首是这3个被忽略的清理函数
前端·javascript·面试
猿长大人17 小时前
C# | JSON 序列化中的多态接口处理:基于 Attribute 实现精准 $type 控制
c#·json
其美杰布-富贵-李17 小时前
03 ref、reactive 与 computed 响应式数据
前端·javascript·vue.js
用户9385156350717 小时前
useRef + Web Worker 实战:React 如何优雅地拥抱多线程
前端·javascript·react.js
嘟嘟071717 小时前
useRef + Web Worker:React 中的耗时计算不卡页面
javascript·vue.js