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. WPF TreeGrid的一种简单实现

    前几天,各种坑爹的情况,导致不得不自己去动手实现带层级关系的Grid.之后翻了翻书,貌似说msdn和codeproject上有这么个例子,叫做TreeListView.这里就简单说下自己的思路,也许有 ...

  2. BZOJ3052 [wc2013] 糖果公园 【树上莫队】

    树上莫队和普通的序列莫队很像,我们把树进行dfs,然后存一个长度为2n的括号序列,就是一个点进去当作左括号,出来当作右括号,然后如果访问从u到v路径,我们可以转化成括号序列的区间,记录x进去的时候编号 ...

  3. 【坐标变换】【二维偏序】【线段树】Gym - 100820G - Racing Gems

    题意:第一象限有n个点,你从x正半轴任选一个位置出发,vy恒定,vx可以任意变化,不过只能在-vy/r到vy/r之间变化,问你最多能经过多少个点. 暴力dp是n^2,不可取. 注意到,一个点,所能到达 ...

  4. WEB架构师成长之路 二

    法宝一:牛人爱惜自己的时间. 时间就是金钱,时间就是生命,时间如同健康一样,如果时间都没有,那成功也就是浮云了.所以牛人总是很爱惜自己的时间,总是在想办法提高自己的做事效率.我突然想了起来,我QQ里有 ...

  5. Java的运行机制概括

    这次随笔主要记录一下我对Java的平台无关性一些新的理解,以前只知道是Java是一门很容易跨平台的语言,正如 "Compile once, run anywhere" 这句话,也知 ...

  6. 中国剩余定理 hdu 3579

    HDU 3579 Hello Kiki Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  7. Elasticsearch - java客户端连接

    写在前面的话:读书破万卷,编码如有神-------------------------------------------------------------------- 最简单的在java客户端连 ...

  8. Spring JavaConfig @Import实例

    一般来说, 需要按模块或类别 分割Spring XML bean文件 成多个小文件, 使事情更容易维护和模块化. 例如, <beans xmlns="http://www.spring ...

  9. 源码分析：动态分析 Linux 内核函数调用关系

    源码分析:动态分析 Linux 内核函数调用关系 时间 2015-04-22 23:56:07  泰晓科技 原文  http://www.tinylab.org/source-code-analysi ...

  10. jsp动态导航栏

    站点页面的导航栏是从数据库中生成出来的,所以在界面上展示导航栏时,要从数据库中读取出来,但不能每次显示一个页面都从数据库中读.这样就非常浪费性能.应该考虑把导航栏放到一个缓存中.如:session.a ...