Vue之x-template(1)
Vue Template
2023-09-11 14:19:07 时间
今天,我们来讲一个比较有趣的一个功能吧
先来看一段代码示例:
<html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <my-component></my-component> <script type="text/x-template" id="my-component"> <div> <p>This is the content of component</p> <p>Hello Vue!</p> </div> </script> </div> <script> Vue.component('my-component',{ template:'#my-component' }); var app=new Vue({ el:"#app" }); </script> </body> </html>
<html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <my-component></my-component> <script type="text/x-template" id="my-component"> <div> <p>This is the content of component</p> <p>Hello Vue!</p> </div> </script> </div> <script> Vue.component('my-component',{ template:'#my-component' }); var app=new Vue({ el:"#app" }); </script> </body> </html>
不知大家有没有注意到,第一个“< script>”中type是x-template。
这是一种比较有用的功能。如果在声明一个组件时,在template中定义模板,如果要换行的话,要加上一个“\”,如果是比较简单的模板还好,如果比较多的话,就会感觉眼花缭乱的,因此我们有一个看起来舒服的方式:x-template
只要写出< script type="text/x-template" id="x-template" >< /script> 在其中间就可以愉快的写HTML代码了。不用考虑换行等问题。这里注意,要加一个id名称,并将其赋给template.然后在声明的组件中加一个:
Vue.component('my-complate',{ template:'#x-template' })
不过,Vue的初衷并不是滥用它,因为它将模板与组件的其他定义分离了。因此,我们可以用它来开发一些中小型产品,这是比较方便的。
但据我观察,只能显示处于一个块中的,
<html> <head> <meta charset="utf-8"> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> </head> <body> <div id="app"> <my-component></my-component> <script type="text/x-template" id="my-component"> <div> <p>This is the content of component</p> <p>Hello Vue!</p> </div> </script> </div> <script> Vue.component('my-component',{ template:'#my-component' }); var app=new Vue({ el:"#app" }); </script> </body> </html>
以上会显示两行的内容。
以下只会显示第一个< div >标签内容
原因是因为template定义的模板,一定要用一个根元素包裹起来,每个组件必须只有一个根元素,比如上例中,如果去掉< div>标签,那么就相当于有两个根元素。
.
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- 转载:手把手教你搭建 vue 环境
- 【Vue】错误 : 无法加载文件 C:UsersAdministratorAppDataRoamingnpmvue.ps1,因为在此系统上禁止运行脚本的解决方法
- 【Vue】组件template中提示“TypeScript intellisense is disabled on template. To enable, configure `“jsx“: ”错误
- Vue2.0 搭建Vue脚手架(vue-cli)
- 创建Vue实例对象基础语法模板
- Vue——vue中的双向数据绑定
- Vue中 .env .env.development .env.production 详细说明
- Web前端-Vue.js必备框架(一)
- Vue 国际化之 vue-i18n 的使用
- Vue项目 跨域 解决方案与 vue.config.js 配置解析
- 将2020-01-31T16:00:00.000Z格式化vue.jsYYYY-MM-DD
- vue基础---Class 与 Style 绑定
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue的diff算法
- Vue富文本编辑器的使用vue-quill-deitor
- vue自定义指令导致的内存泄漏问题解决
- 浅析new Vue()时发生了什么
- Vue-cli 4在vue.config.js中配置别名
- vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法
- vue中循环table表格数据,可编辑的列表(新增、删除、修改)
- vscode快速生成vue代码---创建Vue代码模板
- Template template parameter(模板參数) example
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- 狂神说笔记——Vue 快速入门19
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第13天——vue中使用自定义插件
- spring boot + vue + element-ui全栈开发入门——前后端整合开发
- antd design vue 禁止输入中文