黑马程序员技术交流社区

标题: 【上海校区】Vue中实例 [打印本页]

---

作者: 不二晨    时间: 2019-4-15 10:29
标题: 【上海校区】Vue中实例
实例就是在构造器外部操作构造器内部的属性选项和方法，就叫做实例，实例的作用就是给原生的或者其他的JavaScript框架一个融合的接口或者说是机会，让Vue和其他框架一起使用。

一.实例事件就是在构造器外部写一个调用构造器内部的方法，作用是在构造器外部调用构造器内部的数据。

1.通过$on在构造器的外部添加事件



2
3
4
app.$on('reduce',function(){
    console.log('执行了reduce()');
    this.num--;
});
$on 接受两个参数，第一个是调用的事件名称，第二个是一个匿名方法。

如果按钮在作用域外部就可以利用$emit来执行。

2
3
4
//外部调用内部事件
function reduce(){
    app.$emit('reduce');
}
2.$once执行一次的事件

1
2
3
4
5
app.$once('reduceOnce',function(){
    console.log('只执行一次的方法');
    this.num--;

});
3.$off关闭事件

function off(){app.$off('reduce');}

二.实例方法

1.$mount()方法，用来实现挂载我们的扩展的，经常和extend一起使用


    <script type="text/javascript">
      var jspang = Vue.extend({
          template:`<p>{{message}}</p>`,
          data:function(){
              return {
                  message:'Hello ,I am JSPang'
              }
          }
      })
      var vm = new jspang().$mount("#app")
    </script>
2.$destory()卸载方法


html：

1
<p><button>卸载</button></p>
javascript

1
2
3
function destroy(){
   vm.$destroy();
}
PS:$destroy()后边必须要有括号，没有括号是无用的。

3.$forceUpdate()更新方法

vm.$forceUpdate()

4.$nextTick()数据修改方法


function tick(){
    vm.message="update message info ";
    vm.$nextTick(function(){
        console.log('message更新完后我被调用了');
    })
}


---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/80312943
版权声明：本文为博主原创文章，转载请附上博文链接！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2