实例就是在构造器外部操作构造器内部的属性选项和方法，就叫做实例，实例的作用就是给原生的或者其他的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")
</s
cript
>
2.$destory()卸载方法
html：
|
1
|
<p>
<button
onclick
=
"destroy()"
>
卸载
</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更新完后我被调用了'
)
;
}
)
}