vue2.0模板的三种写法
vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现
1.
<!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>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:`
<h1 style="color:red">第一种写法</h1>
`
})
</script>
</html>
第一种方法使用与比较少的内容量可以使用它,利用``的方式来实现
2.
<!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>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
<template id="template">
<h1>我是模板的第二种写法</h1>
</template>
</body>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>
第二种应该是项目中最常见的写法,利用template标签来实现内容的填充,最终通过id或者其他的选择器挂载到template上面,如果用vue-cli,它的模板应该如下面的代码所示
<template>
<!-- 页面的内容 -->
</template>
<script>
/* 页面的js */
</script>
<style scoped>
/* 页面的样式注意:scoped的作用是style中所有的样式只对本页的html起作用*/
</style>
3.
<!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>vue2.0的模板</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
<script type="x-template" id="template">
<h2>我是模板的第三种写法</h2>
</script>
<script type="text/javascript">
var app=new Vue({
el:"#app",
data:{
},
template:"#template"
})
</script>
</html>
这种写法是改变了script中的type.变为type="x-template",并且给它id,最终挂载到template中就可以了,使用于内容比较多或有公共的模板,可以使用,引入就可以了
vue2.0模板的三种写法相关推荐
- vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
- android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...
- JavaScript的三种写法
1.2-JavaScript的三种写法 1-复习CSS代码的三种写法 1.外联样式:写在css文件中,使用link导入 <link rel="stylesheet" href ...
- react如何获取option的下标和值_select选中获取索引三种写法
$('#someId').prop('selectedIndex'); $('option:selected', '#someId').index(); $('#someId option').ind ...
- Python:计算欧氏距离的三种写法
使用列表List作为样本点表示的欧氏距离计算方法: import math # 计算两点之间的距离 def eucliDist(A,B):return math.sqrt(sum([(a - b)** ...
- vue中,scss样式的三种写法——当前页面直接定义、@import引入样式、main.js引入公共样式 deep和important的写法
vue中,scss样式的三种写法--当前页面直接定义.@import引入样式.main.js引入公共样式 & deep和important的写法 1.安装scss # 安装node-sass ...
- Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录 在组件中获取数据 二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性 第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
- 利用swap函数的三种写法
简述: 本节记录一下两个数据进行交换的三种写法. 其中第三中可算有点趣味. A.手写swap 利用我们自己写的swap函数,利用引用来交换. #include<iostream> usin ...
- CSS伪类的三种写法
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code <style> a.tb{text-dec ...
最新文章
- Case study:数据库网页构建原理和实践
- quicklook不能预览office_万物皆可格!给空格键施加神奇魔法的神器软件—快速预览工具QuicklookPC软件...
- Oracle10g中安装Perl环境所产生的冲突
- 两字典(dict)组合(重复键进行加法)一行命令实现Python
- python排序链表_合并K个排序链表
- ISSET_SE 错误异常
- 【模板】可持久化线段树
- 专属于程序猿的成语,进来看,进来笑!
- 电脑中了“魔鬼波”病毒 冲击波补丁
- textbox提示文字属性_《我来自江湖》MUD类武侠题材多样性玩法的单机文字游戏...
- BOM展开BAPI(标准BOM、销售BOM、WBS BOM)
- 博图在线升级 gsd_《阴阳师妖怪屋》如何快速提升式神等级 式神快速升级方法大放送|阴阳师妖怪屋|如何-360GAME...
- angular: 代码正确的情况下npm不断提示 TS2307: Cannot find module XXX , TS2305: Module XXX has no exported member
- 手机百度浏览器ua标识在哪里_浏览器标识(ua)的那些事
- 基于linux下QT象棋,课内资源 - 基于QT实现的网络象棋游戏
- python: reverse reversed 函数
- MySQL数据库学习笔记(2)
- Ubuntu下包含2种远程桌面的方式:VINO-Server以及VNC Server
- “第四届中国汽车网络信息安全峰会2019” (ACSS2019) 即将召开
- 前端 vue 制作一个日历(一)
热门文章
- html让底部文字居中,网站底部版权居中-html css怎么让文字在页面底部居中
- 复化梯形求积公式 c语言实现 数值积分
- 关于站内信的开发思路
- git push 报错 error: failed to push some refs to ‘git@xxx/xx.git‘
- guzzle/guzzle 日常使用
- 6.1 Verbatim环境
- 如果不想渲染,保持原样,verbatim
- java utc时间_Java获取UTC时间的方法
- 天翼云服务器硬盘怎么挂载,用s3fs挂载天翼OOS到服务器
- java培训班值得去吗?