VUE中template的三种写法
更新时间：2022年04月23日 14:36:09 作者：農碼一生
这篇文章介绍了VUE中template的三种写法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
一、直接写在构造器中
<!-- 第一种写法：直接写在构造器里 -->
<div id ="app1"> </div>
<script>
var vm1 = new Vue({
el: '#app1',
data: {},
methods: {},
template:`<h3>在构造器中的文字</h3>`
});
</script>二、写在HTML自带的<template>标签中
<!-- 第二种写法：写在HTML自带的标签里 -->
<div id ="app2">
<template id="item1">
<h3>Template标签的文字</h3>
</template>
</div>
<script>
var vm2 = new Vue({
el: '#app2',
data: {},
methods: {},
template:'#item1'
});
</script>三、写在<script>标签中
<!-- 第三种写法：写在script标签里 -->
<div id ="app3">
</div>
<script type="x-template" id="item3">
<h3>写在script的文字</h3>
</script>
<script>
let vm3 = new Vue({
el: '#app3',
data: {},
methods: {},
template:'#item3'
});
</script>到此这篇关于VUE中template写法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目中jsonp跨域获取qq音乐首页推荐问题，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-05-05
vue的style绑定background-image的方式和其他变量数据的区别详解
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
本文主要介绍了element tooltip的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了初试vue-cli使用HBuilderx打包app的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
Vue.js绑定HTML class数组语法错误有哪些原因导致的呢，该如何解决呢？下面小编给大家分享Vue.js绑定HTML class数组语法错误的原因分析，感兴趣的朋友一起看看吧2016-10-10
这篇文章主要介绍了Vue配置文件vue.config.js配置前端代理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了JavaScript的MVVM库Vue.js入门学习笔记,Vue.js是一个新兴的js库,主要用于实现响应的数据绑定和组合的视图组件,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了详解vue-cli项目开发/生产环境代理实现跨域请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。这篇文章主要介绍了一文快速详解前端框架 Vue 最强大的功能,需要的朋友可以参考下2019-05-05
这篇文章主要和大家一起简单学习一下vue指令：directive，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
最新评论