Vue.js のコンポーネントとテンプレートに関するディスカッション-jsチュートリアル-php.cn

Vue.js のコンポーネントとテンプレートに関するディスカッション

黄舟

リリース： 2017-10-28 09:29:28

オリジナル

1422 人が閲覧しました

要約:

ディレクティブは、主にデータの変更を DOM の動作にマッピングするメカニズムを提供する Vue.js の重要な機能です。その後、データの変更は DOM の動作にマッピングされます。Vue.js はデータによって駆動されるため、DOM 構造を直接変更することはなく、$('ul').append('

one< ;/li>')、データが変更されると、命令はセット操作で DOM を変更するため、DOM の変更やステータスを管理することなく、データの変更のみに集中できます。

Vue の組み込み命令

1. v-bind

v-bind は主に DOM 要素の属性 (属性) をバインドするために使用されます。つまり、要素属性の実際の値はデータ属性です。提供された vm インスタンス内。

例:

<!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:&#39;123&#39;
  };
 //声明式渲染
  var vm = new Vue({
    el:&#39;#demo&#39;,
    data:obj  });
</script>
</body>
</html>

ログイン後にコピー

v-bind は「:」と省略できます。

上記の例は

と省略できます。実装の効果は次のとおりです:

<span :cotomId="id">

2。

イベントリスナーをバインドします (@ と省略されます)。

昨日も使用しました、略語で効果を見てみましょう

<!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、パラメータのタイプは文字列、

は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>

ログイン後にコピー

実装効果は次のとおりです

その他の組み込み命令については、公式 Web サイトをご確認ください: Vue.js 命令

テンプレート

html テンプレート

DOM テンプレートに基づいたテンプレートは解析可能で有効な html

補間

テキスト: "Mustache" 構文を使用します (二重中括弧) {{value}}

機能: インスタンスの属性値を置き換えます

値が変更されると、補間されたコンテンツが自動的に更新されます

ネイティブ HTML: 二重中括弧テキストを出力し、HTML を解析しません

属性: バインドに v-bind を使用し、変更に応答できます

JavaScript を使用します

式

: 単純な式を作成できます

文字列テンプレート

テンプレート文字列

' s ' s ' s ' s ' ' s ‐ ‐ ‐‐‐‐‐‐ と

を変更します。要素からぶら下がっているコンテンツは無視されます。

コードは次のとおりです

<!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>

ログイン後にコピー

驚くべき変更はありましたか

‐ 「

<!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タグに書くと、

他のファイルもこの構造を持っている場合、これは再利用できません。

テンプレートレンダー関数

レンダー関数

レンダーオプションオブジェクトの属性

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>

ログイン後にコピー

実装効果は次のとおりです

概要