zoukankan      html  css  js  c++  java
  • Vue3 简单使用

    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
  • 相关阅读:
    C#的几种下载文件方法
    分享下常用的网站
    C#操作XML文件
    MySQL截取字符串函数方法
    NLog使用方法
    弹出div提示框,背景变黑
    有关URL编码问题
    javascript 压缩工具
    [C#][Windows API] 常用Windows原生方法整理(Windows API) (不定期更新: 06/16)【转】
    An Introduction to IDS
  • 原文地址:https://www.cnblogs.com/dafei4/p/15061147.html
Copyright © 2011-2022 走看看