模板可以写在html中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模板引入</title>
</head>
<body>
<div>
<my-component-b></my-component-b><!--可以把my-component-b看做一个对象-->
</div>
<template id="my-template">
<div>
<h2>{{name}}</h2>
<button @click="count++">{{count}}</button>
<ul>
<li v-for="item in numArray">{{item}}</li>
</ul>
</div>
</template>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>
new Vue({
components: {
"my-component-b": {
template: '#my-template',
data() {
return {
name: '欢迎来到bfw',
numArray: [1, 2, 3, 4, 5],
count: 0
}
}
}
}
}).$mount('div');
</script>
</body>
</html>
component可以动态引入，代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态组件</title>
</head>
<body>
<div>
<button @click="selectName='my-component-a' ">a</button>
<button @click="selectName='my-component-b' ">b</button>
<button @click="selectName='my-component-c' ">c</button>
<component :is="selectName"></component>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>
new Vue({
data: {
selectName: 'my-component-a'
},
components: {
"my-component-a": {
template: '<h1>欢迎来到bfw</h1>'
},
"my-component-b": {
template: "<a href='https://www.bfw.wiki'> bfw.wiki</a>"
},
"my-component-c": {
template: "<p>一个it人必备的网站</p>"
},
}
}).$mount('div');
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
ai能写出比黑客还厉害的零日漏洞等攻击工具攻击任意软件系统工程？
js如何获取浏览器的音频上下文指纹、Canvas指纹、WebGL渲染特征？
为啥ai开始抛弃markdown文本，重新偏好html文本了？
网站有没有办法鉴别访问请求是由ai操控chrome-devtools-mcp发出的？
有没有python自动操作浏览器让网站无法鉴别是机器行为？
为啥最新由Meta / 斯坦福 / 哈佛出的ProgramBench基准GPT-5.4、Claude Opus 4.7、Gemini 3.1 Pro 等全部 0% 通过率？
有没有免费的api查询域名是否完成icp工信部备案？
codex用HyperFrames与 Remotion自动做视频那个更好？
claude code中Skill MCP CLI SubAgent Hooks Plugin区别？
浏览器webrtc点对点通讯如何才能走系统代理？
