setup继续悟

最新推荐文章于 2024-04-03 15:37:56 发布

hamimelon2020

最新推荐文章于 2024-04-03 15:37:56 发布

阅读量79

点赞数

分类专栏： vue JavaScript 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123211665

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

"这篇博客展示了如何利用Vue.js的响应式数据绑定和方法定义来创建一个简单的应用。通过在`<div id="app">`中定义一个按钮，点击按钮会触发`increment()`函数，该函数将`state.count`的值加一，实现在界面上动态更新计数器的效果。"

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<div id="app">
  <button @click="increment"> {{ state.count }}</button>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  const App = {
    //定义一个变量，名叫App，一直括到底
    //变量里开始setup()函数入口，开始变量App里的内容
    //定义变量state，一个响应式的变量，reactive()函数里套一个对象。对象的变量是count。
    //建立一个函数，名称为increment()，内容是0基础上自加，即state.count++
  
  setup() {
  const state = Vue.reactive({count:0});
  function increment() {
    state.count++;
  }

  //返回变量，return
  return {
    state,
    increment
  }
  }
  };

  //再定义app，创造一个App
  //再挂载
  const app = Vue.createApp(App);
  app.mount('#app')
</script>