vue3基本使用

￡神魔★判官ぃ 2022-09-12 12:41 164阅读 0赞

## 示例一 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue3</title>
        <style>
            [v-cloak] { 
                display: none !important;
            }
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <div>
                { {  state1 }}
            </div>
            <div>
                { {  message }}
            </div>
            <div>
                { {  num }}
            </div>
            <input type="text" name="" id="" placeholder="输入" v-model="input1"><br/>
            <input type="text" name="" id="" placeholder="输入" v-model="input2"><br/>
            <div>
                input1:{ {  input1 }}
            </div>
            <div>
                input2:{ {  input2 }}
            </div>
            <button @click="btn1">
                点我
            </button>
        </div>
        
        <script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script>
        <script>
            const {  createApp, reactive, toRefs, ref, onMounted } = Vue;
            
            const app = createApp({ 
                setup() { 
                    var state1 = ref(123)
                    var input2 = ref(123)
                    const state = reactive({ 
                        message: 12,
                        num: 1,
                        input1: ''
                    })
                    onMounted(()=>{ 
                        console.log(2222)
                    })
                    const btn1 = () => { 
                        console.log(state1)
                        console.log(input2)
                        console.log(state)
                        state1.value++
                        state.num++
                        
                    }
                    return { 
                        ...toRefs(state),
                        state1,
                        input2,
                        btn1
                    }
                }
            });
            app.mount("#app");
        </script>
    </body>
    </html>

## 示例二： ##

<template>
      <div id="app">
        <p>姓名：{ { name}}</p>
        <p>
          <button @click="changeAge(-1)">-</button>
          年龄：{ { age}}
          <button @click="changeAge(1)">+</button>
        </p>
        <p>
          出生年份：
          <button @click="changeYear(-1)">-</button>
          { { year}}
          <button @click="changeYear(1)">+</button>
        </p>
      </div>
    </template>
    
    <script>
    import {  ref, computed, reactive,toRefs } from "vue";
    export default { 
      name: "app",
      data() { 
        return { 
          name: "xiaosan",
        };
      },
      setup() { 
        const data = reactive({  // 建立一个响应式对象
          name: "小四",
          age: 18,
          year: computed({ 
            get: () => { 
              return 2020 - data.age;
            },
            set: (val) => { 
              data.age = 2020 - val;
            },
          }),
        });
        function changeAge(val) { 
          data.age += val; //想改变值或获取值 必须.value
        }
        function changeYear(val) { 
          data.year = data.year + val;
        }
        return { 
          //必须返回 模板中才能使用
          ...toRefs(data),//讲响应式的对象变为普通对象 在家。。。结构，在模板中就可以直接使用属性，不用data.name
          changeAge,
          changeYear,
        };
      },
    };
    </script>

原贴地址：  
[在单独的html里使用vue3][html_vue3]  
[vue3-reactive(响应式对象)和toRefs][vue3-reactive_toRefs]

[html_vue3]: https://blog.csdn.net/LiuPangZi6/article/details/115461797
[vue3-reactive_toRefs]: https://www.cnblogs.com/lxz-blogs/p/13595094.html