Vue.js コンポーネントとテンプレートの詳細な説明-jsチュートリアル-php.cn

Vue.js コンポーネントとテンプレートの詳細な説明

小云云

リリース： 2018-01-20 09:46:43

オリジナル

2179 人が閲覧しました

ディレクティブは Vue.js の重要な機能であり、主にデータの変更を DOM の動作にマッピングするメカニズムを提供します。この記事では、Vue.js のコンポーネントとテンプレートを紹介します。必要な方はぜひ参考にしてください。

要約:

ディレクティブは、Vue.js の重要な機能であり、主にデータの変更を DOM の動作にマッピングするメカニズムを提供します。その後、クロスデータの変更は DOM の動作にマッピングされます。Vue.js はデータによって駆動されるため、DOM 構造を直接変更することはなく、$('ul').append('') このような操作では、データが変更されると、命令によって set 操作を使用して 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:'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、パラメータのタイプは文字列、

この関数は、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 の説明

template

html テンプレート

テンプレート

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

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

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

JavaScript を使用して式を表現します: 単純な式を作成できます

文字列テンプレート

テンプレート文字列

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

テンプレートは、要素に吊り下げられます。要素からぶら下がっているコンテンツは無視されます。

コードは次のとおりです

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

ログイン後にコピー

驚くべき変更に気づきましたか

ルートノードは1つだけです

HTML構造をスクリプトタグのペアに記述し、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 タグに記述しても、まだ比較的限定的です

他のファイルもこの構造を持つ場合、

これを再利用することはできません。

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

レンダー関数

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

createElement(タグ名, {データオブジェクト}, [子要素]);

子要素はテキストまたは配列です

で表示してみましょうcode

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

ログイン後にコピー

実装効果は以下の通りです

データオブジェクトの属性については、公式サイトの例を参照してください。