1. v-bind اختصار
<!-اكتمال بناء الجملة-> <a v-bind: href = "url"> </a> <!-Abbreviation-> <a: href = "url"> </a> <!-complete syntax-> <button v-bind: uppludable = "somedynamicondition : تعطيل = "SomedynamicCondition"> زر </button>
2. v-on اختصار
<!-اكتمال بناء الجملة-> <a v-on: click = "dosomething"> </a> <!-Abbreviation-> <a @click = "dosomething"> </a>
3. مرشح
{{message | الاستفادة}}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> not sorred </fiv> template-v-if <tamplate v-if = "ok" 2 </p> </mapplate> V-Show <H1 V-Show = "OK"> Hello! </h1>
5. قائمة التقديم ل
v-for <ul id = "example-1"> <li v-for = "item in heads"> {{item.Message}} </li> </ul> var example1 = new vue ({el: '#example-1' ، data: {stems: [{message: 'foo'} ، {message: 'bar'}) <ul id = "exame-2"> <li v-for = "item in heads"> {{parentMessage}}-{$ index}}-{{item.message}} </li> </ul> var example2 = new vue ({el: '#example-2' ، data: {parentmessag }]}}) ؛الكشف عن تغيير الصفيف
يلف 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 = "item in heads"> <li> {{item.msg}} </li> <li> </li> </limplate> </ul>كائن v-for
<ul id = "repert-object"> <li v-for = "value in Object"> {{$ key}}}: {{value}} </li> </ul> vue new ({el: '#recep-object' ، data: {Object: {firstName: 'John' ، lastName: 'doe' ، ater: 30}}}}}القيمة المدى v-for
<viv> <span v-for = "n in 10"> {{n}} </span> </viv>6. الأساليب ومعالجات الأحداث
معالج الطريقة
<div id = "example"> <button v-on: click = "greet"> تحية </button> </div> var vm = new vue ({el: '#example' ، data: {name: 'vue.js'} ، `event` هو تنبيه للأحداث DOM الأصلية (event.target.tagname)}}}}) // يمكنك أيضًا استدعاء الطريقة vm.greet () في رمز JavaScript ؛ // -> 'hello vue.js!'معالج بيان مضمّن
<div id = "example-2"> <button v-on: click = "say ('hi')"> say hi </utton> <button v-on: click = "say ('what')"> قل ما </button> </div> new vue ({el: '#example-2' ، الأساليب: {say: function (msg) {alert (msg)}}}) ؛في بعض الأحيان يكون من الضروري أيضًا الوصول إلى أحداث DOM الأصلية في معالج البيان المضمّن. يمكنك استخدام حدث $ المتغير الخاص لتمريره إلى الطريقة
<button v-on: click = "say ('hello!' ، $ event)"> إرسال </button> الأساليب: {say: function (msg ، event) {// الآن يمكننا الوصول إلى كائن الحدث الأصلي event.preventDefault ()}} ؛## المعدل الحدث
<!-منع الحدث النقر من bubled-> <a v-on: click.stop = "dothis"> </a> <!-إرسال الحدث لم يعد يحمل الصفحة-> <form v-on: submit.prevent = "onSubmit"> </part> <! v-on: submit.prevent> </part>
## المعدل المفتاح
<!-vm.submit () لا يسمى إلا عندما يكون رمز المفاتيح 13-> <الإدخال v-on: keyup.13 = "submit"> <!-كما هو مذكور أعلاه-> <الإدخال v-on: keyup.enter = "submit"> <!-abbreviation syntax-> <input @keyup.enter = "submit">
كل الاسم المستعار الرئيسي: أدخل ، علامة التبويب ، حذف ، ESC ، المساحة ، لأعلى ، لأسفل ، يسار ، يمين
## أمثلة أخرى
جديد vue ({el: '#demo' ، البيانات: {newLabel: '' ، Stats: Stats} ، الأساليب: {Add: function (e) {e.preventDefault () if (! this.newabel) {this.stats.push ({this.newlabel ، value: 100}) ؛ (stat) {if (this.stats.length> 3) {this.stats. $ remove (stat) ؛7. الانتقال
انتقال CSS
<div v-if = "show" transition = "expend"> hello </viv> ثم أضف قواعد css لـ .expand-transition ، .expand-enter ، و .expand-leave:/* مطلوب*/. الارتفاع: 30 بكسل ؛ الحشو: 10 بكسل ؛ لون الخلفية: #EEE ؛ الفائض: مخفي ؛}/* .expand-enter تحديد حالة البدء من الإدخال* //* .expand-leave تحديد حالة الانطلاق النهائية*/. التوسيع ، .expand-leave {الارتفاع: 0 ؛ الحشو: 0 10px ؛ التعتيم: 0 ؛}يمكنك تحقيق تحولات مختلفة على نفس العنصر من خلال الربط الديناميكي:
<div v-if = "show": transition = "transitionName"> hello </viv> vue new ({el: '...' ، data: {show: false ، transitionname: 'fade'}}بالإضافة إلى ذلك ، يمكن توفير خطافات JavaScript:
vue.transition ('expend "، {eStrienter: function (el) {el.textContent =' Quartenter '} ، Enter: function (el) {el.textContent =' Enter '} ، efterenter: function (el) {el.textcontent =' efterenter '}} ercrancelled: function (el) {el) {el.textContent = 'beforeleave'} ، ترك: الدالة (el) {el.textContent = 'Leave'} ، AfterLeave: function (el) {el.textContent = 'AfterLeave'} ، LeaveCancelled: function (el) {// handledation}}}) ؛8. مكونات
1. سجل
// تعريف var myComponent = vue.extend ({template: '<div> مكون مخصص! </viv>'}) ؛ // registr vue.component ('my-component' ، {template: '<viv> مكون مخصص! </viv>'}) ؛ // إنشاء مثيل جذر جديد vue ({el: '#Example'}) ؛ <div id = "example"> <my-component> </my-component> </viv>2. استخدم الدعامة لتمرير البيانات
مثال 1:
vue.component ('child' ، {// DECRERE PROPS Props: ['msg'] ، // prop يمكن استخدامه في القوالب // يمكنك استخدام `this.msg` لتعيين القالب: '</child> {{msg}} </span>'}) ؛ <Child Msg =" Hello! "مثال 2:
vue.component ('Child' ، {// camelcase in JavaScript Props: ['mymessage'] ، template: '<span> {{mymessage}} </span>'}) ؛ <!-kebab-case in html-> <child my-message = "hello!"> </fild>3. الدعائم الديناميكية
<viv> <input v-model = "parentmsg"> <br> <child v-bind: meSsage = "parentMsg"> </fild> </viv>
عادةً ما يكون استخدام بناء جملة الاختصار من V-bind أبسط:
<الطفل: message = "parentmsg"> </fild>
4. نوع الربط
Prop هو ربط أحادي الاتجاه افتراضيًا: عندما تتغير خصائص المكون الأصل ، سيتم تمريرها إلى مكون الطفل ، ولكن العكس لن يحدث ذلك. هذا لمنع مكون الطفل من تعديل حالة المكون الأصل عن طريق الخطأ - وهذا سيجعل تدفق بيانات التطبيق يصعب فهمه. ومع ذلك ، من الممكن أيضًا إجبار الارتباط ثنائي الاتجاه أو مرتبة واحدة بشكل صريح باستخدام معدل ربط .sync أو .once:
بناء الجملة المقارن:
<!-الافتراضي هو ربط اتجاه واحد-> <الطفل: msg = "parentmsg"> </child> <!-ربط ثنائي الاتجاه-> <الطفل: msg.sync = "parentmsg"> </child> <!-inding ripal-> <Child: msg.once = "parentmsg"> slot = "header"> رأس مخصص </h3> </daction> </viv>
5. التحقق من التحقق
يمكن للمكونات تحديد متطلبات التحقق للدعائم. يكون هذا مفيدًا عندما يتم إعطاء المكونات للآخرين ، لأن متطلبات التحقق هذه تشكل واجهة برمجة تطبيقات المكون ، مما يضمن استخدام الآخرين المكون بشكل صحيح. في هذا الوقت ، تكون قيمة الدعائم كائنًا يحتوي على متطلبات التحقق:
vue.component ('example' ، {props: {// basic type detection (`null` يعني أي نوع على ما يرام) propa: number ، // مطلوب وسلسلة propb: {type: string ، مطلوب: true} ، // number ، مع القيمة الافتراضية: {type: type ، default: () {return {msg: 'hello'}}} ، // حدد هذا الدعامة كربط ثنائي الاتجاه // إذا كان نوع الربط غير صحيح ، فسيتم إلقاء تحذير prope: {twoway: true} ، propg: {coerce: function (val) {return val + '' // تحويل القيمة إلى سلسلة}} ، النبي: {coerce: function (val) {return json.parse (val) // تحويل سلسلة json إلى كائن}}}}}) ؛أمثلة أخرى:
vue.component ('modal' ، {template: '#modal-template' ، props: {show: {type: boolean ، request: true ، twoway: true}}}) ؛6. التسجيل
// define var myComponent = vue.extend ({template: '<viv> مكون مخصص! </viv>'}) ؛ // registrأو اكتبها مباشرة:
vue.component ('my-component' ، {template: '<viv> مكون مخصص! </viv>'}) ؛ // إنشاء مثيل جذر جديد vue ({el: '#Example'}) ؛ <div id = "example"> <my-component> </my-component> </viv>7. استخدم الدعامة لتمرير البيانات
مثال 1:
vue.component ('child' ، {// DECRERE PROPS Props: ['msg'] ، // prop يمكن استخدامه في القوالب // يمكنك استخدام `this.msg` لتعيين القالب: '</child> {{msg}} </span>'}) ؛ <Child Msg =" Hello! "مثال 2:
vue.component ('Child' ، {// camelcase in JavaScript Props: ['mymessage'] ، template: '<span> {{mymessage}} </span>'}) ؛ <!-kebab-case in html-> <child my-message = "hello!"> </fild>8. الدعائم الديناميكية
<viv> <input v-model = "parentmsg"> <br> <child v-bind: meSsage = "parentMsg"> </fild> </viv>
عادةً ما يكون استخدام بناء جملة الاختصار من V-bind أبسط:
<الطفل: message = "parentmsg"> </fild>
9. نوع الربط
Prop هو ربط أحادي الاتجاه افتراضيًا: عندما تتغير خصائص المكون الأصل ، سيتم تمريرها إلى مكون الطفل ، ولكن العكس لن يحدث ذلك. هذا لمنع مكون الطفل من تعديل حالة المكون الأصل عن طريق الخطأ - وهذا سيجعل تدفق بيانات التطبيق يصعب فهمه. ومع ذلك ، من الممكن أيضًا إجبار الارتباط ثنائي الاتجاه أو مرتبة واحدة بشكل صريح باستخدام معدل ربط .sync أو .once:
بناء الجملة المقارن:
<!-الافتراضي هو ربط اتجاه واحد-> <الطفل: msg = "parentmsg"> </child> <!-الربط ثنائي الاتجاه-> <الطفل: msg.sync = "parentmsg"> </child> <!-ربط واحد-> <الطفل: msg.once = "parentmsg"> </child>
أمثلة أخرى:
<modal: show.sync = "showmodal"> <h3 slot = "header"> رأس مخصص </h3> </dedal> </viv>
10. التحقق من التحقق
يمكن للمكونات تحديد متطلبات التحقق للدعائم. يكون هذا مفيدًا عندما يتم إعطاء المكونات للآخرين ، لأن متطلبات التحقق هذه تشكل واجهة برمجة تطبيقات المكون ، مما يضمن استخدام الآخرين المكون بشكل صحيح. في هذا الوقت ، تكون قيمة الدعائم كائنًا يحتوي على متطلبات التحقق:
vue.component ('example' ، {props: {// basic type detection (`null` يعني أي نوع على ما يرام) propa: number ، // مطلوب وسلسلة propb: {type: string ، مطلوب: true} ، // number ، مع القيمة الافتراضية: {type: type ، default: () {return {msg: 'hello'}}} ، // حدد هذا الدعامة كربط ثنائي الاتجاه // إذا كان نوع الربط غير صحيح ، فسيتم إلقاء تحذير prope: {twoway: true} ، propg: {coerce: function (val) {return val + '' // تحويل القيمة إلى سلسلة}} ، النبي: {coerce: function (val) {return json.parse (val) // تحويل سلسلة json إلى كائن}}}}}) ؛أمثلة أخرى:
vue.component ('modal' ، {template: '#modal-template' ، props: {show: {type: boolean ، request: true ، twoway: true}}}) ؛11. استخدم الفتحة لتوزيع المحتوى
يتم استخدام عنصر <Slot> كفتحة توزيع المحتوى في قالب المكون. سيتم استبدال هذا العنصر نفسه.
تسمى فتحة مع سمة الاسم فتحة مسماة. سيتم توزيع المحتوى مع سمة الفتحة على فتحات مسماة بأسماء مطابقة.
على سبيل المثال ، لنفترض أن لدينا مكونًا متعدد التكرار مع قالب مثل:
<viv> <slot name = "One"> </slot> <slot> </slot> <slot name = "two"> </slot> </viv>
قالب مكون الوالدين:
<p-insertion> <p slot = "one"> واحد </p> <p slot = "two"> اثنان </p> الافتراضي A </p> </sulti-insertion>
نتيجة التقديم هي:
<viv> <p slot = "one"> واحد </p> <p> الافتراضي A </p> <p slot = "two"> اثنان </p> </viv>