Vue 非单文件组件
1：文件结构
2：文件代码内容：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习一下单文件组件的语法</title>
</head>
<body>
<div id="root"> </div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
3：文件代码内容：main.js
import App from "./App.vue";
const vm=new Vue({
el:"#root",
template:` <App></App> `,
components: {
App:App
}
});
4：文件代码内容：App.vue
<!-- App.vue 为管理所有的组件的管理者 -->
<template>
<div>
<DomainName></DomainName>
<hr/>
<DamainChridren></DamainChridren>
</div>
</template>
<script>
// 引入组件
import DomainName from './domainName.vue';
import DamainChridren from './DamainChridren.vue';
export default {
name:"App",
components:{
// 组成组件
DomainName,
DamainChridren
}
};
</script>
<style>
</style>
5：文件代码内容：DomainName.vue
<!-- 组件的结构 -->
<template>
<div class="demo">
<h2>网站名称：{{name}}</h2>
<h2>网站域名：{{url}}</h2>
<button @click="showName">点击提示网站名称</button>
</div>
</template>
<script>
//组件交互相关的代码(数据、方法等)
//export const domainName ... 该方式为分别暴露组件方式
/*export*//* const domainName =Vue.extends({
data(){
return{
name:"百度",
url:"www.baidu.com"
}
},
methods: {
showName(){
alert(this.name);
}
},
});
//统一暴露组件方式 引入时需要这么写： import ｛？？？｝ from ???
// export { domainName }
// 默认暴露组件方式 当暴露对象往往只有一个的时候，默认都用这个 默认暴露组件方式来实现,因为引入简单 只需要写 import 引入组件名 from 哪里的文件名
export default domainName;
*/
// 默认暴露组件方式：或者下面的简写实现方式
/* export default Vue.extends({
data(){
return{
name:"百度",
url:"www.baidu.com"
}
},
methods: {
showName(){
alert(this.name);
}
},
}); */
//默认暴露组件方式：或者下面的简写实现方式：进一步简写方式
export default {
name:"DomainName",/* 非单文件组件的组件文件名 */
data(){
return{
name:"百度",
url:"www.baidu.com"
}
},
methods: {
showName(){
alert(this.name);
}
},
};
</script>
<style >
/* //组件的样式 */
.demo{
background-color: orange;
}
</style>
6：文件代码内容：DamainChridren.vue
<!-- 组件的结构 -->
<template>
<div class="chridren">
<h2>子网站名称：{{name}}</h2>
<h2>子网站域名：{{url}}</h2>
<button @click="showName">点击提示网站名称</button>
</div>
</template>
<script>
//默认暴露组件方式：或者下面的简写实现方式：进一步简写方式
export default {
name:"DamainChridren",/* 非单文件组件的组件文件名 */
data(){
return{
name:"百度地图",
url:"map.baidu.com/"
}
},
};
</script>
<style >
/* //组件的样式 */
.chridren{
background-color:blue;
}
</style>
7：执行情况
8：说明
该文件需要在vue脚手架环境下执行才能显示正常
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
转载请标注出处！
