Vue3 简单使用

引入 vue.global.js 后开始用

Demo_1

<div id="app"></div>
<script src="./vue.global.js"></script>
<script>
    const app = Vue.createApp({
        setup(propos,context) {
            return {
                msg:"hello world"
            };
        },
        template:`
            <div>{{msg}}</div>
        `
    }).mount("#app")
</script>

Demo_2

<div id="app">
    <div>{{msg1}}___{{msg2}}___{{msg3}}___{{msg4}}</div>
</div>
<script src="./vue.global.js"></script>
<script>
    const app = Vue.createApp({
        setup(propos, context) {
            let msg1 = "hello world";
            let msg3 = Vue.ref("fei22");

            const {ref} = Vue;
            let msg4 = ref("fei33");
            return {
                msg1,
                msg2:"daFei",
                msg3,
                msg4
            };
        },
    }).mount("#app");
</script>

ref

<div id="app">
    <div>{{msg4}}</div>
    <button @click="updateFei">更新</button>
</div>
<script src="./vue.global.js"></script>
<script>
    const {ref} = Vue;
    const app = Vue.createApp({
        setup(propos, context) {
            // const {ref} = Vue;
            let msg4 = ref(1);

            function updateFei() {
                msg4.value = msg4.value + 1;
            }

            return {
                msg4,
                updateFei
            };
        },
    }).mount("#app");
</script>

View Code

reactive

<div id="app">
    <div>
        <p>{{msg4.name}}</p>
        <p>{{msg4.web.name3}}</p>
    </div>
    <button @click="updateFei">更新</button>
</div>
<script src="./vue.global.js"></script>
<script>
    const {reactive} = Vue;
    const app = Vue.createApp({
        setup(propos, context) {
            let msg4 = reactive({
                name:"daFei",
                age: 18,
                web:{
                    name:"HTML",
                    name2:"CSS",
                    name3:"JavaScript",
                }
            });

            function updateFei() {
                msg4.name = msg4.name + "_1";
                msg4.web.name3 = msg4.web.name3 + "_1";
            }

            return {
                msg4,
                updateFei
            };
        },
    }).mount("#app");
</script>

View Code

全局变量使用

app.config.globalProperties.$fei = "我是全局变量";
// 访问全局变量
import {onMounted, getCurrentInstance} from 'vue'
getCurrentInstance().appContext.config.globalProperties.$fei