vue模板的几种写法及变化
2024-10-19 01:21:32
第一种： 2+版本支持，1+版本支持
<script>
<template id="aaa">
<h1>我是组件2</h1>
</template> Vue.component('my-aaa',{
template:'#aaa'
});
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第二种：2+版本支持，1+版本支持
<script>
Vue.component('my-aaa',{
template:'<h1>我是组件2</h1>'
});
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第三种：1+支持，2+不支持
<script>
var Aaa = Vue.extend('aaa',{
template:'<h1>这是组件</h1>'
});
Vue.component('my-aaa',Aaa);
Vue.component('my-aaa',{
template:'#aaa'
}); window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第四种：2.0特有
<template id="aaa">
<h1>我是组件2</h1>
</template>
<script>
var temp = {
template:'#aaa'
}
Vue.component('my-aaa',temp);
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
</script>
第五种：
局部组件就不比说了，都支持
模板写法的变化
2+版本模板必须有根元素
1+版本： 这样写不报错
Vue.component('my-aaa',{
template:'<h1>我是组件2</h1><p>我是p标签</p>'
});
window.onload=function(){
var vm = new Vue({
el:"#box",
data:{
msg:"welcome to 2.0"
}
})
}
2+版本这样写报错,2+版本必须有根元素
不报错只能这样写：
template:'<div>
<h1>我是组件2</h1>
<p>我是p标签</p>
</div>'
最新文章
- 在Linux下禁用IPv6的方法小结
- python与C++交互
- Android开发学习之路-SimpleAdapter源码分析学习
- struts学习
- redis-desktop-manager
- apache安装后编译新模块
- Web缓存基础：术语、HTTP报头和缓存策略
- JSP三个指令及9个内置对象
- JAVA正则表达式之贪婪、勉强和侵占
- JS输出当前时间，且每秒变化
- ASP.NET MVC+EF框架+EasyUI实现权限管理系列(5)-前台JqueryEasyUI前台实现
- 介绍shell脚本
- CCNP第一课：默认路由（路由黑洞，路由终结）
- JDBC操作数据库之修改数据
- 将Map中的参数封装为XML
- 安卓开发学习笔记（三）：Android Stuidio无法引用Intent来创建对象，出现cannot resolve xxx
- win10 python27pyhton36共存
- MySQL5.7 并行复制配置
- jdk动态代理和cglib动态代理
- images & Skeleton