Vue中的三种模板

谁借莪１个温暖的怀抱￠ 2022-05-20 04:17 279阅读 0赞

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

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>