首頁 > web前端 > js教程 > 主體

Vue.js的組件和模板詳解

小云云
發布: 2018-01-20 09:46:43
原創
2169 人瀏覽過

指令是Vue.js中一個重要的特性, 主要提供了一個機制將資料的變化映射為DOM行為。以下透過本文來跟大家分享Vue.js的元件和模板,需要的朋友參考下吧,希望能幫助大家。

摘要:

指令是Vue.js中一個重要的特性, 主要提供了一個機制將資料的變化映射為DOM行為。 那什麼交數據的變化映射為DOM行為, Vue.js是透過資料驅動的, 所以我們不會直接去修改DOM結構, 不會出現類似$('ul').append('

  • one< /li>')這樣的操作, 當資料變化時,指令會一句設定好的操作對DOM進行修改, 這樣就可以只關注資料的變化, 而不用去管理DOM的變化和狀態,

    Vue的內建指令

    1. v-bind

    v-bind主要用於綁定DOM元素屬性(attribute),

    即元素屬性實際的值是有vm實例中的data屬性提供的。

    例如:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue的指令</title>
      <script src="../vue.js"></script>
    </head>
    <body>
    <!-- HTML模版 -->
    <p id="demo">
      <span v-bind:cutomId="id">{{message}}</span>
    </p>
    <script>
      //数据
      let obj ={
        message:"Hello World",
        id:'123'
      };
     //声明式渲染
      var vm = new Vue({
        el:'#demo',
        data:obj  });
    </script>
    </body>
    </html>
    登入後複製

    v-bind可以簡寫為“:”,

    上述範例可以簡寫為

    實現效果如下:

     

    2. v-on

    綁定事件監聽器,簡寫為@。

    昨天我們也用過,我們簡寫一下看一下效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue的指令</title>
      <script src="../vue.js"></script>
    </head>
    <body>
      <!-- HTML模版 -->
      <p id="demo">
        <span @click="clickHandle">{{message}}</span>
      </p>
      <script>
        //数据
        let obj = {
          message:"hello Vue"
        };
        //声明式渲染
        var vm = new Vue({
          el:"#demo",
          data:obj,
          methods:{
            clickHandle(){
                alert("click")
                }
          }
        });
      </script>
    </body>
    </html>
    登入後複製

    效果如下:

    ##3.v-html

    v-html,參數類型為string,

    作用為更新innerHTML,

    接受的字串不會進行編譯等操作,

    #按普通HTML處理

    程式碼如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Vue的指令</title>
      <script src="../vue.js"></script>
    </head>
    <body>
    <!-- HTML模版 -->
    <p id="demo" v-html="HTML"></p>
    <script>
      //数据
      let obj = {
        HTML:"<p>Hello World</p>"
      };
      var vm = new Vue({
        el:"#demo",
        data:obj  })
    </script>
    </body>
    </html>
    登入後複製
    實作效果如下

    #更多內建指令請查詢官網:Vue.js指令

    模板

    html模板

            基於DOM的模板,模板都是可解析有效的html

    插值

    文字:使用「Mustache」語法(雙大括號){{value}}

        作用:取代實例上的屬性值,

        當值改變時,內插內容會自動更新

    #原生的html:雙大括號輸出的是文本,不會解析html

    屬性:使用v-bind進行綁定,可以回應變化

    #使用JavaScript表達式:可以寫簡單的表達式

    字串範本

    template字串

            template選項物件的屬性

            以範本將取代掛在元件中。掛在元素的內容都會被忽略。

    程式碼如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>template模板</title>
      <script src="../vue.js"></script>
    </head>
    <body>
      <!--HTML模板-->
      <p id="demo"></p>
      <script>
        //数据
        let obj = {
          html:"<p>String</p>",
          abc:1
        };
        var str = "<p>Hello</p>";
        var vm = new Vue({
          el:"#demo",
          data:obj,
          template:str    })
      </script>
    </body>
    </html>
    登入後複製
    有木有發現什麼驚奇的變化

            根節點只能有一個

    #將html結構寫在一對script標籤中,設定type="X-template"

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>template模板</title>
      <script src="../vue.js"></script>
    </head>
    <body>
      <!--HTML模板-->
      <p id="demo">
        <span>vue</span>
      </p>
      <script type="x-template" id="temp">
        <p>
          Hello,{{abc}},
          <span>sunday</span>
        </p>
      </script>
      <script>
        //数据
        let obj = {
          html:"<p>String</p>",
          abc:1
        };
        var vm = new Vue({
          el:"#demo",
          data:obj,
          template:"#temp"
        });
      </script>
    </body>
    </html>
    登入後複製
    實作效果如下:

    ##寫在script標籤中,還是比較局限,

    如果別的檔案也是這個結構的時候,

    這個就不能重複使用。

    模板render函數

    render函數

      render 選項物件的屬性

      createElement(標籤名稱,{資料物件},[子元素]);

      子元素為文字或陣列

    我們還是來一段程式碼示範

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>render函数</title>
      <script src="../vue.js"></script>
      <style type="text/css">
        .bg{
          background: #ee0000;
        }
      </style>
    </head>
    <body>
      <p id="demo"></p>
      <script>
        //数据
        let obj = {
        };
        var vm = new Vue({
          el:"#demo",
          data:obj,
          render(createElement){
            return createElement(
              //元素名
              "ul",
              //数据对象
              {
                class:{
                  bg:true
                }
               },
              //子元素
              [
                createElement("li",1),
                createElement("li",2),
                createElement("li",3)
              ]
            );
          }
        })
      </script>
    </body>
    </html>
    登入後複製

    實作效果如下

    ##關於資料物件屬性,講情請參考官網的例子。

    相關推薦:


    Vue.js元件通訊實例分享

    關於Vue.js元件中通訊的問題

    什麼是Vue.js元件? Vue.js元件用法總結

    以上是Vue.js的組件和模板詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

  • 相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板