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写法的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解Vue template 如何支持多个根结点

    如果你试图创建一个没有根结点的 Vue template,像这样: <template> <div>Node 1</div> <div>Node 2</div> </template> 不出意外的话你会得到一个编译错误或者运行时错误,因为 template 必须有一个根元素. 通常你可以在外面套一个div容器来解决.这个容器元素没有显示上的作用,只是为了满足模板编译的单个根节点的要求. <template> <div

  • 详解template标签用法(含vue中的用法总结)

    一.html5中的template标签 html中的template标签中的内容在页面中不会显示.但是在后台查看页面DOM结构存在template标签.这是因为template标签天生不可见,它设置了display:none;属性. <!--当前页面只显示"我是自定义表现abc"这个内容,不显示"我是template",这是因为template标签天生不可见--> <template><div>我是template</div

  • Vue2 模板template的四种写法总结

    如下所示: <div id="app"> <h1>我是直接写在构造器里的模板1</h1> </div> <template id="demo3"> <h1 style="color:red">我是选项模板3</h1> </template> <script type="x-template" id="demo4&qu

  • Vue是怎么渲染template内的标签内容的

    我们在使用Vue做项目时,都会用到脚手架,相应的我们会在template写标签内容.那么你知道为什么会在template写标签吗?这当中经过了怎样的处理呢? <template> <div id="app"> <div id="nav"> </div> <router-view/> </div> </template> <style lang="less"&

  • vue中template的三种写法示例

    第一种(字符串模板写法): 直接写在vue构造器里,这种写法比较直观,适用于html代码不多的场景,但是如果模板里html代码太多,不便于维护,不建议这么写. <!DOCTYPE html> <html> <!-- WARNING! Make sure that you match all Quasar related tags to the same version! (Below it's "@1.7.4") --> <head> &

  • VUE中template的三种写法

    一.直接写在构造器中 <!-- 第一种写法:直接写在构造器里 --> <div id ="app1"> </div> <script> var vm1 = new Vue({ el: '#app1', data: {}, methods: {}, template:`<h3>在构造器中的文字</h3>` }); </script> 二.写在HTML自带的<template>标签中 <!

  • 前端vue中文件下载的三种方式汇总

    目录 前端vue中文件下载的三种方式 附:vue实现图片或文件下载功能实例 总结 前端vue中文件下载的三种方式 第一种方式是前端创建超链接,通过a标签的链接向后端服务发get请求,接收后端的文件流,非常简单: <a :href='"/user/downloadExcel"' >下载模板</a> 另一种情况是创建div标签,动态创建a标签: <div name="downloadfile" onclick="downloadE

  • Angularjs中controller的三种写法分享

    前言 在Angular中,Directive.Service.Filter.Controller都是以工厂方法的方式给出,而工厂方法的参数名对应着该工厂方法依赖的Service.angularjs中controller其实就是一个方法,它有三种写法,下面来一起看看吧. 第一种: <pre name="code" class="javascript">var AppController = ['$scope', function($scope){ $sco

  • C#中单例模式的三种写法示例

    第一种最简单,但没有考虑线程安全,在多线程时可能会出问题,不过俺从没看过出错的现象,表鄙视我-- 复制代码 代码如下: public class Singleton {     private static Singleton _instance = null;     private Singleton(){}     public static Singleton CreateInstance()     {         if(_instance == null)         {  

  • vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)

    目录 前言 一.预览word文件 1.安装 npm 依赖 2.预览在线地址文件 3.预览本地文件 二.预览excel表格 1.安装依赖 2.预览在线表格 三.pdf预览 1.安装依赖vue-pdf 2.在需要的页面注册 3.使用 4.加载本地pdf文件 5.解决pdf使用自定义字体预览和打印乱码问题:pdfjsWrapper.js 总结 前言 之前做PDF预览一直用的pdf.js,这次没有太多附加需求比较简单简,所以决定用vue-pdf这个组件,虽然说它没有原生那样强大,但已经满足常用的需求了,

  • 详解Vue 单文件组件的三种写法

    JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default class Cpn extends Vue{ counter = 0 //data add(){ //methods this.counter += 1 } } TS class写法 @Component export default class Cpn extends Vue{ @Prop(Number) sum : number

  • Vue网络请求的三种实现方式介绍

    Vue网络请求的三种实现方式介绍

    目录 1.XMLHttpRequest发送请求 2.fetch发送请求 3.axios请求库(Vue中推荐写法) 模拟发送get和post请求 网络请求时发送用户认证信息 请求拦截器 响应拦截器 用户管理 在进行 Vue 的网络请求之前,我们先写一些假数据: users.json: [ { "id": 1, "name": "张三" }, { "id": 2, "name": "李四"

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

  • vue请求数据的三种方式

    请求数据的方式: vue-resource 官方提供的 vue的一个插件 axios fetch-jsonp 一,vue-resource请求数据 介绍:vue-resource请求数据方式是官方提供的一个插件 使用步骤: 1.安装vue-resource模块 cnpm install vue-resource --save 加--save是为了在package.json中引用,表示在生产环境中使用.因为我们在日常开发中,如果我们要打包代码给其他人或者上传到github,又或者要发布代码时,pa

随机推荐