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. Inno Setup Winfrom 打包工具

    1.下载并安装Inno Setup 编译器 2.安装完成后打开Inno Setup 编译器: 3.选择[用「脚本向导」创建新的脚本文件(S)]: 4.点击[下一步]: 5.填写制作后程序的基本信息: ...

  2. 【tarjan+拓扑】BZOJ3887-[Usaco2015 Jan]Grass Cownoisseur

    [题目大意] 给一个有向图,然后选一条路径起点终点都为1的路径出来,有一次机会可以沿某条边逆方向走,问最多有多少个点可以被经过?(一个点在路径中无论出现多少正整数次对答案的贡献均为1) [思路] 首先 ...

  3. 【费用流】BZOJ1927-[Sdoi2010]星际竞速

    [题目大意] 有一些点,它们之间存在一些有向边(由编号小的到编号大的),从一点到另一点消耗时间为边长.也可以消耗Ti时间直接抵达任意一个点.问所有点都走一遍最少需要多少时间? [思路] ①将每个点i拆 ...

  4. EMGU 2.9.X在VS2010下调试真正靠谱的配置

    emgu有多强大或者干什么的网上找资料吧.这里就说说我在2010下的配置的经历. 在网上找了很多资料,有细节到一步一步的,但我跟着弄还是没有成功.比如修改cpu,复制emgu的bin目录下某些所需文件 ...

  5. poj 1733 并查集+hashmap

    题意:题目:有一个长度 已知的01串,给出多个条件,[l,r]这个区间中1的个数是奇数还是偶数,问前几个是正确的,没有矛盾 链接:点我 解题思路:hash离散化+并查集 首先我们不考虑离散化:s[x] ...

  6. Mac下配置Idea的Maven

    环境版本: Mac OS: 10.13.4 JDK: 1.8 Idea: 2018.3 Maven: 3.6.0 Maven 相关配置: Maven 下载: http://maven.apache.o ...

  7. [转]jquery加载页面的方法(页面加载完成就执行)

    jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别.   1.$(function(){ $("#a&q ...

  8. 使用牛顿迭代法和二分法求解一个数的平方根（python语言实现）

    #牛顿迭代法 def sqrt1(x): y = 1.0 while abs(y * y - x) > 1e-6: y = (y + x/y)/2 return y #使用二分法 def sqr ...

  9. IIS发布站点错误收集

    转载:http://www.cnblogs.com/hangwei/p/4249406.html 本文主要收集IIS在发布站点过程中遇到的错误,并提供解决办法.并亲测可行.如果您也在使用IIS发布站点 ...

  10. TSL / SSL

    参考: http://www.ruanyifeng.com/blog/2014/09/illustration-ssl.html http://www.tuicool.com/articles/IJ3 ...