模板可以写在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>
网友回复
我知道答案，我要回答
私活外包
最新提问
python中如何让ai接管邮箱自动回复邮件？
Neutralinojs与Electron的区别与不同？
浏览器跨域解决方案有哪些？
有没有开源的solo agent一句话描述就能开发直接运行的前后端应用源代码？
订单支付过程中部分商品库存不足如何处理？
python如何开发一个自定义域名后缀的邮箱系统及登录发送邮件管理web页面？
有没有开源的项目将图片视频声音文字转场特效编排自动生成剪映草稿json文件？
有没有摄像头捕获眼球转动操作鼠标的开源代码？
localstorage如何生成自增的键值对进行增删改查？
python有没有将python脚本与python运行环境一键打包成exe的代码？
