vue模板

2017-08-14 本文已影响41人饥人谷_米弥轮

HTML模板
1.可以使用javascript的简单表达式

 <body>
     <div id="app">
         {{ ture? "yes":"no" }}
         {{ message }}
     </div>
     <script src="../vue.js"></script>
     <script>
         // 数据
         let data = 'hello,miao';

         var vm = new Vue({
             el:'#app',
             data:{
                 message:data
             }
         })
     </script>
 </body>

字符串模板
1.template对象属性
2.模板会替代挂载的元素
3.根节点只能有一个
4.将html结构写在一对script表现中，type="x-template"

 <body>
     <div id="app">
         {{ message }}
     </div>
     <script src="../vue.js"></script>
     <!-- <script type="x-template" id="temp">
         <div>hello,张三<span>,李四</span></div>
     </script> -->
     <script>
         // 数据
         let data = 'hello,miao';

         // 第一种写法
         let str = `<div>hello,张三<span>,李四</span></div>`              
         var vm = new Vue({
             el:'#app',
             data:{
                 message:data
             },
             template:str
         })

         // 第二种写法
         // var vm = new Vue({
         //     el:'#app',
         //     data:{
         //         message:data
         //     },
         //     template:‘#temp’
         // })
     </script>
 </body>

render函数模板

image.png

<body>
    <div id="app">
        
    </div>
    <script src="../vue.js"></script>
    <script>
        let data = true;

        var vm = new Vue({
            el:'#app',
            data:{
                message:data
            },
            render(createElement){
                return createElement(
                    "ul",
                    {
                        class:{
                            red:data
                        },
                        style:{
                            backgroundColor:'yellow'
                        },
                        attrs:{
                            miaowei:"123"
                        },
                        domProps:{  //操作DOM属性，使用这个属性就不再使用createElement创建子元素
                            innerHTML:"<li>我是HTML</li>"
                        }
                    },
                    [
                        createElement("li",1),
                        createElement("li",2),
                        createElement("li",3),
                    ]
                );
            }
        })
    </script>
</body>

vue模板

猜你喜欢

热点阅读