3种种vue组件的书写形式组件的书写形式
主要为大家详细介绍了3种vue组件的书写形式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue组件的书写形式，供大家参考，具体内容如下
第一种第一种使用script标签
<!DOCTYPE html>
<html>
<body>
<div id="app">
<my-component></my-component>
</div>
<-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在解析HTML文档时会忽略<script>标签内定义的内容。-->
<script type="text/x-template" id="myComponent">//注意 type 和id。
<div>This is a component!</div>
</script>
</body>
<script src="js/vue.js"></script>
<script>
//全局注册组件
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
第二种第二种使用template标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<my-component></my-component>
</div>
<template id="myComponent">
<div>This is a component!</div>
</template>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component',{
template: '#myComponent'
})
new Vue({
el: '#app'
})
</script>
</html>
第三种第三种 单文件组件
这种方法常用在vue单页应用中。详情看官网：https://cn.vuejs.org/v2/guide/single-file-components.html
创建.vue后缀的文件,组件Hello.vue，放到components文件夹中
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
资源评论
weixin_38692969
- 粉丝: 4
最新资源
- 2023年手机题库软件与高中物理教学研究.doc
- (源码)基于Arduino的RAKwireless土壤湿度传感器数据读取系统.zip
- 均匀布拉格光栅的原理及MATLAB反射谱仿真.doc
- 2022年自学考试软件工程模拟试题及答案和解析.doc
- 有线电视网络技术样本.doc
- 项目一电子商务网站面赏析已经完成.doc
- 金融探索之区块链：清算与支付应用详解.docx
- 企业信息化建设报告.doc
- 公共项目管理PPT课件.ppt
- 云计算的关键技术及发展现状.doc
- 网络营销必须懂得的知识.docx
- 软件项目管理应用与研究论文.docx
- 基于PLC的供水控制系统设计.doc
- 互联网教师专业发展ppt课件.ppt
- 网络信息编辑名词解释.pdf
- 电子教育游戏开发意义.doc
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
