1.template标签(非单文件组件)

<template id="t1">
<h2>66666666</h2>
</template> <script>
new Vue({
template: '#t1'
})
</script>

2.template标签单页面组件

和上面一样用<template></template>,由于有vue-loader编译不需要在手动在选项template上加‘#t1’之类的

3.反单引号

<script>
new Vue({
template: `
<div>
<h2>2333</h2>
</div>
`
})
</script>

4.script标签(type="x-template")

<script type="x-template" id="tem">
<h2>我是古天乐~<div>666</div></h2>
</script> <script>
new Vue({
template:'#tem'
})
</script>

vue写template的4种形式的更多相关文章

  1. vue中template的三种写法

    第一种(使用模板字符串)早期字符串拼接年代 <div id="app"></div> new Vue({ el: "#app", tem ...

  2. ASP.NET MVC深入浅出(被替换) 第一节: 结合EF的本地缓存属性来介绍【EF增删改操作】的几种形式 第三节: EF调用普通SQL语句的两类封装(ExecuteSqlCommand和SqlQuery ) 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法 第六节: EF高级属性(二) 之延迟加载、立即加载、显示加载(含导航属性) 第十节: EF的三种追踪

    ASP.NET MVC深入浅出(被替换)   一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态 ...

  3. vue实现复制粘贴的两种形式

    方式一: 1.安装clipboard:npm install clipboard 2.src/utils/clipboard.js import Vue from 'vue' import Clipb ...

  4. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  5. 一字一句的搞懂vue-cli之vue webpack template配置

    webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...

  6. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  7. Vue基础01vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  8. Vue创建组件的三种方式

    1.使用 Vue.extend 来创建全局的Vue组件 <div id="app"> <!-- 如果要使用组件,直接,把组件的名称,以 HTML 标签的形式,引入 ...

  9. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

随机推荐

  1. Servlet 3.0对上传的支持

    Servlet 2.5 进行上传   首先对表单的要求     ->method ="post"    ->enctype="multipart/form-d ...

  2. 一个web项目中间的团队管理

    一个web项目中间的团队管理     最近在参加一个比赛,我们选的题目是:MOOC大型网络在线课堂.这个题目是我们五个人都想做的,我们的成员都是志同道合的五个人.   作为团队的统率者:   定义规范 ...

  3. Leetcode题库——17.电话号码的字母组合

    @author: ZZQ @software: PyCharm @file: letterCombinations.py @time: 2018/10/18 18:33 要求:给定一个仅包含数字 2- ...

  4. Leetcode题库——4.寻找两个有序数组的中位数

    @author: ZZQ @software: PyCharm @file: findMedianSortedArrays.py @time: 2018/10/10 19:24 说明:给定两个大小为 ...

  5. The last time the sprint(最后一个冲刺)

    经过一两个月的努力,我们终于是做出来了一点东西,从一开始接触这个项目开始,从完全不知道怎么去入手到跌跌碰碰,再到现在可以拿出来一点东西给别人看,我觉得很开心,或许我的这个成品在别人眼中并不算是什么,但 ...

  6. Week2-作业1 《构建之法》1、2、16章观后感

    这几天阅读了<构建之法>中的几章,受益匪浅,刷新了很多我对软件工程的认知.这本书让我很惊喜,阅读起来不像其他书一样枯燥,有很多人物的设计,以及对话的形式,非常有趣. 第一章.概述 读完第一 ...

  7. WordCount程序实现

    程序功能: 统计出文件中文本的行数,每行字符数.单词数,文本空行数,文本总字符数.总单词数并显示. 使用方法: 1.在电脑中建立文本

  8. 数据库:XML,解析Dom4J

    package com.itheima.util; import java.io.FileOutputStream; import java.net.URL; import org.dom4j.Doc ...

  9. Socket 记录

    心跳检测步骤:1客户端每隔一个时间间隔发生一个探测包给服务器2客户端发包时启动一个超时定时器3服务器端接收到检测包,应该回应一个包4如果客户机收到服务器的应答包,则说明服务器正常,删除超时定时器5如果 ...

  10. php单例模式 (转

    假设我们需要写一个类用来操作数据库,并同时满足以下要求: ①SqlHelper类只能有一个实例(不能多)②SqlHelper类必须能够自行创建这个实例③必须自行向整个系统提供这个实例,换句话说:多个对 ...