首頁 >web前端 >js教程 >Vue.js的組件和模板詳解

Vue.js的組件和模板詳解

小云云原創: 2018-01-20 09:46:432193瀏覽

指令是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的組件和模板詳解

相關文章