实例方法

最新推荐文章于 2023-08-03 22:48:28 发布
最新推荐文章于 2023-08-03 22:48:28 发布
阅读量304 收藏
点赞数
分类专栏： 4.Vue实例和内置组件

1.$mount方法

是用来挂载我们的扩展的，这里我们做了 Cat 的扩展，用 $mount 方法把它挂载到我们的Dom上，我们也生成了一个Vue实例
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实例方法</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
    <script src="../assets/js/jquery.js" type="text/javascript"></script>
</head>
  <body>
    <h1>实例方法</h1>
    <hr />
    <div id="app">
    </div>
    <script>
        var Cat=Vue.extend({
            template:`<h3>{{message}}</h3>`,
            data:function(){
                return{
                    message:'hello,I am Cat'
                }
            },
            mounted(){
                console.log('mounted被创建')
            }
        })

        var vm = new Cat().$mount('#app')
    </script>
  </body>
</html>

2.$destroy()卸载方法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实例方法</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
    <script src="../assets/js/jquery.js" type="text/javascript"></script>
</head>

<body>
    <h1>实例方法</h1>
    <hr />
    <div id="app">

    </div>
    <p>
        <button onclick="destroy()">卸载</button>
    </p>
    <script>
        var Cat = Vue.extend({
            template: `<h3>{{message}}</h3>`,
            data: function () {
                return {
                    message: 'hello,I am Cat'
                }
            },
            mounted() {
                console.log('mounted被创建')
            },
            destroyed(){
                console.log('destroy 销毁之后')
            }
        })

        var vm = new Cat().$mount('#app')
        function destroy(){
            vm.$destroy()
        }
    </script>
</body>

</html>

3.$forceUpdate()更新方法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实例方法</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
    <script src="../assets/js/jquery.js" type="text/javascript"></script>
</head>

<body>
    <h1>实例方法</h1>
    <hr />
    <div id="app">

    </div>
    <p>
        <button onclick="destroy()">卸载</button>
    </p>
    <p>
        <button onclick="update()">刷新</button>
    </p>
    <script>
        var Cat = Vue.extend({
            template: `<h3>{{message}}</h3>`,
            data: function () {
                return {
                    message: 'hello,I am Cat'
                }
            },
            mounted() {
                console.log('mounted被创建')
            },
            destroyed() {
                console.log('destroy 销毁之后')
            },
            updated(){
                console.log('update 刷新之后')
            }
        })

        var vm = new Cat().$mount('#app')
        function destroy() {
            vm.$destroy()
        }
        function update(){
            vm.$forceUpdate()
        }
    </script>
</body>

</html>

4.$nextTick()数据修改方法
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>实例方法</title>
    <script src="../assets/js/vue.js" type="text/javascript"></script>
    <script src="../assets/js/jquery.js" type="text/javascript"></script>
</head>

<body>
    <h1>实例方法</h1>
    <hr />
    <div id="app">

    </div>
    <p>
        <button onclick="destroy()">卸载</button>
    </p>
    <p>
        <button onclick="update()">刷新</button>
    </p>
    <p>
        <button onclick="tick()">修改</button>
    </p>
    <script>
        var Cat = Vue.extend({
            template: `<h3>{{message}}</h3>`,
            data: function () {
                return {
                    message: 'hello,I am Cat'
                }
            },
            mounted() {
                console.log('mounted被创建')
            },
            destroyed() {
                console.log('destroy 销毁之后')
            },
            updated() {
                console.log('update 刷新之后')
            }
        })

        var vm = new Cat().$mount('#app')
        function destroy() {
            vm.$destroy()
        }
        function update() {
            vm.$forceUpdate()
        }
        function tick(){
            vm.message='update message info'
            vm.$nextTick(function(){
                console.log('message更新完后被我调用了')
            })
        }
    </script>
</body>

</html>
bug的生产者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中类的静态方法，静态变量，实例方法，实例变量区别与用法实例分析
11-21
本文实例讲述了JS中类的静态方法，静态变量，实例方法，实例变量区别与用法。分享给大家供大家参考，具体如下： 1.类的静态方法 先来段代码之后分析 // JS类静态函数 function BaseClass() { } // 类添加add函数 ...
实例方法(instance method)、类方法、构造方法（三）
m0_69234258的博客
11-30 2115
实例方法(instance method)、类方法、构造方法（三）
实例方法与类方法的区别
myswg的博客
11-08 1万+
类方法与实例方法的区别
Java中实例方法与类方法
weixin_52326703的博客
11-23 9106
Java中实例方法与类方法一、实例方法与类方法的定义二、实例方法和类方法的区别 一、实例方法与类方法的定义 1.声明方法时，方法类型前面不使用static修饰的是实例方法，用static修饰的是类方法，也称类方法。 例如： class Student{ int sum(int a,int b) {//实例方法 return a+b; } static void run() {//类方法 ... } } 解释：Student类中包含有两个方法，其中sum方法是实例方法，run方法是类方
实例方法定义语法 方法一
m0_69234258的博客
11-15 884
实例方法定义语法方法一
20201129_091.实例方法_内存分析方法调用过程_dir()_isinstance
MinskyYi的博客
12-01 223
实例方法 实例方法是从属于实例对象的方法。实例方法的定义格式如下： def 方法名(self [, 形参列表])： 函数体 方法的调用格式如下： 对象.方法名([实参列表]) ps：老师说实例方法本质上也是实例的属性。 要点： 定义实例方法时，第一个参数必须为 self。和前面一样，self 指当前的实例对象。 调用实例方法时，不需要也不能给 self 传参。self 由解释器自动传参。 函数和方法的区别 都是用来完成一个功能的语句块，本质一样。 方法调用时，通过对象来调用。方法从属于特定
Java静态方法和实例方法区别详解
08-31
主要为大家详细介绍了Java静态方法和实例方法的区别，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Python实例方法、类方法、静态方法区别详解
01-19
实例方法：定义实例方法是最少有一个形参 —> 实例对象，通常用 self 类方法：定义类方法的时候最少有一个形参 —> 类对象，通常用 cls 静态方法：定义静态方法的时候可以不定义形参 2、关于方法定义时候添加装饰器...
Python实例方法、类方法、静态方法的区别与作用详解
09-19
主要介绍了Python实例方法、类方法、静态方法的区别与作用,结合实例形式分析了Python面向对象程序设计中实例方法、类方法、静态方法的概念、原理、用法及相关操作技巧,需要的朋友可以参考下
浅谈python中的实例方法、类方法和静态方法
09-21
本文主要介绍了python 实例方法、类方法和静态方法的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
Java 中的静态方法与实例方法(使用总结)
jake_Aaron的博客
11-21 9835
实例方法 实例方法是需要在调用之前创建其类的对象的方法。要调用实例方法，我们必须创建在其中定义它的类的对象。 内存分配：这些方法本身存储在堆的永久代空间中，但参数（传递给它们的参数）及其局部变量和要返回的值在堆栈中分配。它们可以在它们所在的同一个类中调用，也可以从定义在同一个包或其他包中的不同类中调用，这取决于提供给所需实例方法的访问类型。 要点： 实例方法属于类的对象，而不属于类，即它们可以在创建类的对象后调用。 实例方法不是在每个实例的基础上存储的，即使使用虚拟方法也是如此。它们存储在一...
python中实例方法、类方法和静态方法用法区别
最新发布
IT之一小佬的博客
08-03 1229
python中实例方法、类方法和静态方法用法区别
实例方法和类方法的区别
春哥团队技术博客
09-03 2084
实例方法也叫做对象方法。 类方法是属于整个类的，而实例方法是属于类的某个对象的。 由于类方法是属于整个类的，并不属于类的哪个对象，所以类方法的方法体中不能有与类的对象有关的内容。即类方法体有如下限制： (1) 类方法中不能引用对象变量； (2) 类方法中不能调用类的对象方法； (3) 在类方法中不能使用super、this关键字。 (4)类方法不能被覆盖。
第7.14节 Python类中的实例方法详析
老猿Python
06-16 5311
第7.14节 Python类中的实例方法详析 一、 实例方法的定义 在本章前面章节已经介绍了类的实例方法，实例方法的定义有三种方式： 1. 类体中定义实例方法 第一种方式很简单，就是在类体中定义，所有在类中定义的方法默认是实例方法。定义实例方法与定义函数基本相同，只是Python要求实例方法的第一个形参必须为self，也就是实例对象本身，因此实例方法至少应该有一个self参数。关于s...
java 类方法和实例方法
热门推荐
Darklovy
03-13 2万+
类方法 用static修饰的方法。 由于类方法是属于整个类的，所以类方法的方法体中不能有与类的对象有关的内容。 即类方法体有如下限制： 1.类方法中不能引用对象变量； 2.类方法中不能调用类的对象方法； 3.在类方法中不能调使用super，this关键字； 4.类方法不能被覆盖。 实例方法 当一个类创建了一个对象后，这个对象就可以调用该类的方法（...
类方法和实例方法？
promote的博客
09-26 3362
笔试中遇到都最最基础的问题，我竟然有点懵了。首先没弄清楚什么时类方法，什么时实例方法，现在就做一个总结。 类中的方法分为类方法和实例方法。 类方法：类中用 static 修饰的方法。 实例方法：也称为对象方法，除了类方法都是实例方法。 类方法在类被 JVM 虚拟机加载进内存的时候就会为其分配入口地址，实例方法不会分配入口地址，只有当对象被创建后才为其分配入口地址，所以类方法中不能调用关于实例方法的...
实例方法、类方法、构造方法
CSDN1782747395的博客
11-19 1万+
Java中类的方法分为类方法（用static修饰，也叫静态方法）和实例方法（没有用static修饰，也叫非静态方法） 实例方法，就是一般的方法 类方法，有static修饰符，典型的主函数 构造方法，没有返回值(就是连void都没有)，方法名与类名一样 public static void myMethod();//类方法 public void myMethod2();//实例方法 public ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值