Vue3.0简单响应式

时间:2021-08-14
本文章向大家介绍Vue3.0简单响应式，主要包括Vue3.0简单响应式使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>
            hello Vue.js
        </title>
    </head>
    <body>
        <!--View-->
        <div id="app">
            <button @click="increment">
                count值：{{state.count}}
            </button>
        </div>

        <!--引入Vue.js-->
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            const App={
                setup(){
                    //为目标对象创建一个响应式对象
                    const state = Vue.reactive({count: 0});
                    function increment(){
                        state.count++;
                    }
                    return {
                        state,
                        increment
                    }
                }
            };

            //创建应用程序实例，该实例提供应用程序上下文
            //应用程序实例装载的整个组件树将共享相同的上下文
            const app = Vue.createApp(App);
            app.mount('#app');
        </script>
    </body>
</html>

原文地址：https://www.cnblogs.com/mingforyou/p/15140616.html

随机文章
Javascript知识点必读
最近更新