初识非单文件组件
主要实现有三步:
- 第一步:创建组件
- 第二步:注册组件,使用components来注册
- 第三部,使用组件标签
<!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">
<student></student><!-- 第三部,使用组件标签-->
<student> <</student><!--组件实现复用,以后可以只使用组件标签来调用-->
</div>
<script type="text/javascript">
Vue.config.productionTip=false
//第一步:创建组件
Vue.component('student',student)//这样就可以实现全局配置
const student = Vue.extend({
template:`
<div>
<h1>
我是{{name}}
</h1>
地址{{address}}
</div>
`,
//这里的data必须是这种返回形式
data(){
return{
name:'李祥',
address: '陕西理工大学'
}
}
})
new Vue({
el:'#root',
//第二步:注册组件,使用components来注册
components:{
student,
}
})
</script>
</body>
</html>