Directly introduce the CDN of Vue.js in html to realize the combined API of Vue3

The combined API of Vue3 uses the setup function to write component logic. The setup function is an option API used in Vue3 to replace Vue2 (such as data, methods code> etc.). In the setup function, you can access some special responsive objects and return some data, methods, etc. that can be used in the template.

The following is an example list of articles showing how to write components in Vue3 using the setup function of the Composition API:

Write all the code in one html file

<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 CDN Example - Composition API</title>
    <meta charset="utf-8">
    <script src="vue.global.prod.min.js"></script>
    <script src="vue-router.global.min.js"></script>
</head>
<body>

<div id="app">
    <router-view></router-view>
</div>

    <script type="module">
        const { createApp, ref } = Vue;
        const { createRouter, createWebHashHistory } = VueRouter;
        
        // sample data
        const artcles = [
            { id: 100, title: 'An all-or-nothing game is the truth', content: 'The movie "An All-or-Nothing" was officially released on August 8, and the current box office has exceeded 800 million. Since the film was screened, word-of-mouth and box office have been soaring. It has broken the highest single-day box office in the summer season, the single-day box office in Chinese film history, and the box office record in Chinese film history. The ending part of the film made many viewers think that there will be a sequel. In an interview yesterday, the director made it clear that there would be no sequel, "There is currently no plan for a sequel. The main point of that scene is that Internet fraud is difficult to eradicate and emerges endlessly. We still need to improve our own immunity."' },
            { id: 101, title: '"The First Part of Fengshen" was released: Netizens were brainwashed by Fei Xiang's business Yin language', content: '"The First Part of Fengshen" is mainly about Shang Wang Yinshou and the fox demon Daji colluded and was tyrannical and innocent, causing divine punishment. Jiang Ziya, a Kunlun fairy, went down the mountain to find the Lord of the World and save the common people. Ji Fa, the son of Xibohou, gradually discovered Yin Shou's true colors, and turned back to Chaoge.' },
            { id: 102, title: '"The Missing Her" broke 3.5 billion at the box office and ranked 12th in China's box office list', content: '"The Missing Her" is produced by Chen Sicheng, starring Zhu Yilong, Ni Ni, Wen Yongshan and other suspenseful crime film. The film is adapted from the former Soviet film "A Trap for the Bachelor". It tells the story of He Fei's wife Li Muzi who disappeared mysteriously during the wedding anniversary trip. Tell a shocking story. ' }
        ];
    
        // Component: list of articles
        const ArtcleList = {
            template:`
                <div>
                    <h1>List of articles</h1>
                    <ul>
                        <li v-for="artcle in artcles" :key="artcle.id">
                            <router-link :to="'/artcle/' + artcle.id">{<!-- -->{ artcle.title }}</router-link>
                        </li>
                    </ul>
                </div>
            `,
            setup() {
                return {
                    artcles
                };
            }
        };
    
        // Component: article details
        const ArtcleDetail = {
            template:`
                <div>
                    <h1>{<!-- -->{ artcle.title }}</h1>
                    <p>{<!-- -->{ artcle. content }}</p>
                </div>
            `,
            setup() {
                const route = VueRouter. useRoute();
                const artcleId = route.params.id;
                const artcle = ref(artcles. find(artcle => artcle. id === Number(artcleId)));
    
                return {
                    artcle
                };
            }
        };
    
        // create route
        const router = createRouter({
            history: createWebHashHistory(),
            routes: [
                { path: '/', component: ArtcleList },
                { path: '/artcle/:id', component: ArtcleDetail }
            ]
        });
        
        // Create a Vue application
        const app = createApp({});
        app. use(router);
        
        // Mount the application
        app.mount('#app');
    </script>
    
</body>
</html>

You can also extract js separately

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Vue 3 CDN Example - Composition API</title>
    <meta charset="utf-8">
    <script src="vue.global.prod.min.js"></script>
    <script src="vue-router.global.min.js"></script>
</head>
<body>

<div id="app">
    <router-view></router-view>
</div>

<script type="module" src="app.js"></script>

</body>
</html>

app.js

const { createApp, ref } = Vue;
const { createRouter, createWebHashHistory } = VueRouter;

// sample data
const artcles = [
    { id: 100, title: 'An all-or-nothing game is the truth', content: 'The movie "An All-or-Nothing" was officially released on August 8, and the current box office has exceeded 800 million. Since the film was screened, word-of-mouth and box office have been soaring. It has broken the highest single-day box office in the summer season, the single-day box office in Chinese film history, and the box office record in Chinese film history. The ending part of the film made many viewers think that there will be a sequel. In an interview yesterday, the director made it clear that there would be no sequel, "There is currently no plan for a sequel. The main point of that scene is that Internet fraud is difficult to eradicate and emerges endlessly. We still need to improve our own immunity."' },
    { id: 101, title: '"The First Part of Fengshen" was released: Netizens were brainwashed by Fei Xiang's business Yin language', content: '"The First Part of Fengshen" is mainly about Shang Wang Yinshou and the fox demon Daji colluded and was tyrannical and innocent, causing divine punishment. Jiang Ziya, a Kunlun fairy, went down the mountain to find the Lord of the World and save the common people. Ji Fa, the son of Xibohou, gradually discovered Yin Shou's true colors, and turned back to Chaoge.' },
    { id: 102, title: '"The Missing Her" broke 3.5 billion at the box office and ranked 12th in China's box office list', content: '"The Missing Her" is produced by Chen Sicheng, starring Zhu Yilong, Ni Ni, Wen Yongshan and other suspenseful crime film. The film is adapted from the former Soviet film "A Trap for the Bachelor". It tells the story of He Fei's wife Li Muzi who disappeared mysteriously during the wedding anniversary trip. Tell a shocking story. ' },
    { id: 103, title: 'The movie "In the Octagonal Cage" was released for 29 days, and the box office exceeded 2.1 billion', content: 'The Beijing News on August 2, the movie "In the Octagonal Cage" was released for 29 days, and the cumulative The box office exceeded 2.1 billion. The film is directed by Wang Baoqiang, starring Wang Baoqiang, Chen Yongsheng, Shi Pengyuan, starring Wang Xun and Zhang Yitong. It was officially released on July 6. ' },
    { id: 104, title: 'Fast and Furious 10 will be launched on the domestic video platform on August 18', content: 'According to previous reports from IT House, "Fast and Furious 10" will be released in mainland theaters in May this year , two days ahead of North America. Currently, the Douban score of the film is 6.2. The "Fast and Furious" series of films was directed by Rob Cohen and others, and 9 films were released between 2001 and 2021. "Fast and Furious 9" will be released in mainland China on May 21, 2021, and in North America on June 25, 2021. ' }
];

// Component: list of articles
const ArtcleList = {
    template:`
        <div>
            <h1>List of articles</h1>
            <ul>
                <li v-for="artcle in artcles" :key="artcle.id">
                    <router-link :to="'/artcle/' + artcle.id">{<!-- -->{ artcle.title }}</router-link>
                </li>
            </ul>
        </div>
    `,
    setup() {
        return {
            artcles
        };
    }
};

// Component: article details
const ArtcleDetail = {
    template:`
        <div>
            <h1>{<!-- -->{artcle.title }}</h1>
            <p>{<!-- -->{ artcle. content }}</p>
        </div>
    `,
    setup() {
        const route = VueRouter. useRoute();
        const artcleId = route.params.id;
        const artcle = ref(artcles. find(artcle => artcle. id === Number(artcleId)));

        return {
            artcle
        };
    }
};

// create route
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/', component: ArtcleList },
        { path: '/artcle/:id', component: ArtcleDetail }
    ]
});

// Create a Vue application
const app = createApp({});
app. use(router);

// Mount the application
app.mount('#app');

Structure

[External link picture transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the picture Save it and upload directly (img-QbqvxK4N-1691656932134)(/img/bVc9chD)]

Demo

http://demo.likeyunba.com/vue3-composition-api/#/

Source code download

vue.global.prod.min.js
vue-router.global.min.js
Download link: https://likeyun.lanzout.com/ibnQn14ymgud

Author

TANKING