Vue3.0简单响应式

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

 https://v3.cn.vuejs.org/api/

<!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://unpkg.com/vue@next浏览器打开中的代码复制出来创建个vue.js本地直接引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        //0、创建实例的全局配置对象
        const HelloVue = {
            data(){//定义数据
                return {
                    message:'你好！'
                }
            }
        };
        // 1、创建Vue的实例对象
        const app = Vue.createApp(HelloVue).mount('#app');
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <div>{{colleges}}</div>
        <p>--------------------</p>
        <ul>
            <li>{{colleges[0]}}</li>
            <li>{{colleges[1]}}</li>
            <li>{{colleges[2]}}</li>
        </ul>
        <p>--------------------</p>
        <ul>
            <li v-for="college in colleges">{{college}}</li>
        </ul>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        //0、创建实例的全局配置对象
        const listApp = {
            data(){//定义数据
                return {
                    colleges: ['web','java','vue']
                }
            }
        };
        // 1、创建Vue的实例对象
        const app = Vue.createApp(listApp).mount('#app');
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>{{message}}</h1>
        <p>--------------------</p>
        <button v-on:click="message='hello btn1!'">btn1</button>
        <button v-on:click="message='hello btn2!'">btn2</button>
        <button v-on:click="btn3">btn3</button>
        <button v-on:click="btn4">btn4</button>
        <button @click="btn5">btn5</button>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    message:'你好！'
                }
            },
            methods:{
                btn3(){
                    this.message="hello btn3";
                },
                btn4(){
                    this.message="hello btn4";
                },
                btn5(){
                    this.message="hello btn5";
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

以上是 Vue3.0简单响应式 的全部内容， 来源链接： utcz.com/z/380514.html

回到顶部