马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有账号?立即注册
x
1、vue3
快速上手 | Vue.js
- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
- <div id="app">{{ message }}</div>
- <script>
- const { createApp, ref } = Vue
- createApp({
- setup() {
- const message = ref('Hello vue!')
- return {
- message
- }
- }
- }).mount('#app')
- </script>
复制代码 2、ant-design-vue 4.2.3
- <script src="https://unpkg.com/vue@3.4.27/dist/vue.global.prod.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>
- <link type="text/css" href="https://unpkg.com/ant-design-vue@4.2.3/dist/reset.css" media="screen" rel="stylesheet">
- <script src="https://unpkg.com/ant-design-vue@4.2.3/dist/antd.min.js"></script>
- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
复制代码- import { DatePicker } from 'ant-design-vue';
- app.use(DatePicker);
复制代码 3、template
- <body class="bg">
- <div id="app">
- </div>
- </body>
复制代码- <script>
- Object.assign(window, Vue);
- const vue3App = {
- setup() {
- const msg = ref(''); //信息
- onMounted(() => {
- console.log(window.location.search);
- });
- function test() {
- // 发送 POST 请求
- axios({
- method: 'post',
- url: '/url换成自己的',
- data: {
- code: '0',
- message: 'success',
- type: 'opt',
- result: 'success',
- uid: uid.value,
- msgid: msgid.value,
- }
- }).then(function (response) {
- console.log(response);
- msg.value = response.data.message;
- })
- .catch(function (error) {
- console.log(error);
- });
- }
- // 返回值会暴露给模板和其他的选项式 API 钩子
- return {
- msg,
- btnClick() {
- //console.log(msg.value);
- test();
- },
- }
- },
- }
- //初始化
- const app = createApp(vue3App);
- app.use(antd);
- app.mount("#app");
- </script>
- <style>
- .bg {
- background-color: rgb(213, 213, 213);
- }
- .margintop {
- margin-top: 300px;
- }
- .marginbottom {
- margin-bottom: 30px;
- }
- </style>
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |