我想静静 ---
Module Introduction 模块介绍
<!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" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<button @click="show">show paragraph 显示段落</button>
<p v-if="showParagraph">this is not always visible 这并不总是可见的</p>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
title: "the vuejs instance vuejs实例",
showParagraph: false
},
methods: {
show() {
this.showParagraph = true;
this.updateTitle("the vuejs instance vuejs实例(update)");
},
updateTitle(title) {
this.title = title;
}
},
computed: {
lowercaseTitle() {
return this.title.toLowerCase();
}
},
watch: {
title(value) {
alert("title changed new Value标题加上新的" + value);
}
}
});
</script>
</html>
Using Multiple Vue Instances 使用多个Vue实例
<body>
<div id="app">
<h1>{{ title }}</h1>
</div>
<div id="app1">
<h1>{{ title }}</h1>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
title: "hai this is one install"
}
});
new Vue({
el: "#app1",
data: {
title: "hai this is two install"
}
});
</script>
Accessing the Vue Instance from Outside 从外部访问Vue实例
<script>
var vm1 = new Vue({
el: "#app",
data: {
title: "hai this is one install"
}
});
setTimeout(function() {
vm1.title = "change this two 第二次改变";
}, 3000);
var vm2 = new Vue({
el: "#app1",
data: {
title: "hai this is two install"
},
methods: {
onChange() {
vm1.title = "change1";
}
}
});
</script>
How VueJS manages your Data and Methods 如何管理您的数据和方法
A Closer Look at el and data 仔细研究el和数据 这里我们看到 data el 和 rout 然后我们在控制台打印时候 会发现 data数据 和 vm 里面的data 相等 简单来说就是 vm 和 和 el是相当的
Mounting a Template 安装模板
<body>
<div id="app"></div>
</body>
<script>
var vm = new Vue({
template: "<h1>hello</h1>"
});
vm.$mount("#app");
</script>
这里模板安装 使用vm 拿到声明的 一个实例然后在vue 实例里面进行template 模板拼接，然后 调用vm.$mount 安装 拿到id（'#app'）
Limitations of some Templates 某些模板的局限性
How VueJS Updates the DOM vuejs如何更新DOM 就是vue的声明周期
new Vue() 创建一个vue 实例
然后走到下一步
beforeCreate()
然后继续走
initialize Data & EVents 走到初始化数据与事件
instance Created
created()
然后继续走
compile Template or el’s template
beforeMount() 创建
replace el with compiled template
继续走
Mounted to DOM
然后
Data Changed 数据改变
beForeupdate() 开始数据更新
Re-render DOM 循环DOM
updated() 继续数据更新
beforeDestroy() 准备开始销毁
destroyed() 销毁
The VueJS Instance Lifecycle in Practice 实践中的VueJS实例生命周期
<body>
<div id="app">
<h1>{{ title }}</h1>
<button @click="title = 'changed'">update title 更新标题</button>
<button @click="destroy">Destroy</button>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
title: "the vueJs instance"
},
beforeCreate: function() {
console.log("beforeCreate()");
},
created: function() {
console.log("created()");
},
beforeMount: function() {
console.log("beforeMount()");
},
mounted: function() {
console.log("mounted()");
},
beforeUpdate: function() {
console.log("beforeUpdate()");
},
updated: function() {
console.log("updated()");
},
beforeDestroy: function() {
console.log("beforeDestroy()");
},
destroyed: function() {
console.log("destroyed()");
},
methods: {
destroy() {
this.$destroy()
}
}
});
</script>
</html>
这里我们先点击 destroy 的时候 我们在点击 change的时候就会不生效，
这是整个vue的声明周期，
