vue3+typescript【1】

最新推荐文章于 2025-04-24 23:45:00 发布

女德班吊车尾

最新推荐文章于 2025-04-24 23:45:00 发布

阅读量789

点赞数 1

分类专栏： vue3+typescript 文章标签： typescript javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_51384850/article/details/125371890

版权

vue3+typescript 专栏收录该内容

11 篇文章

订阅专栏

VUE的四种引用方式：

CDN（内容分发网络）
通过相互连接的网络系统，利用最靠近每个用户的服务器，更快更可靠地将网络内容传输给用户
<script src="https://unpkg.com/vue@next"></script>

举个例子：

<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const Obje = {
        template:'<h2>我是object对象里面装的内容</h2>'
    }
    Vue.createApp(Obje).mount("#app")
</script>

下载VUE的js文件，手动引入
通过npm包管理工具安装使用（webpack）
直接通过Vue cLI创建项目并使用

VUE的开发体验

vue3的data不能是对象，必须是函数。

data:function() {
        return {
            
        }
    }

method函数

注意，不应该使用箭头函数来定义method函数(例如plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向组件实例，this.a 将是undefined。

this作用域问题

在全局环境下，this 始终指向全局对象（window）, 无论是否严格模式；

普通函数内部的this分两种情况，严格模式和非严格模式。
非严格模式下，this 默认指向全局对象window
而严格模式下， this为undefined

对象内部方法的this指向调用这些方法的对象，
函数的定义位置不影响其this指向，this指向只和调用函数的对象有关。
多层嵌套的对象，内部方法的this指向离被调用函数最近的对象（window也是对象，其内部对象调用方法的this指向内部对象，而非window）

原型链中的方法的this仍然指向调用它的对象

构造函数中的this与被创建的新对象绑定。
注意：当构造器返回的默认值是一个this引用的对象时，可以手动设置返回其他的对象，如果返回值不是一个对象，返回this

代码体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2 class="counter">0</h2>
    <button class="incre">+</button>
    <button class="decre">-</button>
    <div id="app"></div>
    <script type="x-template" id="my-app">
        <div><h2>{{message}}</h2>
            <h2>{{count_vue}}</h2>
    <button @click='increment'>+</button>
    <button @click='decrement'>-</button></div>
    </script>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const count = document.querySelector(".counter")
    const incre = document.querySelector(".incre")
    const decre = document.querySelector(".decre")
    let counter = 100;
    count.innerHTML=counter
    incre.addEventListener('click',()=>{
        counter+=1;
        count.innerHTML = counter
    })
    decre.addEventListener('click',()=>{
        counter-=1;
        count.innerHTML = counter
    })

    const Obje = {
        template:`#my-app`,
    data :function() {
        return {
            message:'Hello Message',
            count_vue:100
        }
    },
    methods: {
        increment(){
            this.count_vue+=1
        },
        decrement(){
            this.count_vue-=1
        }
    }
    }
    Vue.createApp(Obje).mount("#app")
</script>
</html>