<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<h3 id="h3">{{ msg }}</h3>
<p></p>
</div>
<script>
Vue.filter('fff',function(msg){
return msg.replace(/a/g,'你')
})
var vm = new Vue({
data:{
msg:"IT程序员的日常"
},
methods:{
say:function () {
console.log("IT程序员的日常");
}
},
beforeCreate:function () {
/*执行beforeCreate的时候,表示Vue刚刚出生,还没有任何内容,data/methods都没有初始化*/
//console.log(this.msg);
//this.say();
//console.log(this.say);
},
created:function () {
/*执行created的时候,表示Vue实例已经初始化好了部分内容,data/methods
* 想在Vue实例中最早访问到data/methods,只有在这个方法才能访问
*/
console.log(this.msg);
this.say();
console.log(this.say);
},
beforeMount:function () {
/*执行beforeMount,表示已经根据数据编译好了模板,但是还没有渲染到界面上*/
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
mounted:function () {
/*执行mounted,表示已经根据数据编译好了模板,已经将模板有渲染到界面上,此时可以对界面进行其他操作了*/
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeUpdate:function(){
/*主要data中的数据发生了变化就会执行
* 执行beforeUpdate时候,data的数据已经是最新的了,但是没有更新界面上的数据
*
* */
console.log(this.msg);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
updated:function () {
/*主要data中的数据发生了变化就会执行
* 执行updated时候,data的数据已经是最新的了,界面上的数据也已经更新
*
* */
console.log(this.msg);
console.log(document.querySelector("p").innerText);
console.log(document.querySelector("p").innerHTML);
},
beforeDestroy:function(){
/*执行beforeDestroy的时候,表示Vue实例即将销毁,但是还未销毁,实例中的数据等都可以使用
* 最后能使用Vue实例的地址
* */
},
destroyed:function () {
/*
* 执行destroyed的时候,表示vue实例完全销毁,实例中的任何内容都不能被使用了
* */
}
})
</script>
</body>
</html>
1269
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
