vue2.0模板的三种写法

vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现1.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"c

mschange

12164人浏览 · 2018-01-25 17:32:22

mschange · 2018-01-25 17:32:22 发布

vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现

<!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>

第一种方法使用与比较少的内容量可以使用它,利用``的方式来实现

<!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>

<!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中就可以了,使用于内容比较多或有公共的模板,可以使用,引入就可以了

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^