1. 选项模板

2. template模板

3. script标签模板

 <!-- 选项模板 -->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Vue入门之组件</title>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

     </div>

     <script type="text/javascript">

         // 实例化

         new Vue({

             el: '#app',

             data: {

                 message: 'hello'

             },

             template: `<h1 style="color:red">我是选项模板</h1>`

         });

     </script>

 </body>

 </html>
 <!-- template模板 -->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

         <template id="demo2">

             <h2 style="color:red">我是template标签模板{{message}}</h2>

         </template>

     </div>

     <script type="text/javascript">

         // 实例化

         new Vue({

             el: '#app',

             data: {

                 message: 'hello'

             },

             template: '#demo2'

         });

     </script>

 </body>

 </html>
 <!-- script标签模板 -->

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 </head>

 <body>

     <div id="app">

     </div>

     <script type="x-template" id="demo3">

         <h2 style="color:red">我是script标签模板</h2>

     </script>

     <script type="text/javascript">

         // 实例化

         new Vue({

             el: '#app',

             data: {

                 message: 'hello'

             },

             template: '#demo3'

         });

     </script>

 </body>

 </html>

vue - 制作模板的更多相关文章

  1. Vue2.0 【第二季】第5节 Template制作模板

    目录 Vue2.0 [第二季]第5节 Template制作模板 第5节 Template制作模板 一.直接写在选项里的模板 二.写在template标签里的模板 三.写在script标签里的模板 Vu ...

  2. 前端框架之Vue(2)-模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  3. Vue：模板&渲染函数学习

    模板&渲染函数区别: 1.代码量:模板代码重复逐行拼写,渲染函数可以迭代拼接方式实现重复代码. 2.函数式组件中应用:基于模板的函数式组件需要手动添加特性和事件,给予渲染函数的函数是组件使用c ...

  4. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  5. vue基础——模板语法

    模板语法介绍 Vue.js使用了基于HTML的模板语法,允许开发者声明式地将dom绑定至底层Vue实例的数据.所有Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析. ...

  6. vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

    vue文件模板 模板变量 https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables vue.json { // ...

  7. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  8. Vue.js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

  9. VUE：模板语法（小白自学）

    VUE:模板语法 一:何为声明式 安装规定的语法,去实现一些效果(不需要管流程). 二:模板语法 <!DOCTYPE html> <html> <head> < ...

随机推荐

  1. FastReport.Net使用：[8]交叉表一

    1.绘制报表标题,交叉表可以直接放在标题栏内. 2.拖动一交叉表控件到标题栏内. 3.设置交叉表的行列信息. 将Tabel中的[科室名称]列拖到交叉表的列上以创建列,将Tabel中的[姓名]列拖到交叉 ...

  2. JZYZOJ1540 BZOJ4035 [ haoi2015 上午] T3 博弈论 sg函数 分块 haoi

    http://172.20.6.3/Problem_Show.asp?id=1540 之前莫比乌斯反演也写了一道这种找规律分块计算的题,没觉得这么恶心啊. 具体解释看代码. 翻硬币的具体方法就是分别算 ...

  3. bzoj4144 [AMPPZ2014]Petrol

    link 题意: 给一个n个点m条边的带权无向图,其中k个点是加油站,每个加油站可以加满油,但不能超过车的油量上限.有q个询问,每次给出x,y,b,保证x,y都是加油站,问一辆油量上限为b的车从x出发 ...

  4. windows远程连接Ubuntu12.04 （Ubuntu14.0连接方式不一样）

    参考 http://www.cnblogs.com/jerome-rong/archive/2012/08/16/2642035.html 有两种方式:Vnc方式(优缺点)和xrdp模式 中提到的Vn ...

  5. hdu 4802 GPA 水题

    GPA Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4802 Des ...

  6. CentOS 6.9开启iptables的日志实现调试

    系统日志配置在CentOS 5上叫syslog,而在CentOS 6上叫rsyslog(增强版的syslog),CentOS 5上的配置文件在/etc/syslog.conf下,而CentOS 6在/ ...

  7. SEAndroid安全机制简要介绍和学习计划

    与iOS相比.Android最被人诟病的是其流畅性和安全性. 然而,从4.0開始,Android不遗余力地改善其流畅性. 特别是在即将公布的L版本号中,用ART替换了Dalvik,相信会越来越流畅.至 ...

  8. TortoiseSVN解决冲突

    解决冲突Resolving Conflicts有时候,你从仓库更新文件时会发生一些冲突.当两个或更多开发人员对同一个文件的某几行做 了修改,就会产生冲突.因为Subversion对你的项目一无所知,他 ...

  9. uva 784 Maze Exploration(简单dfs)

    这道题看上去非常麻烦,什么迷宫啊.门之类的,事实上挺简单的,就是让把与 * 连通的都置为 # 包含 * , 直接dfs就能够了,只是我wa了好多次...最后居然是多读了一个换行.忘了加getchar( ...

  10. Virtualbox虚拟机安装CentOS 6.5图文详细教程

    http://blog.csdn.net/risingsun001/article/details/37934975