ホームページ >ウェブフロントエンド >jsチュートリアル >Vue.js のコンポーネントとテンプレートに関するディスカッション
Vue.js のコンポーネントとテンプレートに関するディスカッション
- 黄舟オリジナル
- 2017-10-28 09:29:281452ブラウズ
要約:
ディレクティブは、主にデータの変更を 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-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 命令
テンプレート
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タグに書くと、
他のファイルもこの構造を持っている場合、これは再利用できません。
テンプレートレンダー関数
では、コードの一部デモ
<!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 サイトの他の関連記事を参照してください。