Vue3简单使用

【一】组合式api体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style></style>
</head>
<body>
<div id="app">

    <p>{{count}}</p>
    <br>
    <button @click="handleAdd">点我加1</button>


</div>
</body>
<script>

    let app=Vue.createApp({
        setup() {
            let count=Vue.ref(0)
            let handleAdd=()=>{
                count.value++
            }
            return {
                count,
                handleAdd
            }
        },
    })
    app.mount("#app")

</script>
</html>

【二】 API风格

  • 选项式API(配置项api)-->之前vue2中用的用法
    Vue.createApp({
        data:function(){},
        methods:{}，
        watch：{}
        # 同一个功能的代码，分到不同地方，代码越多，越乱
    })
  • 组合式API
Vue.createApp({
    setup() {
        # 所有代码写在这里面
        # 变量，函数，监听属性，生命周期
        # 同一个功能的代码，会在一起
        }

    })
  • 推荐：组合式api:
    • 当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件

【三】拥抱TypeScript

  • 之前写vue2用js
  • vue3-->ts-->微软推出的--》最终要被编译成js才能运行在浏览器中
    • 使用ts写，可以避免很大错误
    • ts是js的超集---》ts完全兼容js
  • 我们用的是vue3+js+vue-router+pinia+elementui-plus
  • 变化
    • 新的生命周期钩子
    • data 选项应始终被声明为一个函数
    • 移除keyCode支持作为 v-on 的修饰符
posted @ 2024-05-08 18:45  -半城烟雨  阅读(13)  评论(0)    收藏  举报