指令+模板

時間 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形式渲染