探討Vue.js的組件和模板

更新時間：2017年10月27日 14:36:32 投稿：mrr

指令是Vue.js中一個重要的特性，主要提供了一種機制將數(shù)據(jù)的變化映射為DOM行為。下面通過本文給大家分享Vue.js的組件和模板，需要的朋友參考下吧

摘要:

指令是Vue.js中一個重要的特性，主要提供了一種機制將數(shù)據(jù)的變化映射為DOM行為。那什么交數(shù)據(jù)的變化映射為DOM行為， Vue.js是通過數(shù)據(jù)驅(qū)動的，所以我們不會直接去修改DOM結(jié)構(gòu)，不會出現(xiàn)類似$('ul').append('<li>one</li>')這樣的操作，當數(shù)據(jù)變化時，指令會一句設(shè)定好的操作對DOM進行修改，這樣就可以只關(guān)注數(shù)據(jù)的變化，而不用去管理DOM的變化和狀態(tài)，

Vue的內(nèi)置指令

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模版 -->
<div id="demo">
  <span v-bind:cutomId="id">{{message}}</span>
</div>
<script>
  //數(shù)據(jù)
  let obj ={
    message:"Hello World",
    id:'123'
  };
 //聲明式渲染
  var vm = new Vue({
    el:'#demo',
    data:obj  });
</script>
</body>
</html>

v-bind可以簡寫為“：”，

上述例子可以簡寫為<span :cotomId="id">

實現(xiàn)效果如下：

2. v-on

綁定事件監(jiān)聽器，簡寫為@。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!-- HTML模版 -->
  <div id="demo">
    <span @click="clickHandle">{{message}}</span>
  </div>
  <script>
    //數(shù)據(jù)
    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，參數(shù)類型為string，

作用為更新innerHTML，

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

按普通HTML處理

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue的指令</title>
  <script src="../vue.js"></script>
</head>
<body>
<!-- HTML模版 -->
<div id="demo" v-html="HTML"></div>
<script>
  //數(shù)據(jù)
  let obj = {
    HTML:"<div>Hello World</div>"
  };
  var vm = new Vue({
    el:"#demo",
    data:obj  })
</script>
</body>
</html>

實現(xiàn)效果如下

更多內(nèi)置指令請查詢官網(wǎng)：Vue.js指令

模板

html模板

基于DOM的模板，模板都是可解析有效的html

插值

文本：使用“Mustache”語法（雙大括號）{{value}}

作用：替換實例上的屬性值，

當值改變時，插值內(nèi)容就會自動更新

原生的html：雙大括號輸出的是文本，不會解析html

屬性：使用v-bind進行綁定，可以響應變化

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

字符串模板

template字符串

template選項對象的屬性

模板將會替換掛在元素。掛在元素的內(nèi)容都將被忽略。

代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <div id="demo"></div>
  <script>
    //數(shù)據(jù)
    let obj = {
      html:"<div>String</div>",
      abc:1
    };
    var str = "<div>Hello</div>";
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:str    })
  </script>
</body>
</html>

有木有發(fā)現(xiàn)什么驚奇的變化

根節(jié)點只能有一個

將html結(jié)構(gòu)寫在一對script標簽中，設(shè)置type="X-template"

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>template模板</title>
  <script src="../vue.js"></script>
</head>
<body>
  <!--HTML模板-->
  <div id="demo">
    <span>vue</span>
  </div>
  <script type="x-template" id="temp">
    <div>
      Hello,{{abc}},
      <span>sunday</span>
    </div>
  </script>
  <script>
    //數(shù)據(jù)
    let obj = {
      html:"<div>String</div>",
      abc:1
    };
    var vm = new Vue({
      el:"#demo",
      data:obj,
      template:"#temp"
    });
  </script>
</body>
</html>

實現(xiàn)效果如下：

寫在script標簽中，還是比較局限，

如果別的文件也是這個結(jié)構(gòu)的時候，

這個就不能重復使用。

模板render函數(shù)

render函數(shù)

render 選項對象的屬性

createElement(標簽名,{數(shù)據(jù)對象},[子元素]);

子元素為文本或者數(shù)組

我們還是來一段代碼演示

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

實現(xiàn)效果如下