一、直接写在选项里的模板

直接在构造器里的template选项后边编写。这种写法比较直观,但是如果模板html代码太多,不建议这么写。

javascript代码:

var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:`
<h1 style="color:red">我是选项模板</h1>
`
})

这里需要注意的是模板的标识不是单引号和双引号,而是,就是Tab上面的键。

二、写在<template>标签里的模板

这种写法更像是在写HTML代码,就算不会写Vue的人,也可以制作页面。

   <template id="demo2">
<h2 style="color:red">我是template标签模板</h2>
</template> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo2'
})
</script>

三、写在<script>标签里的模板

这种写模板的方法,可以让模板文件从外部引入。

   <script type="x-template" id="demo3">
<h2 style="color:red">我是script标签模板</h2>
</script> <script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
},
template:'#demo3'
})
</script>

这节课我们学习了Template的三种写法,以后学习到vue-cli的时候还会学到一种xxx.vue的写法。

来源:http://jspang.com/2017/03/14/vue2_02/

vue中Template 制作模版的更多相关文章

  1. vue中template的三种写法

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

  2. Template 制作模版

    直接写在选项里的模板 直接在构造器里的template选项后边编写.这种写法比较直观,但是如果模板html代码太多,不建议这么写. var vm = new Vue({ el:"#app&q ...

  3. vue中template的作用及使用

     先来看一个需求:下图div用v-for做了列表循环,现在想要span也一起循环,应该怎么做? 有3种方法可以实现 ①:直接用v-for对span也循环一次(该方法虽然可以使用,但不要用这种方式,因为 ...

  4. 关于vue中tamplate和DOM节点浅谈

    前言:在开发前段页面使用vue时,我们能经常看到template标签.这里粗略讲下自己对vue中template理解和使用. 1. 先了解vue vue.js是一个轻巧.高性能.壳组件画的MVVM库. ...

  5. 【vue】vue中ref用法

    1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...

  6. vue中添加echarts

    方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖.        cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...

  7. vue中插槽作用域的使用

    一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...

  8. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  9. 第七十七篇:ref引用(在vue中引用组件实例)

    好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...

随机推荐

  1. 前端每日实战:49# 视频演示如何用纯 CSS 创作一支诱人的冰棍

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/vrxzMw 可交互视频教程 此视频 ...

  2. 特斯拉通过GitHub发布了这些源代码,用意何在?

    特斯拉多年来一直在软件社区使用开源软件而不遵守许可证. 在迈向合规性的一步中,特斯拉现在正在发布其软件的一些部分,这对特斯拉黑客和安全研究人员来说非常有用. 特斯拉是一家软件强大的公司,它一直在使用大 ...

  3. java通过url调用远程接口返回json数据

    java通过url调用远程接口返回json数据,有用户名和密码验证, 转自 https://blog.csdn.net/wanglong1990421/article/details/78815856 ...

  4. Python3解leetcode Rotate Array

    问题描述: Given an array, rotate the array to the right by k steps, where k is non-negative. Example 1: ...

  5. php pi()函数 语法

    php pi()函数 语法 pi()函数是什么意思? php pi()函数用于获取圆周率值,语法是pi(),这个函数只是单纯的用来获取圆周率值深圳大理石平台 作用:获取圆周率值 语法:pi() 参数: ...

  6. STM32输入捕获TIM2四通道

    相比于一通道,原子的例程里因为清了计数时间,所以要对程序进行修改. 记录上升沿后的计数,然后记录下降沿的计数.相减后计算高电平时间,对于定时器中断间隔的边界要分开处理. 这里因为我的接收机时间是1ms ...

  7. 10.2-linux文件与目录管理

    1.1-目录的相关操作 . rm Remove (unlink) the FILE(s). -f, --force #强制删除 ignore nonexistent files, never prom ...

  8. express中 使用session与cookie

    1.express如何使用session与cookie : https://www.jianshu.com/p/1839e482274e  或  https://www.cnblogs.com/chy ...

  9. 20 October in ss

    Contest A: sum 快速读. B: 鬼谷子的钱袋(coin) 贪心. 按照类似二进制的方式准备钱袋:1, 2, 4, 8, ... 以此装入的钱袋数目记为 \(N\). 如果最后剩余不足以凑 ...

  10. sts bug SpringJUnit4ClassRunner

    SpringJUnit4ClassRunner找不到,不会自动修复, 只能复制引用过去 import org.springframework.test.context.junit4.SpringJUn ...