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
  • 相关阅读:
    Chapter 4
    Chapter 3
    chapter 2
    Python编程指南 chapter 1
    BASE64 编码和解码
    生成 PDF 全攻略【2】在已有PDF上添加内容
    IDEA 和 Eclipse 使用对比
    web 前端常用组件【06】Upload 控件
    聊聊 Web 项目二维码生成的最佳姿势
    依附大系统 【数据实时获取】解决方案
  • 原文地址:https://www.cnblogs.com/dafei4/p/15061147.html
Copyright © 2011-2022 走看看