新增用户主页和个人主页的HTML、CSS和JS文件 添加相关图片资源 重构sectionIndex页面为section-index.html 更新sectionIndex.js以支持组件导入
28 lines
847 B
JavaScript
28 lines
847 B
JavaScript
// my-component.js
|
||
// 引入全局 Vue 对象(因在 HTML 中通过 script 引入,Vue 已挂载到 window)
|
||
const { defineComponent } = Vue;
|
||
console.log("11223131321321");
|
||
|
||
// 定义组件(直接使用模板)
|
||
export const MyComponent = defineComponent({
|
||
name: "MyComponent",
|
||
props: {
|
||
title: {
|
||
type: String,
|
||
default: "默认标题",
|
||
},
|
||
},
|
||
// 方法
|
||
methods: {
|
||
handleClick() {
|
||
alert("组件按钮被点击");
|
||
},
|
||
},
|
||
// 直接使用template选项,包含标题、文本内容和按钮
|
||
template: `<div style="padding: 10px; border: 1px solid #ccc;">
|
||
<h3>{{ title }}</h3>
|
||
<p>这是从text文件加载的模板内容</p>
|
||
<button @click="handleClick">点击我</button>
|
||
</div>`,
|
||
});
|