<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一个重要的内置关系</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<div id="root">
<!--
1、 VueComponent.prototype.__proto__ === Vue.prototype
-->
<school></school>
</div>
<script type="text/javascript">
Vue.config.productionTip = false // 组织开发环境提示
// 为Vue的原型添加属性x
Vue.prototype.x = 100
const school = Vue.extend({
name: 'school',
template: `
<div>
<h2>学校名称： {{ name }}</h2>
<h2>学校地址： {{ address }}</h2>
<button @click="showX">点击触发showX</button>
</div>`,
data() {
return {
name: "修仙学院",
address: "天山"
}
},
methods: {
showX() {
console.log(this)
console.log(this.x)
}
}
})
// 创建Vue实例
const vm = new Vue({
el: '#root',
data: {
msg: 'Hello',
},
components: {
school:school
}
})
// 创建一个Demo构造方法
function Demo() {
this.a = 1
this.b = 2
}
// 创建一个Demo实例
const d = new Demo()
console.log(Demo.prototype) // 显示原型属性
console.log(d.__proto__) // 隐式原型属性
console.log(Demo.prototype === d.__proto__)
Demo.prototype.x = 99
console.log(d.__proto__.x)
console.log(d.x)
</script>
</body>
</html>