(摘) 直接在html中使用vue3

声明:内容源自网络,版权归原作者所有。若有侵权请在网页聊天中联系我

啥脚手架,啥npm,还是太复杂,针对只想在前端用vue的来说。

基础H5

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页</title>
</head>
<body>
</body>
</html>

引入vue3

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

压缩过的js

https://unpkg.com/vue@3/dist/vue.global.prod.js

有些引用有所不同,效果一样。

    <script>
        const app = Vue.createApp({
            data() {
                return {
                        message: "HelloWorld!"
                }
            },
            setup() {

            }
        });
        app.mount("#app");
    </script>

引用UI框架

这里用 element-plus

...
<!-- 全局样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
<!-- UI -->
<script src="https://unpkg.com/element-plus"></script>
...

使用

...
<div id="app">
    <el-input v-model="value"  clearable />
</div>
...
 
<script>
 const { createApp, ref } = Vue
 const APP = createApp({
    setup(){
      const value = ref(null)
      return {
          value
      }
    }
  })
 APP.use(ElementPlus).mount('#app')
</script>

交互

...
<div id="app">
    <el-button  type="primary" @click="handle">提示</el-button>
</div>
...
 
<script>
 const { createApp, ref } = Vue
 const APP = createApp({
    setup(){
      const handle = () => {
          ElementPlus.ElMessage({
             message: '点击!',
             type: 'success',
          })
      }
      return {
          handle
      }
    }
  })
 APP.use(ElementPlus).mount('#app')
</script>
 

组件

...
<script src="//unpkg.com/@element-plus/icons-vue"></script>
 
...
<div id="app">
    <el-button icon="edit"  type="primary" @click="handle">提示</el-button>
</div>
...
 
<script>
 const { createApp, ref } = Vue
 const APP = createApp({
    setup(){
      const handle = () => {
          ElementPlus.ElMessage({
             message: '点击!',
             type: 'success',
          })
      }
      return {
          handle
      }
    }
  })
  
 APP.component('edit',ElementPlusIconsVue.Edit)
 APP.use(ElementPlus).mount('#app')
</script>
 

发送请求

...
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
...
 
<script>
 ...
  axios.post(url,options }
 ...
</script>
 

详细一点

                    axios.get("/")
                        .then(function(response){
                            console.log(response.data);
                        })
                        .catch(function(error){
                            console.log(error);
                        });
                    axios.post("/",{
                        name:"ease",
                        email:"ease@scwy.net"
                        })
                        .then(function(response){
                            console.log(response.data);
                        })
                        .catch(function(error){
                            console.log(error);
                        });

相关文章