(五)Vue模板

作者: 我拥抱着我的未来 | 来源:发表于2018-02-15 10:04 被阅读0次

(五)Vue模板
仿Nuxt.js的vue-cli多页面配置
vsCode 快速生成vue模板
Vue初学-模板语法
vue开发组件设置*.vue文件模板
9、Vue组件
vue面试题大全
vscode 自定义片段 snippet
NativeScript
🎩vue核心原理---vue三要素之响应式

本节知识点

模板的三种形式

模板的第一种形式

写在构造器里

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"内部构造模板",
            styleobj:{
                fontSize:"26px",
                color:"red"
            }
        },
        template:`<p :style='styleobj'>{{message}}</p>`
    })
</script>
</html>

这里要特别注意的就是template是``而不是单引号

写在template标签里的模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--第二种开始-->
<div id="app2">

</div>
<template id="div2">
    <h2 style="color:red;">{{message}}</h2>
</template>
<!--第二种结束-->
</body>
<script>
    var app2 = new Vue({
        el:"#app2",
        data:{
            message:"第二次标签模板"
        },
        template:"#div2"
    })
</script>
</html>

第三种利用script 标签里面的模板

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

  <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--第三种开始-->
<div id="app3">

</div>
<script type="x-template" id="demo3">
    <h2 style="color:red">{{message}}</h2>
</script>
<!--第三种结束-->
</body>
<script>
    var app3 = new Vue({
        el:"#app3",
        data:{
            message:"第三次标签模板"
        },
        template:"#demo3"
    })
</script>
</html>