指令+模板

时间 2019-11-19

标签指令模板繁體版

原文原文链接

指令：html

　　v-bind：class = “className”vue

　　v-test ：更新数据dom

　　v-show : 根据值得真假函数

　　v-else-if :多条件判断ui

　　v-for :基于源数据进行屡次渲染spa

　　v-pre ：跳过元素和子元素的编译过程htm

　　v-cloak :隐藏未编译的mustache语法， class中设置 v-cloak { display:none }对象

　　v-on :绑定事件监听事件

　　v-html ：能够解析数据中html结构ip

　　v-modle :在表单控件元素上建立双向数据绑定

　　v-once ：只能渲染一次

　　v-if :

　　v-else ：

模板：

　　render函数

　　eg:1
　　var vm = new Vue({
   　　 el:"#demo",
   　　 data:obj,
  　　  //template:str,
  　　  render(createElement){ //render函数
      　　 return  createElement(
               "ul",
               [
                   createElement("li","内容111"),
                   createElement("li","内容222"),
                   createElement("li","内容333"),
                   createElement("li","内容444"),
               ]
    　　 )
    },

　　　　eg:2

    <style>
        .bg { background-color: bisque; width:300px; }
    </style>
</head>
<body>
    <div id="demo"></div>

    <script src="vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#demo",
            //createElement(标签名，[数据对象]，子元素)
            //数据对象的属性
            /*
            * class:{}, stayle:{}, attrs:{}添加行间属性 ， domProps:{} dom元素属性
            * 下面的跟组件有关系的操做
            * nativeOn:{}监听原生事件，  scopedSlots:{} slot做用域,   on:{} 绑定事件，
            * key:"key" 给元素加惟一标示， slot:{} 定义slot名称 ，   ref:"ref" 引用信息
            * */
            render(createElement){
                return createElement(
                    "ul",
                    {
                        class:{
                            bg:true
                        },
                        style:{
                            fontSize:"22px"
                        },
                        attrs:{ //自定义属性
                            a:"miao"
                        },
                        domProps:{ //dom ,改变ul里面的结构，下面建立的标签就都无用了
                            //innerHTML:"<li>我是html</li>"
                        },
                        
                    },
                    [
                        createElement("li",1),
                        createElement("li",1),
                        createElement("li",1),
                    ]
                )

            }

        })
    </script>

　　html模板

　　　字符串模板： template

　　　　eg:

<div id="demo">
    <!--<div v-bind:class="id"> {{ msg }} </div>-->
    <!--<p v-html="html"></p>-->
    <span>miaov</span>
</div>

<script src="vue.min.js"></script>
<script>
    //数据
    let obj = {
        msg : "hello",
        id:"123",
        //html:"<p>标签不解析出来，标签上加 v-html="html"就好</p>",
        dd:"xianghui"
    }
    var str = "<div>hello:{{ dd }}</div>"
    var vm = new Vue({
        el:"#demo",
        data:obj,
        template:str,    //template:"#id",  scriot形式渲染

    })
</script>