在html5中使用Vue3,并且使用组件形式
有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:
1)引入Vue,并创建Vue实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html使用vue</title> </head> <body> <div id="app" v-cloak> <h1>{{ message }}</h1> </div> <script src="vue3.js"></script> <script> const app = Vue.createApp({ data() { return { message: "hello world" } }, }); app.mount("#app"); </script> </body> </html>
如果我们想使用UI框架:
1、引入antd-vue的UI框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引入antd-vue</title> <link rel="stylesheet" href="css/antd@4.0.3.css"> </head> <body> <div id="app" v-cloak> <a-button type="primary">{{ message }}</a-button> </div> <script src="vue.js"></script> <script src="https://unpkg.com/dayjs/dayjs.min.js"></script> <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script> <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script> <script src="js/antd.min@4.0.3.js"></script> <script> const app = Vue.createApp({ data() { return { message: "hello world" } }, }); app.use(antd); app.mount("#app"); </script> </body> </html>
2、引入element-plus的UI框架
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引入elementPlus</title> <link rel="stylesheet" href="css/element@2.3.14.css"> </head> <body> <div id="app"> <el-button>{{ message }}</el-button> </div> <script src="vue3.js"></script> <script src="js/element@2.3.14.js"></script> <script> const app = Vue.createApp({ data() { return { message: "按钮" } } }); app.use(ElementPlus); app.mount("#app"); </script> </body> </html>
2)、重点来了,html引入其他Component
首先我们先一个vue文件:
<template> <h2>组件A</h2> </template> <script> module.exports = { } </script> <style scoped> </style>
这里我们命名成text.vue。注意这边是module.exports
,而不是default exports
在html
中的话,我们需要引入https://unpkg.com/http-vue-loader
,具体如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>html使用vue</title> </head> <body> <div id="app" v-cloak> <h1>{{ message }}</h1> <com-a></com-a> </div> <script src="vue3.js"></script> <script src="https://unpkg.com/http-vue-loader"></script> <script> const { createApp,defineAsyncComponent } = Vue const app = Vue.createApp({ data() { return { message: "引入组件" } }, }); app.component('com-a', defineAsyncComponent(httpVueLoader('./test.vue'))); app.mount("#app"); </script> </body> </html>
在这里我们一定要注意:如果页面出现报错:
httpVueLoader.js提示:Unhandled error during execution of async component loader at <AsyncComponentWrapper>
或者是vue报错:Invalid or unexpected token at Function (<anonymous>)
这里我们需要在<div id="app" v-cloak></div>,加上这个就不会出现上面的报错了,作用是等待页面加载完成后在执行。
如何需要向子组件进行传值:
子组件通过props接收数据,参数用小写
// 注意:httpVueLoader.js使用props传递参数时,需要参数名称全部小写(大小写混合情况,只能通过this.$attrs获取到属性值,但是不能建立props)
<template> <h2>{{ abc}}</h2> </template> <script> module.exports = { props: { abc: String, }, data: function () { return { }; }, created: function () {}, mounted: function () {}, methods: {}, } </script> <style scoped> </style>
父页面中只要在组件上添加传入参数即可:
<com-a :abc="abc"></com-a>
后续其他操作后续慢慢更新...........