VueComponent构造函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueComponent</title>
<script type="text/javascript" src="../../Js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
// ----------------------创建组件----------------------
const school = Vue.extend({
name: 'school',
template:
'<div>'
+ ' <h3>学校名称：{{schoolName}}</h3>'
+ ' <h3> 学校地址：{{ schoolAddress }}</h3>'
+ '</div>',
data () {
return {
schoolName: '希望小学',
schoolAddress: '西安/110号/希望小学',
}
},
methods: {
showInfo () {
alert(this.schoolName + '/' + this.schoolAddress)
}
}
})
console.log('school组件类型==》' + school)
/* 输出结果如下所示：
function VueComponent (options) {
this._init(options); */
new Vue({
el: '#root',
components: {
school
}
})
</script>
示例一：
注： console.log('school组件类型==》' + school)==》输出结构为构造函数——function VueComponent (options) {}
总结：VueComponent
- school组件本质上是一个名为VueComponet的构造函数，且不是程序员定义的，是Vue.extend生成的。
- 我们只需要写<school/>或<school><school/>，Vue解析时会帮助我们创建school组件的实例对象。即Vue绑我们执行的 new VueComponet(options)
- 特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponet
- 关于this指向
- 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数--它们的this均是：VueComponet实例对象
- new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的函数--它们的this均是Vue实例对象
- VueComponet的实例对象，以后简称vc(也可称之为--组件实例对象)、Vue的实例对象，简称vm。
示例二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VueComponent</title>
<script type="text/javascript" src="../../Js/vue.js"></script>
</head>
<body>
<div id="root">
<school></school>
<hello></hello>
</div>
</body>
</html>
<script type="text/javascript">
Vue.config.productionTip = false
// ----------------------创建组件----------------------
const school = Vue.extend({
name: 'school',
template:
'<div>'
+ ' <h3>学校名称：{{schoolName}}</h3>'
+ ' <h3> 学校地址：{{ schoolAddress }}</h3>'
+ '</div>',
data () {
return {
schoolName: '希望小学',
schoolAddress: '西安/110号/希望小学',
}
},
methods: {
showInfo () {
alert(this.schoolName + '/' + this.schoolAddress)
}
}
})
console.log('school组件类型==》' + school)
/* 输出结果如下所示：
function VueComponent (options) {
this._init(options); */
const hello = Vue.extend({
template: '<h3>{{msg}}</h3>',
data () {
return {
msg: 'msg你好啊'
}
}
})
console.log('hello组件类型==>' + hello)
new Vue({
el: '#root',
components: {
school,
hello,
}
})
</script>
标签：school,Vue,schoolName,--,VueComponent,schoolAddress,组件,构造函数 From： https://www.cnblogs.com/YYkun/p/18057369