Vue中的三种模板

因为现在学的还比较基础，总结的也都是一些基础的东西，主要还是把学过的东西回顾一下，整理到一起，方便以后回头看，所以仅适合初学者哈

1、html模板：

html模板：基于DOM的模板，模板都是可解析的有效的HTML
插值：

文本：使用{{}}语法，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html：双大括号输出的是文本，不会解析html（想要解析html，可以使用指令v-html）
属性:使用v-bind进行绑定，可以响应变化
使用JavaScript表达式：写简单的表达式

<div id="wrap">
    <p>你的名字是{{list.name}}</p>
</div>
<script>
    var list = {
        name:"donna",
        age:20
    }
    var vm = new Vue({
        el:"#wrap",
        data:{list}
    });
</script>

2、字符串模板
template选项对象的属性
模板将会替换挂载的元素。挂载元素的内容都将被忽略
根节点只能有一个

将html结构写在一对script标签中，设置type="x-template"

<div id="wrap">

</div>
<script type="x-template" id="app">
    <div>
        <p>你的名字是{{list.name}}</p>
    </div>
</script>
<script>
    var list = {
        name:"donna",
        age:20
    }
    var vm = new Vue({
        el:"#wrap",
        data:{list},
        template:"#app"
    });
</script>

3、模板-render函数
render函数
render 选项对象的属性
createElement(标签名,[数据对象],子元素)//子元素为数组或对象

数据对象属性

class:{},//绑定class
style:{};//绑定样式，
attrs:{};//添加行间属性
domProps:{}//DOM元素属性
on:{}//绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./src/vue.js"></script>
    <style>
        .bg{background:yellowgreen;}
    </style>
</head>
<body>
<div id="wrap">
    <p>你的名字是{{list.name}}</p>
</div>
<script>
    var list = {
        name:"donna",
        age:20
    }
    var vm = new Vue({
        el:"#wrap",
        data:{list},
        render(createElement){
            return createElement(
                "ul",
                {
                    class:{bg:true},
                    style:{listStyle:"none"},
                    attrs:{
                        name:"donna"
                    }
                },
                [
                    createElement("li","aaaaaa"),
                    createElement("li","bbbbbb"),
                    createElement("li","cccccc")
                ]
            )

        }
    });
</script>
</body>
</html>

猜你喜欢