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
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