The way to create a vue component is defferent between vue2 and vue3

Based on vue 2.x

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://cdn.bootcss.com/vue/2.5.20/vue.min.js"> 
    </script>
    <div id="app">
       <input type="text" id="input2" placeholder="I am vue element" v-model="message" @input="log">
    </div>
    <script type="text/javascript">
       new Vue({
        el:"#app",
        data:{
            message:"Please input here.."
        },
        methods:{
            log:function(){
                console.log(this.message);
            }
        },
        // cancel comment template tag, input tag will not show.
        // tempalte: `<h1>This will replate #app tag</h1>`
        created(){
            console.log("--vue load succeed！--");
            alert("Today is a good day.")
        }
    }) 
    </script>
</body>
</html>

Based on vue 3.x

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://unpkg.com/vue@next"></script>
    <div id="app">The content would not show.</div>
    <script>
        const { createApp } = Vue;
        const App = {
        data() {
            return {
                name: "Gregg",
            };
        },
        template: `<h1>Hello {{ name }}</h1>`,
        };
        createApp(App).mount("#app");
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3.0.2"></script>
  </head>

  <body>
    <div id="haha"></div>
  </body>

  <script>
    const { createApp, h, ref } = Vue
    // vant  源码中是直接用的setup返回的jsx,我这里用的是vue的cdn用法,没有环境支持
    const app = createApp({
      setup(props) {
        const name = ref('小米')
        return { name }
      },
      render() {
        return h('div', { style: { fontSize: '24px' } }, '你好' + this.name)
      }
    })
    // 提供一个父元素
    const parent = document.getElementById("haha")
    // const parent = document.createElement('div')
    //mount方法不再像vue2一样支持未挂载的实例，必须得挂载，即必须得给参数
    const instance = app.mount(parent)
    console.log(instance)
    console.log(instance.$el)
  </script>
</html>

Vue 3.0 demo

<!DOCTYPE html>
<html>
    <head>
        <script src="D:\save\code-rep\vuejs\vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Root content</h1>
            <ckt>child content</ckt>
        </div>

        <script>

            const APP = {
                data() {
                    return {
                        name: "tcl"
                    }
                },
            }

            const app = Vue.createApp(APP)
            app.component('ckt',{
                    data() {

                    },
                    template:`<h1>Today is a good day.</h1><slot></slot>`
                }
            )
            app.mount("#app")

        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <script src="D:\save\code-rep\vuejs\vue.global.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>Root content</h1>
            <cpn1></cpn1>
        </div>

        <script>
            const cpn1 = {
                template: `<h1>cpn1 content.</h1>`
            }

            const APP = {
                components: {
                    "cpn1": cpn1
                },
                data() {
                    return {
                        name: "tcl"
                    }
                },
            }
            const app = Vue.createApp(APP).mount("#app")
        </script>
    </body>
</html>

Blog

A single page with vue

ChuangWANG

Based on vue 2.x

Based on vue 3.x

Vue 3.0 demo

Join Our Newsletter. No Spam, Only the good stuff.

Related