vue中Template 制作模版
一、直接写在选项里的模板
直接在构造器里的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 制作模版的更多相关文章
- vue中template的三种写法
第一种(使用模板字符串)早期字符串拼接年代 <div id="app"></div> new Vue({ el: "#app", tem ...
- Template 制作模版
直接写在选项里的模板 直接在构造器里的template选项后边编写.这种写法比较直观,但是如果模板html代码太多,不建议这么写. var vm = new Vue({ el:"#app&q ...
- vue中template的作用及使用
先来看一个需求:下图div用v-for做了列表循环,现在想要span也一起循环,应该怎么做? 有3种方法可以实现 ①:直接用v-for对span也循环一次(该方法虽然可以使用,但不要用这种方式,因为 ...
- 关于vue中tamplate和DOM节点浅谈
前言:在开发前段页面使用vue时,我们能经常看到template标签.这里粗略讲下自己对vue中template理解和使用. 1. 先了解vue vue.js是一个轻巧.高性能.壳组件画的MVVM库. ...
- 【vue】vue中ref用法
1.获取当前元素: 例子: <div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'p ...
- vue中添加echarts
方法一:全局引入echarts 步骤: 1.全局安装 echarts依赖. cnpm install echarts -- save 2.引入echarts模块,在Vue项目的main. ...
- vue中插槽作用域的使用
一.插槽作用域 1.简单来说就是带参数的插槽: 2.使用方式: 在组件标签内部加一个template标签 在template标签上加一个属性scope 值随意书写 在组件内部用slot进行接受,如果给 ...
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- 第七十七篇:ref引用(在vue中引用组件实例)
好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...
随机推荐
- 并行流水线--求 (B+C)*B/2
public class Msg { public double i; public double j; public String orgStr = null; } import java.util ...
- ruby语法之方法
ruby中的方法相当于python的函数 其定义规则为: 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常量,从而导致不正确地解析调用. 方法应在调用之前定义,否则 ...
- vue项目放在IE上页面空白的问题
Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码 1.npm install babel-polyfill --save 2.main.js中引入 import 'babel-poly ...
- Python爬虫之抓图
从"百度图片(http://image.baidu.com/)"的首页下载图片 # -*- coding: utf-8 -*- import urllib import re im ...
- 深度学习中的batch、epoch、iteration的含义
深度学习的优化算法,说白了就是梯度下降.每次的参数更新有两种方式. 第一种,遍历全部数据集算一次损失函数,然后算函数对各个参数的梯度,更新梯度.这种方法每更新一次参数都要把数据集里的所有样本都看一遍, ...
- 计算机网络体系之OSI模型
1.计算机网络体系结构 计算机网络体系结构指的是计算机网络层次模型和各层协议的集合.计算机网络按照高度结构化设计方法采用功能分层原理来实现. 2.OSI模型 网络协议是计算机网络必不可少的,一个完整的 ...
- JS中的立即执行函数
JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...
- scipy与sklearn下载与安装
一.scipy下载与安装 scipy下载地址:http://www.lfd.uci.edu/~gohlke/pythonlibs/#opencv提供各种包whl文件 下载之后放到Scripts文件中 ...
- 新建工程spring boot
新建工程spring boot 使用Maven管理, 在官网(http://atart.spring.io)下载demo后,加入依赖 <dependency> <gr ...
- cnn模型
https://blog.csdn.net/qq_26591517/article/details/79805884