vue-小细节以及小知识点

系列文章目录

提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用


提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档

文章目录

  • 系列文章目录
  • 前言
  • 一、nextTick()?


前言

提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。


一、nextTick()?

Vue.nextTick 与实例上面使用nextTick 功能一样唯一的区别在于里面this指向不一样
全局的nextTick里面this指向window
实例上面使用nextTick this是指向实例的
解决办法 :里面箭头函数特性 将里面使用function使用箭头函数来写,this就都指向vue实例

<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>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
</head>

<body>
    <h1 id="app">yh1{{msg}}</h1>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    msg: "消息"
                }
            },
            mounted() {
                 this.$nextTick(function () {
                    console.log(this) //打印vm实例
                })
                Vue.nextTick(function () {
                    console.log(this); //打印的window
                })
            },
        })
    </script>
</body>

</html>

你可能感兴趣的:(vue,vue.js)