ホームページ > 記事 > ウェブフロントエンド > Vue.js のコンポーネントとテンプレートに関するディスカッション
要約:
ディレクティブは、主にデータの変更を DOM の動作にマッピングするメカニズムを提供する Vue.js の重要な機能です。 その後、データの変更は DOM の動作にマッピングされます。Vue.js はデータによって駆動されるため、DOM 構造を直接変更することはなく、$('ul').append('25edfb22a4f469ecb59f1190150159c6 one4c607ccbe972a9abff0002f601f84969')、データが変更されると、命令はセット操作で DOM を変更するため、DOM の変更やステータスを管理することなく、データの変更のみに集中できます。
Vue の組み込み命令
1. v-bindv-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 は「:」と省略できます。
上記の例は
と省略できます。実装の効果は次のとおりです:399eb065b6564f5053ca47f36acdc178
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-htmlv-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 サイトの他の関連記事を参照してください。