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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

黄舟

Oct 28, 2017 am 09:29 AM

javascript vue.js 話し合う

要約:

ディレクティブは、主にデータの変更を 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>

ログイン後にコピー

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

概要

以上がVue.js のコンポーネントとテンプレートに関するディスカッションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7463

CakePHP チュートリアル

1376

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

簡単な JavaScript チュートリアル: HTTP ステータスコードを取得する方法 Jan 05, 2024 pm 06:08 PM

JavaScript チュートリアル: HTTP ステータスコードを取得する方法、特定のコード例が必要です序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータスコードを取得して操作が成功したかどうかを判断し、さまざまなステータスコードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用

JavaScript で HTTP ステータスコードを簡単に取得する方法 Jan 05, 2024 pm 01:37 PM

JavaScript で HTTP ステータスコードを取得する方法の紹介: フロントエンド開発では、バックエンドインターフェイスとの対話を処理する必要があることが多く、HTTP ステータスコードはその非常に重要な部分です。 HTTP ステータスコードを理解して取得すると、インターフェイスから返されたデータをより適切に処理できるようになります。この記事では、JavaScript を使用して HTTP ステータスコードを取得する方法と、具体的なコード例を紹介します。 1. HTTP ステータスコードとは何ですか? HTTP ステータスコードとは、ブラウザがサーバーへのリクエストを開始したときに、サービスが

詳細: Django フレームワークとは何ですか? Jan 19, 2024 am 09:23 AM

Django フレームワークは、Web アプリケーションを作成するためのシンプルかつ強力な方法を提供する Web アプリケーション用の Python フレームワークです。実際、Django は最も人気のある Python Web 開発フレームワークの 1 つとなり、Instagram や Pinterest を含む多くの企業にとって最初の選択肢となっています。この記事では、基本概念や重要なコンポーネント、具体的なコード例など、Django フレームワークとは何かについて詳しく説明します。 Django の基本概念Djan

WebSocketとJavaScriptを使ったオンライン電子署名システムの実装方法 Dec 18, 2023 pm 03:09 PM

WebSocket と JavaScript を使用してオンライン電子署名システムを実装する方法の概要: デジタル時代の到来により、電子署名は従来の紙の署名に代わってさまざまな業界で広く使用されています。 WebSocketは全二重通信プロトコルとしてサーバーとリアルタイム双方向のデータ通信が可能で、JavaScriptと組み合わせることでオンライン電子署名システムを実現できます。この記事では、WebSocket と JavaScript を使用して簡単なオンラインアプリケーションを開発する方法を紹介します。

LaravelのHeadリクエストメソッドの詳細 Mar 06, 2024 pm 03:36 PM

人気の PHP フレームワークとして、Laravel はさまざまな種類の HTTP リクエストを処理するための便利なリクエストメソッドを多数提供しています。その中でもHead requestメソッドは特殊で見落とされがちなメソッドです。この記事では、LaravelにおけるHeadリクエストメソッドの役割、使い方、サンプルコードについて詳しく解説していきます。 Headリクエストメソッドとは何ですか? Head リクエストメソッドは、HTTP プロトコルで定義されたリクエストメソッドです。Head リクエストを送信すると、サーバーはリクエストヘッダー情報のみを返し、ヘッダー情報は返しません。

Go 言語と C 言語の互換性についての詳細な議論 Mar 07, 2024 pm 02:45 PM

Go 言語は Google によって開発されたプログラミング言語であり、効率性、シンプルさ、強力な同時実行性という特徴があります。構文構造、パッケージ管理、高度な機能などに大きな利点があるため、プログラマに好まれています。ただし、実際の開発では、多くのプロジェクトで従来のプログラミング言語 C を使用することになるため、Go 言語と C 言語の互換性は特に重要です。まずはGo言語とC言語の互換性についてお話します。 Go 言語では、CGo を通じて C 言語を操作できます。 Cゴ

JavaScriptとWebSocketを使用してリアルタイムオンライン投票システムを実装する方法 Dec 18, 2023 pm 04:27 PM

JavaScript と WebSocket を使用してリアルタイムオンライン投票システムを実装する方法はじめに: インターネットの急速な発展に伴い、リアルタイムオンライン投票システムはさまざまな活動や選挙において非常に一般的な形式になりました。 JavaScript と WebSocket テクノロジーを使用してリアルタイムのオンライン投票システムを実装すると、柔軟性と使いやすさが向上します。この記事では、JavaScript と WebSocket を使用してシンプルなリアルタイムオンライン投票システムを実装し、対応するコードを提供する方法を詳しく紹介します。

詳細: Go 言語のシングルスレッド機能 Mar 15, 2024 pm 02:09 PM

最新のプログラミング言語として、Go 言語はそのシンプルさと効率性により、近年ますます多くの開発者に愛され、好まれています。ユニークな機能の 1 つは、シングルスレッドであることです。従来のマルチスレッドプログラミング言語では、スレッド間の同期や相互排他を開発者が手動で管理する必要がありましたが、Go言語では独自のコルーチン（Goroutine）と通信機構（チャネル）により、便利かつ効率的な並行プログラミングを実装できます。 1. Goroutine とシングルスレッド: Go 言語

See all articles

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

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック