Vue2.0 【第四季】第2节 实例方法
第2节 实例方法
一、$mount方法
$mount方法是用来挂载我们的扩展的，我们先来复习一下扩展的写法。
这里我们作了da0sy的扩展，然后用$mount的方法把da0sy挂载到DOM上，我们也生成了一个Vue的实例，直接看代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Examples Method Demo</title>
</head>
<body>
<h1>Examples Method Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var da0sy = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello ,I am da0sy'
}
}
})
var vm = new da0sy().$mount("#app")
</script>
</body>
</html>
浏览器效果：
二、$destroy()卸载方法
用$destroy()进行卸载。
我写了一个button按钮，点击后卸载整个挂载。
html:
<p><button onclick="destroy()">卸载</button></p>
js:
function destroy(){
vm.$destroy();
}
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Examples Method Demo</title>
</head>
<body>
<h1>Examples Method Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<p><button onclick="destroy()">卸载</button></p>
<script type="text/javascript">
var da0sy = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello ,I am da0sy'
}
},
mounted:function(){
console.log("mounted 被创建！");
},
destroyed:function(){
console.log("destroy 销毁之后");
}
})
var vm = new da0sy().$mount("#app");
function destroy(){
vm.$destroy();
}
</script>
</body>
</html>
浏览器效果：
PS:$destroy()后边必须要有括号，没有括号是无用的。
三、$forceUpdate()更新方法
vm.$forceUpdate();
全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Examples Method Demo</title>
</head>
<body>
<h1>Examples Method Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<p><button onclick="destroy()">卸载</button></p>
<p><button onclick="reload()">刷新</button></p>
<script type="text/javascript">
var da0sy = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello ,I am da0sy'
}
},
mounted:function(){
console.log("mounted 被创建！");
},
destroyed:function(){
console.log("destroy 销毁之后");
}
})
var vm = new da0sy().$mount("#app");
function destroy(){
vm.$destroy();
}
function reload(){
vm.$forceUpdate();
}
</script>
</body>
</html>
浏览器效果：
四、$nextTick()数据修改方法
当Vue构造器里的data值被修改完成后会调用这个方法，相当于一个钩子函数，和构造器里的updated生命周期很像。
function tick(){
vm.message="update message info ";
vm.$nextTick(function(){
console.log('message更新完后我被调用了');
})
}
同样的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Examples Method Demo</title>
</head>
<body>
<h1>Examples Method Demo</h1>
<hr>
<div id="app">
{{message}}
</div>
<p><button onclick="destroy()">卸载</button></p>
<p><button onclick="reload()">刷新</button></p>
<p><button onclick="tick()">更改数据</button></p>
<script type="text/javascript">
var da0sy = Vue.extend({
template:`<p>{{message}}</p>`,
data:function(){
return {
message:'Hello ,I am da0sy'
}
},
mounted:function(){
console.log("mounted 被创建！");
},
destroyed:function(){
console.log("destroy 销毁之后");
},
updated:function(){
console.log("update 更新之后");
}
})
var vm = new da0sy().$mount("#app");
function destroy(){
vm.$destroy();
}
function reload(){
vm.$forceUpdate();
}
function tick(){
vm.message="update message info ";
vm.$nextTick(function(){
console.log('message更新完后我被调用了');
})
}
</script>
</body>
</html>
浏览器效果：
