Vue入門学習ノート3 vueグローバルAPI整理
55477 ワード
Vue入門学習ノート3 vueグローバルAPI整理
これはvueを学ぶ第3の文章で、前の2編はそれぞれvue入門とvueの内部指令を紹介して、この編はvueのグローバルAPI公式ドキュメントvue学習ノート1 Vue入門vue学習ノート2 Vue内部指令を紹介します
1、グローバルAPIの概要
API
説明
Vue.directive( id, [definition] )
カスタムコマンド.使用法、グローバルコマンドの登録または取得.
Vue.extend( options )
拡張コンストラクタ.使用方法:ベースVueコンストラクタを使用して、「サブクラス」を作成します.
Vue.set( target, propertyName/index, value )
グローバル・アクションを使用して、レスポンスオブジェクトにpropertyを追加し、この新しいpropertyがレスポンスであることを確認し、ビューの更新をトリガーします.
template
テンプレート、カスタムテンプレート.
Vue.component( id, [definition] )
コンポーネント.使用法、グローバルコンポーネントの登録または取得.
Tip:詳細については、公式ドキュメントを参照してください.
2、詳細
2.1 Vue.directive( id, [definition] )
説明:このAPIはカスタムコマンドに使用されます.たとえば、次の例では、フォントの色を変更するためにcolor属性をバインドした「ruihe」というコマンドをカスタマイズします.コードは次のとおりです.パラメータ: idカスタムコマンドの名前. [definition]というパラメータはオブジェクトであるべきで、具体的にはビジネスロジックがカスタマイズされています.
Tip:この中には、単純なカスタム命令の方法と標準的な書き方の2つの方法が含まれています.その中の標準的な書き方には命令ライフサイクルが含まれており、例では注釈がはっきり書かれており、説明されていません.
2.2 Vue.extend( options )
説明:このAPIは、vueのコンストラクタに基づいてvueのコンストラクタを拡張し、ユーザーのすべての個性的なニーズを満たす.例は次のとおりです.
パラメータ: optionsオプションは、オブジェクトと呼ばれ、具体的なビジネスロジックです.
2.3 Vue.set(target,propertyName/index,value)説明:データをグローバルに操作します.その存在意義の一つはjavascript制限が配列の下付きまたは長さを変えることができない場合であり、このときVue.set()はこのような問題を解決するのに役立ちます.すなわち,vueは配列の下付きスケールの変化を傍受できない.
パラメータ: targetが操作する目標は、以下の例を例にとる、vueコンストラクタのarr配列を操作するのでappすることができる.arrはこのターゲット に位置決めされる propertyName/index変更する属性名または下付き.たとえば、次の例では、arr配列に1と表記されている要素を操作(変更)するので、直接下付き文字を書けばいいです. valueが入力する新しい値.例えば、次の例では、下に1と表記された値をもともと「bbb」から「dd」に変更します.
例:
2.4 templateカスタムテンプレート
これは公式のグローバルAPI部分では紹介されていないので、グローバルAPIではないか分かりませんが、非常に頻繁に使用されており、コンポーネントと似ています.templateテンプレートには、オプションテンプレート、templateオプションテンプレート、scriptラベルテンプレートの3つの形式があります.次の例を見てください.
2.5 componentコンポーネント(component)はテンプレート(template)と似ており、いくつかの機能やスタイルがパッケージされています.このようにコードの低結合を実現し、開発効率も大幅に向上し、特にその大手企業が大きなプロジェクトを行う際の優位性は非常に明らかである.直接例をあげましょう.以下のようにします.
テンプレートよりも頻繁に使われているので、現実の開発ではコンポーネントを変更したり、コンポーネントを書いたりすることはほとんどありません.したがって、コンポーネントは非常に重要で、非常に重要で、非常に重要です.ローカルコンポーネントとグローバルコンポーネントローカルコンポーネントは、指定したオブジェクトのみが使用できるvueコンストラクタに書き込まれます.役割ドメインを超えた場合は無効です.グローバルコンポーネントは、vueコンストラクタの外に書かれており、ページ全体のオブジェクトで使用できます.例: 親子関係コンポーネントの簡単な説明は、コンストラクタの外でローカルコンポーネントを宣言することです.これにより、複雑なコンポーネントやコンポーネントが多い場合は、コンポーネントをvueコンストラクタの外に宣言することができます.これにより、コードが美しくなり、可読性が高く、セキュリティが向上することが重要です.例は、 componentsラベルこのラベルの存在は、コンポーネントを動的に使用するためにdataの値によってコンポーネントを動的に選択するためである.例は、
Tip:実はもう一つの重要なAPIがあります.それはフック関数、つまりvueライフサイクルのノード関数です.文章が長すぎるので、次の編で書きましょう.
これはvueを学ぶ第3の文章で、前の2編はそれぞれvue入門とvueの内部指令を紹介して、この編はvueのグローバルAPI公式ドキュメントvue学習ノート1 Vue入門vue学習ノート2 Vue内部指令を紹介します
1、グローバルAPIの概要
API
説明
Vue.directive( id, [definition] )
カスタムコマンド.使用法、グローバルコマンドの登録または取得.
Vue.extend( options )
拡張コンストラクタ.使用方法:ベースVueコンストラクタを使用して、「サブクラス」を作成します.
Vue.set( target, propertyName/index, value )
グローバル・アクションを使用して、レスポンスオブジェクトにpropertyを追加し、この新しいpropertyがレスポンスであることを確認し、ビューの更新をトリガーします.
template
テンプレート、カスタムテンプレート.
Vue.component( id, [definition] )
コンポーネント.使用法、グローバルコンポーネントの登録または取得.
Tip:詳細については、公式ドキュメントを参照してください.
2、詳細
2.1 Vue.directive( id, [definition] )
説明:このAPIはカスタムコマンドに使用されます.たとえば、次の例では、フォントの色を変更するためにcolor属性をバインドした「ruihe」というコマンドをカスタマイズします.コードは次のとおりです.パラメータ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.directive </title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue.directive </h1>
<hr>
<div id="app">
<div v-ruihe="color">{{num}}</div>
<button @click="add">Add</button>
</div>
<p>
<button onclick="unbind()"> </button>
</p>
<script type="text/javascript">
function unbind(){
app.$destroy();
}
//
// Vue.directive("ruihe",function(el,binding){
// //el
// // console.log(el);
// //binding ，
// // console.log(binding)
// el.style="color:"+binding.value;
// });
// ，
Vue.directive("ruihe",{
bind:function(el,binding){ //
console.log('1 - bind');
el.style="color:"+binding.value;
},
inserted:function(){ //
console.log('2 - inserted');
},
update:function(){ //
console.log('3 - update');
},
componentUpdated:function(){ //
console.log('4 - componentUpdated');
},
unbind:function(){ //
console.log('5 - unbind');
}
});
var app = new Vue({
el:"#app",
data:{
num:10,
color:'red'
},
methods:{
add:function(){
this.num++
}
}
})
</script>
</body>
</html>
Tip:この中には、単純なカスタム命令の方法と標準的な書き方の2つの方法が含まれています.その中の標準的な書き方には命令ライフサイクルが含まれており、例では注釈がはっきり書かれており、説明されていません.
2.2 Vue.extend( options )
説明:このAPIは、vueのコンストラクタに基づいてvueのコンストラクタを拡張し、ユーザーのすべての個性的なニーズを満たす.例は次のとおりです.
パラメータ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.extend </title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.extend </h1>
<hr>
<!-- -->
<author></author>
<!-- ID , , -->
<div id="author"></div>
<script type="text/javascript">
var authorURL = Vue.extend({
//
template:"",
data:function(){
return{
authorName:"panruihe",
authorURL:"http://fivewalking.xyz/"
}
}
});
//
new authorURL().$mount("author");
new authorURL().$mount("#author")
</script>
</body>
</html>
2.3 Vue.set(target,propertyName/index,value)説明:データをグローバルに操作します.その存在意義の一つはjavascript制限が配列の下付きまたは長さを変えることができない場合であり、このときVue.set()はこのような問題を解決するのに役立ちます.すなわち,vueは配列の下付きスケールの変化を傍受できない.
パラメータ:
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.set </title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>vue.set </h1>
<hr>
<div id="app">
{{count}}
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<p><button onclick="add()">add</button></p>
<script type="text/javascript">
function add(){
// Vue.set(outData,'count',2);
// app.count++;
// outData.count++;
/*
javascript ， Vue.set（）
，vue
*/
// app.arr[1]='ddd';
/* Vue.set() */
Vue.set(app.arr,1,'dd');
}
var outData={
count:1,
goods:'car',
arr:['aaa','bbb','ccc']
}
var app = new Vue({
el:"#app",
data:outData
})
</script>
</body>
</html>
2.4 templateカスタムテンプレート
これは公式のグローバルAPI部分では紹介されていないので、グローバルAPIではないか分かりませんが、非常に頻繁に使用されており、コンポーネントと似ています.templateテンプレートには、オプションテンプレート、templateオプションテンプレート、scriptラベルテンプレートの3つの形式があります.次の例を見てください.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Template </title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>3 Template </h1>
<hr>
<div id="app">
{{mes}}
</div>
<!--
2.1 template
-->
<template id="dd2">
<h1 style="color:red;"> template </h1>
</template>
<!--
3.1 script
src ，
-->
<script type="x-template" id="dd3">
<h1 style="color:red;"> script </h1>
</script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
mes :'hell world!'
},
// 1
//
// template:`
// template
// `
// 2.2
// template:`#dd2`
// 3.2
template:`#dd3`
})
</script>
</body>
</html>
2.5 componentコンポーネント(component)はテンプレート(template)と似ており、いくつかの機能やスタイルがパッケージされています.このようにコードの低結合を実現し、開発効率も大幅に向上し、特にその大手企業が大きなプロジェクトを行う際の優位性は非常に明らかである.直接例をあげましょう.以下のようにします.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>component 3</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>component 3（component ）</h1>
<hr>
<div id="app">
<!--
componten vue
data
-->
<componten :is="who"></componten>
<button @click="changeComponten()">changeComponten</button>
</div>
<script type="text/javascript">
var componentA={
template:`I'm componentA`
}
var componentB={
template:`I'm componentB`
}
var componentC={
template:`I'm componentC`
}
var app = new Vue({
el:"#app",
data:{
who :'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods:{
changeComponten:function(){
if(this.who=="componentA"){
this.who="componentB";
}else if(this.who=="componentB"){
this.who="componentC";
}else{
this.who="componentA"
}
}
}
})
</script>
</body>
</html>
テンプレートよりも頻繁に使われているので、現実の開発ではコンポーネントを変更したり、コンポーネントを書いたりすることはほとんどありません.したがって、コンポーネントは非常に重要で、非常に重要で、非常に重要です.
<div id="app">
<!-- -->
<ruihe></ruihe>
<pan></pan>
</div>
<!-- app aqq ruihe -->
<!-- <div id="aqq">
<ruihe></ruihe>
</div> -->
<script type="text/javascript">
// 1
// ，
// template
Vue.component('ruihe',{
template:` ruihe `
})
var app = new Vue({
el:"#app",
// 2
components:{
"pan":{
template:` pan `
}
}
})
// 1.2
// var app = new Vue({
// el:"#aqq",
// })
</script>
<div id="app">
<pan></pan>
</div>
<script type="text/javascript">
//
//
var city ={
template:`siChuan of China!`
}
//
var panComponent = {
template:`
pan from China!
`,
components:{
"city":city
}
}
var app = new Vue({
el:"#app",
//
components:{
"pan":panComponent
}
})
</script>
<div id="app">
<!--
componten vue
data
-->
<componten :is="who"></componten>
<button @click="changeComponten()">changeComponten</button>
</div>
<script type="text/javascript">
var componentA={
template:`I'm componentA`
}
var componentB={
template:`I'm componentB`
}
var componentC={
template:`I'm componentC`
}
var app = new Vue({
el:"#app",
data:{
who :'componentA'
},
components:{
"componentA":componentA,
"componentB":componentB,
"componentC":componentC
},
methods:{
changeComponten:function(){
if(this.who=="componentA"){
this.who="componentB";
}else if(this.who=="componentB"){
this.who="componentC";
}else{
this.who="componentA"
}
}
}
})
</script>
Tip:実はもう一つの重要なAPIがあります.それはフック関数、つまりvueライフサイクルのノード関数です.文章が長すぎるので、次の編で書きましょう.