1。V-Bind略語
<! - complete syntax-> <a v-bind:href = "url"> </a> <! - 略語 - > <a:href = "url"> </a> <
2。V-onの略語
<! - complete syntax-> <a v-on:click = "dosomething"> </a> <! - 略式 - > <a @click = "dosomething"> </a>
3。フィルター
{{メッセージ|大文字}}4。条件付きレンダリング
v-if <h1 v-if = "ok"> yes </h1> <h1 v-else> no </h1> <div v-if = "math.random()> 0.5">ごめんなさい</div> <div v-else> div> template-v-if <template v-if = " 2 </p> </template> v-show <h1 v-show = "ok"> hello!</h1>
5。リストレンダリング
v-for <ul id = "example-1"> <li v-for = "item inアイテム"> {{item.message}} </li> </ul> var example1 = new vue({el: '#example-1'、data:{item:[{message: 'foo'}、{message:message: 'bar'}}); <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li></ul>var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' }]}});配列の変更検出
Vue.jsは、観測された配列の変異した方法をラップするため、ビューの更新をトリガーできます。ラップされたメソッドは、push()、pop()、shift()、unshift()、splice()、sort()、reverse()です。
example1.Items.Push({message: 'baz'}); example1.items = example1.items.filter(function(item){return item.message.match(/foo/);}); template-v-for <ul> <template v-for = "アイテムのアイテム"> <li> {{item.msg}} </li> <li> </li> </template> </ul>オブジェクトv-for
<ul id = "Repeat-Object"> <li v-for = "value in object"> {{$ key}}:{{{value}} </li> </ul> new vue({el: '#Repeat-Object'、data:{object:{firstName: 'john'、lastname: 'doe'、er:30}}});Value Range V-For
<div> <span v-for = "n in 10"> {{n}} </span> </div>6。メソッドとイベントハンドラー
メソッドプロセッサ
<div id = "example"> <button v-on:click = "greet"> greet </button> </div> var vm = new vue({el: '#example'、data:{name: 'vue.js'}、// `methods` object:{greed:function(event){// to the methos ` 「イベント」はネイティブDOMイベントアラート(event.target.tagname)}}})// JavaScriptコードのメソッドvm.greet()を呼び出すこともできます。 //-> 'こんにちはvue.js!'インラインステートメントプロセッサ
<div id = "example-2"> <button v-on:click = "say( 'hi')"> say hi </button> <button v-on:click = "say( 'what')"
また、インラインステートメントプロセッサでネイティブDOMイベントにアクセスする必要がある場合があります。特別な変数$イベントを使用して、メソッドに渡すことができます
<ボタンv-on:click = "say( 'hello!'、$ event)">送信</button>メソッド:{function(msg、event){//ネイティブイベントオブジェクトEvent.preventdefault()}}にアクセスできます。##イベント修飾子
<! - クリックイベントが泡立ってからイベントを防ぐ - > <a v-on:click.stop = "dothis"> </a> <! - イベントを送信しなくなりましたページを過負荷にしなくなります - > <form v-on:submit.prevent = "onsubmit"> </form> <! - モディファイ因子はcatっています - > <> < v-on:submit.prevent> </form>
##キー修飾子
<
すべてのキーエイリアス:ENTER、TAB、削除、ESC、スペース、アップ、ダウン、左、右
##その他の例
new Vue({el: '#demo'、data:{newlabel: ''、stats:stats:stats:stats}、method:{add:function(e){e.preventdefault()if(!this.newlabel){return;} this.stats.push({label:this.newlabel、valut: '; (stat){if(this.stats.length> 3){this.stats。$ remove(stat);7。遷移
CSS遷移
<div v-if = "show" transition = "Expand"> hello </div>次に、.expand-transition、.expand-enter、and .expand-leave:/* exical*/。拡張トランジション{transition:すべて.3s Ease;高さ:30px;パディング:10px;バックグラウンドカラー:#eee;オーバーフロー:hidden;}/* .expand-enterエントリの開始状態* //* .expand-leave出発の終了状態を定義します*/。拡張エンテル、.expand-leave {height:0;パディング:0 10px;不透明:0;}動的バインディングを介して、同じ要素で異なる遷移を実現できます。
<div v-if = "show":transition = "transitionname"> hello </div> new vue({el: '...'、data:{show:false、transitionName: 'fade'}}}さらに、JavaScriptフックを提供できます。
vue.transition( 'Expand'、{beforeenter:function(el){el.textcontent = 'before enter'}、enter:function(el){el.textcontent = 'enter'}、function(el){el.textcontent = 'afterinter'}、enterceleled:ferfered:unters(el) (el){el.textcontent = 'beforeleave'}、reave:function(el){el.textcontent = 'leave'}、alfteLeave:function(el.textcontent = 'afterleave'}、leavecelled:function(el){// cancellation});8。コンポーネント
1.登録
// var mycomponent = vue.extend({empplate: '<div> a custom Component!</div>'}); //登録vue.component( 'my-component'、myComponent); // root instance new vue({el: '#example'}); vue.comPonent( 'my-component'、{template: '<div> a custom Component!</div>'}); //ルートインスタンスの作成new vue({el: '#example'}); <div id = "example"> <my-component> </my-component> </div>2。プロップを使用してデータを渡します
例1:
vue.component( 'child'、{// props props:['msg']、// propはテンプレートで使用できます// `this.msg`を使用してテンプレートを設定できます: '<span> {{msg}} </span>'})例2:
vue.component( 'child'、{// javascript Props:['mymessage']、テンプレート: '<span> {{mymessage}} </span>'}); <! - htmlのkebabケース - > <child my-message = "hello!"> </child>3。ダイナミックな小道具
<div> <入力v-model = "parentmsg"> <br> <child v-bind:my-message = "parentmsg"> </child> </div>
V-bindの略語構文を使用することは通常、より単純です。
<子:my-message = "parentmsg"> </child>
4.プロップバインディングタイプ
プロップはデフォルトで一方向の結合です:親コンポーネントのプロパティが変化すると、子コンポーネントに渡されますが、逆はそうではありません。これは、子コンポーネントが親コンポーネントの状態を誤って変更するのを防ぐためです。これにより、アプリケーションのデータフローが理解しにくいです。ただし、.syncまたは.Once結合修飾子を使用して、双方向または1回の時間の結合を明示的に強制することも可能です。
比較構文:
<! - デフォルトは一方向のバインディング - > <子:msg = "parentmsg"> </child> <! - 双方向の結合 - > <子:msg.sync = "parentmsg"> </child> <! - > <child:msg.once = "parentmsg"> </child slot = "header">カスタムヘッダー</h3> </modal> </div>
5.プロップ検証
コンポーネントは、小道具の検証要件を指定できます。これは、これらの検証要件がコンポーネントのAPIを形成し、他の人がコンポーネントを正しく使用することを保証するため、コンポーネントが他のコンポーネントに与えられた場合に役立ちます。現時点では、プロップの値は、検証要件を含むオブジェクトです。
vue.component( 'emplement'、{props:{// basic type detection( `null`は任意のタイプを意味します)propa:number、// expened and string propb:{type:string、exice:true}、// default propc:{type:number、default:100}、//デフォルトの値を返す必要がある:{タイプ:番号、デフォルト:100}、// {msg: 'hello'}}}、//この小道具を双方向のバインディングとして指定//バインディングタイプが正しくない場合、警告はprope:{twoway:true}、//カスタム検証機能propf:{validator:function(value){return value> 10}}、 CORECE:function(val){return val + '' //値を文字列に変換}}、proph:{coerce:function(val){return json.parse(val)// json文字列をオブジェクトに変換}}}}});その他の例:
vue.comPonent( 'Modal'、{template: '#modal-template'、props:{show:{type:boolean、必須:true、twoway:true}}});6.登録
// var mycomponent = vue.extend({empplate: '<div> a custom Component!</div>'}); // register vue.component( 'my-component'、myComponent); // root instance new vue({el: '#example'});またはそれを直接書きます:
vue.comPonent( 'my-component'、{template: '<div> a custom Component!</div>'}); //ルートインスタンスの作成new vue({el: '#example'}); <div id = "example"> <my-component> </my-component> </div>7.プロップを使用してデータを渡します
例1:
vue.component( 'child'、{// props props:['msg']、// propはテンプレートで使用できます// `this.msg`を使用してテンプレートを設定できます: '<span> {{msg}} </span>'})例2:
vue.component( 'child'、{// javascript Props:['mymessage']、テンプレート: '<span> {{mymessage}} </span>'}); <! - htmlのkebabケース - > <child my-message = "hello!"> </child>8。ダイナミックな小道具
<div> <入力v-model = "parentmsg"> <br> <child v-bind:my-message = "parentmsg"> </child> </div>
V-bindの略語構文を使用することは通常、より単純です。
<子:my-message = "parentmsg"> </child>
9.プロップバインディングタイプ
プロップはデフォルトで一方向の結合です:親コンポーネントのプロパティが変化すると、子コンポーネントに渡されますが、逆はそうではありません。これは、子コンポーネントが親コンポーネントの状態を誤って変更するのを防ぐためです。これにより、アプリケーションのデータフローが理解しにくいです。ただし、.syncまたは.Once結合修飾子を使用して、双方向または1回の時間の結合を明示的に強制することも可能です。
比較構文:
<! - デフォルトは一方向のバインディング - > <子:msg = "parentmsg"> </child> <! - 双方向結合 - > <子:msg.sync = "parentmsg"> </child> <! - 単一のバインディング - > <子:msg.once = "parentmsg"> </child> </child> <
その他の例:
<Modal:show.sync = "showmodal"> <h3 slot = "header">カスタムヘッダー</h3> </modal> </div>
10.プロップ検証
コンポーネントは、小道具の検証要件を指定できます。これは、これらの検証要件がコンポーネントのAPIを形成し、他の人がコンポーネントを正しく使用することを保証するため、コンポーネントが他のコンポーネントに与えられた場合に役立ちます。現時点では、プロップの値は、検証要件を含むオブジェクトです。
vue.component( 'emplement'、{props:{// basic type detection( `null`は任意のタイプを意味します)propa:number、// expened and string propb:{type:string、exice:true}、// default propc:{type:number、default:100}、//デフォルトの値を返す必要がある:{タイプ:番号、デフォルト:100}、// {msg: 'hello'}}}、//この小道具を双方向のバインディングとして指定//バインディングタイプが正しくない場合、警告はprope:{twoway:true}、//カスタム検証機能propf:{validator:function(value){return value> 10}}、 CORECE:function(val){return val + '' //値を文字列に変換}}、proph:{coerce:function(val){return json.parse(val)// json文字列をオブジェクトに変換}}}}});その他の例:
vue.comPonent( 'Modal'、{template: '#modal-template'、props:{show:{type:boolean、必須:true、twoway:true}}});11.スロットを使用してコンテンツを配布します
<slot>要素は、コンポーネントテンプレートのコンテンツ配布スロットとして使用されます。この要素自体が交換されます。
名前属性を持つスロットは、名前付きスロットと呼ばれます。スロット属性を持つコンテンツは、一致する名前を持つ名前付きスロットに配布されます。
たとえば、次のようなテンプレートを備えたマルチインドションコンポーネントがあるとします。
<div> <slot name = "one"> </slot> <slot> </slot> <slot name = "2"> </slot> </div>
親コンポーネントテンプレート:
<Multi-Insertion> <P slot = "One"> One </p> <p slot = "2"> 2つのデフォルトa </p> </multi-Insertion>
レンダリング結果は次のとおりです。
<div> <p slot = "one"> one </p> <p>デフォルトa </p> <p slot = "2"> 2 </p> </div>