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. java实验2实验报告(20135232王玥)

    实验二 Java面向对象程序设计 一.实验内容 1. 初步掌握单元测试和TDD 2. 理解并掌握面向对象三要素:封装.继承.多态 3. 初步掌握UML建模 4. 熟悉S.O.L.I.D原则 5. 了解 ...

  2. 20135313-exp1

    北京电子科技学院(BESTI) 实     验    报     告 课程:Java程序设计 班级:1353 姓名:吴子怡 学号:20135313 成绩:            指导教师:娄嘉鹏  实 ...

  3. MySQL课堂练习 20162315

    练习内容 1.参考教材相关代码,提交能连接到world的截图(有学号水印) 2.查询world数据库,获得人口超过500万的所有城市的列表. 3.查询world数据库,获得New Jersey州所有城 ...

  4. DPDK实例程序:testpmd

    用户手册:https://doc.dpdk.org/guides/testpmd_app_ug/index.html 还不错的入门:http://syswift.com/188.html 我的运行情况 ...

  5. windows和RedHat双系统安装说明

    该博客记录了安装windows和RedHat双系统的方法.这里的windows系统是win8.1,RedHat是RHEL-server-7.0-x86_64-LinuxProbe.Com.iso,该i ...

  6. Gradle入门(1):安装

    在Ubuntu下,执行以下命令: sudo apt-get install gradle 安装完成后,执行命令: gradle -v 得到以下信息: Picked up _JAVA_OPTIONS:  ...

  7. Linux限制cpu睿频&限制频率

    .关闭睿频 > /sys/devices/system/cpu/intel_pstate/no_turbo .限制CPU最大频率到50% " | sudo tee /sys/devic ...

  8. Linux内核0.11 makefile文件说明

    # # if you want the ram-disk device, define this to be the # size in blocks. # 如果要使用 RAM 就定义块的大小(注释掉 ...

  9. [cnBeta]阿里云推出全栈IPv6解决方案 加速推进下一代互联网应用

    https://www.cnbeta.com/articles/tech/795695.htm 访问: 阿里云 - 最高1888元通用代金券立即可用 作为国内首个全面支持IPv6的云厂商,过去5个月, ...

  10. IPV6 简单验证

    1. 网络路由器的分类 .通常将网络中直接面向用户连接或访问网络的部分称为接入层,接入层目的是允许终端用户连接到网络,因此接入层交换机具有低成本和高端口密度特性: .将位于接入层和核心层之间的部分称为 ...