1. V-Bind аббревиатура
<!-Полный синтаксис-> <a v-bind: href = "url"> </a> <!-Abbreviation-> <a: href = "url"> </a> <!-Полный синтаксис-> <Кнопка V-bind: disabled = "onomedynamicCondition"> Кнопка </button> <! : disabled = "noneynamiccondition"> Кнопка </button>
2. V-on Abbreviation
<!-Полный синтаксис-> <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 <Templet 2 </p> </template> v-show <h1 v-show = "ok"> hello! </H1>
5. Список рендеринга для
v-for <ul id = "Пример-1"> <li v-for = "элемент в элементах"> {is item.message}} </li> </ul> var example1 = new vue ({el: '#example-1', data: {elects: [{message: 'foo'}, {message: 'bar'}]}}}); <ul id = "Пример-2"> <li v-for = "элемент в элементах"> {{parentmessage}}-{{$ index}}}-{is item.message}} </li> </ul> varm2 = new Vue ({el: '#Пример-2', data: {starmessage: 'parent', элементы: 'Бар' } ] }});Обнаружение изменения массива
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 elects"> <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', Age: 30}}}});Диапазон значений V-FOR
<Div> <span v-for = "n в 10"> {{n}} </span> </div>6. Методы и обработчики событий
Метод процессор
<div id = "Пример"> <кнопка v-on: click = "Greet"> Greet </button> </div> var vm = new Vue ({el: '#Example', data: {name: 'vue.js'}, // определить методы в `methods`-объект: {greet: function (event) {// в методе` this 'this hell (nemplion' + hell ' + hell alert alert alert (nem. // `event` - это нативное оповещение о событии DOM (event.target.tagname)}}}) // Вы также можете вызвать метод vm.greet () в коде JavaScript; // -> 'Hello Vue.js!'Встроенный процессор заявления
<div id = "Пример-2"> <кнопка v-on: click = "say ('hi')"> same hi </button> <кнопка v-on: click = "say (" что ') "> скажи что </button> </div> new vue ({el:'#Пример-2 ', методы: {say: function (msg) {alert (msg)}}});Иногда также необходимо получить доступ к нативным событиям DOM в встроенном процессоре операторов. Вы можете использовать специальное событие переменной $, чтобы передать его в метод
<Кнопка v-on: click = "sake ('hello!', $ event)"> отправить </button> Методы: {say: function (msg, event) {// Теперь мы можем получить доступ к нативному событию события event.preventDefault ()}};## модификатор события
<!-Предотвратить событие Click от Bubbled-> <a v-on: click.stop = "dothis"> </a> <!-Отправить событие больше не перегружает страницу-> <form v-on: prepect.prevent = "onsubmit"> </form> <!-Модификаторы могут быть объединены. v-on: отправить.prevent> </form>
## Ключевой модификатор
<!-vm.submit () называется только тогда, когда KeyCode составляет 13-> <input v-on: keyup.13 = "upper"> <!-То же, что и выше-> <input v-on: keyup.enter = "Отправить"> <!-Синтаксис AbbReviation-> <input @keyup.enter = "Отправить"> <!-
Все ключевые псевдонима: введите, вкладка, удалить, ESC, пространство, вверх, вниз, влево, справа
## Другие примеры
New Vue ({el: '#demo', data: {newlabel: '', stats: stats}, methods: {add: function (e) {e.preventdefault () if (! this.newlabel) {return;} this.stats.push ({label: this.newlabel, value: 100}); (stat) {if (this.stats.length> 3) {this.stats. $ remove (stat);7. Переход
CSS переход
<div v-if = "show" transition = "expand"> hello </div> затем добавьте правила CSS для .expand-transition, .expand-enter и. Высота: 30px; Заполнение: 10px; фоновый цвет: #EEE; переполнение: hidden;}/* .expand-enter определить начальное состояние входа* //*. Заполнение: 0 10px; непрозрачность: 0;}
Вы можете достичь разных переходов на одном и том же элементе посредством динамического связывания:
<div v-if = "show": transition = "transitionname"> hello </div> new vue ({el: '...', data: {show: false, transitionname: 'fade'}}Кроме того, можно предоставить крючки JavaScript:
Vue.transition ('expand', {aneverenter: function (el) {el.textcontent = 'передентре'}, enter: function (el) {el.textContent = 'enter'}, AfterEnter: function (el) {el.textContent = 'AfterEnter'}, EnterCancelded: function (el) {// gancellation ateave ateave ateave: elbellation ateaiavation ateaiavatation}, elebelatation}, eLeaVation ateaiavatation ateavetation} eLeaVatation} eLeaVation} el.textContent = 'beforeleave'}, оставить: function (el) {el.textContent = 'Leave'}, AfterLeave: function (el) {el.TextContent = 'AfterLeave'}, LeaVeCancelled: function (el) {// gange infellation}});8. Компоненты
1. Зарегистрировать
// Define var MyComponent = Vue.extend({ template: '<div>A custom component!</div>'});// Register Vue.component('my-component', MyComponent);// Create root instance new Vue({ el: '#example'});<div id="example"> <my-component></my-component></div> or write directly as: Vue.component ('my-component', {template: '<div> Пользовательский компонент! </Div>'}); // Создать экземпляр корневого экземпляра New Vue ({el: '#Example'}); <div id = "Пример"> <My-Component> </my-component> </div>2. Используйте PROP для передачи данных
Пример 1:
Vue.component ('’kild', {// объявлять реквизиты: ['msg'], // prop можно использовать в шаблонах // Вы можете использовать` this.msg` для установки шаблона: '<pan> {{msg}} </span>'}); <child msg = "hello!Пример 2:
Vue.component ('Child', {// camelcase in javascript props: ['mymessage'], template: '<pan> {{mymessage}} </span>'}); <!-Kebab-Case в HTML-> <Child My-Message = "Привет!"> </child>3. Динамический реквизит
<div> <input v-model = "parentmsg"> <br> <child v-bind: my-message = "parentmsg"> </child> </div>
Использование синтаксиса аббревиатуры V-Bind обычно проще:
<Ребенок: my-message = "parentmsg"> </child>
4. Prop Plining Type
Опора является односторонним привязкой по умолчанию: когда свойства родительского компонента изменятся, оно будет передано дочернему компоненту, но наоборот не будет. Это должно предотвратить случайное изменение состояния родительского компонента - это затрудняет понимание потока данных приложения. Тем не менее, также возможно явно принудительно привязать к двунаправленному или одному времени привязку с использованием модификатора связывания .sync или.
Сравнительный синтаксис:
<!-По умолчанию-одностороннее привязка-> <Ребенок: msg = "parentmsg"> </child> <!-Двунаправленное связывание-> <Ребенок: msg.sync = "parentmsg"> </child> <!-Single Binding-> <Child: once = "parentmsg"> </wall> Другие примеры: <modal: show.sync = "showmdal"> </hild> другие примеры: <modal: show slot = "Header"> Пользовательский заголовок </h3> </modal> </div>
5. Проверка проведения
Компоненты могут указывать требования проверки для реквизита. Это полезно, когда компоненты передаются другим, потому что эти требования к проверке образуют API компонента, гарантируя, что другие используют компонент правильно. В настоящее время значение реквизита является объектом, который содержит требования к проверке:
Vue.component ('Пример', {props: {// Обнаружение базового типа (`null` означает любой тип ok) propa: номер, // требуемый и строковый Propb: {type: string, требуется: true}, // число, с значением по умолчанию: {type: number, default: 100}, // Значение Default/Array. () {return {msg: 'hello'}}}, // указать эту опору как двустороннее привязка // Если тип привязки не является правильным, предупреждение будет выбрано Prope: {twoway: true}, // propf function function: {valdator: function (value) {return value> 10}}, // convert the Value (value) {return value> 10}}, // convert the value (value) varue). propg: {coerce: function (val) {return val + '' // Конвертировать значение в строку}}, proph: {coerce: function (val) {return json.parse (val) // Конвертировать строку json в объект}}}}});Другие примеры:
Vue.component ('modal', {template: '#modal-template', ops: {show: {type: boolean, требуется: true, twoway: true}}});6. Зарегистрировать
// Определите var mycomponent = vue.extend ({template: '<div> Пользовательский компонент! </Div>'}); // Register vue.component ('my-component', mycomponent); // Создать корневой экземпляр new Vue ({el: '#Exampent'}); <div Id = "Пример"> </my-component> </my-component '});Или написать это напрямую:
Vue.component ('my-component', {template: '<div> Пользовательский компонент! </Div>'}); // Создать экземпляр корневого экземпляра New Vue ({el: '#Example'}); <div id = "Пример"> <My-Component> </my-component> </div>7. Используйте опору для передачи данных
Пример 1:
Vue.component ('’kild', {// объявлять реквизиты: ['msg'], // prop можно использовать в шаблонах // Вы можете использовать` this.msg` для установки шаблона: '<pan> {{msg}} </span>'}); <child msg = "hello!Пример 2:
Vue.component ('Child', {// camelcase in javascript props: ['mymessage'], template: '<pan> {{mymessage}} </span>'}); <!-Kebab-Case в HTML-> <Child My-Message = "Привет!"> </child>8. Динамический реквизит
<div> <input v-model = "parentmsg"> <br> <child v-bind: my-message = "parentmsg"> </child> </div>
Использование синтаксиса аббревиатуры V-Bind обычно проще:
<Ребенок: my-message = "parentmsg"> </child>
9. Prop Plining Type
Опора является односторонним привязкой по умолчанию: когда свойства родительского компонента изменятся, оно будет передано дочернему компоненту, но наоборот не будет. Это должно предотвратить случайное изменение состояния родительского компонента - это затрудняет понимание потока данных приложения. Тем не менее, также возможно явно принудительно привязать к двунаправленному или одному времени привязку с использованием модификатора связывания .sync или.
Сравнительный синтаксис:
<!-По умолчанию-одностороннее привязка-> <Ребенок: msg = "parentmsg"> </child> <!-двунаправленное связывание-> <Ребенок: msg.sync = "parentmsg"> </child> <!-одиночное привязка-> <hood: msg.once = "parentmsg"
Другие примеры:
<modal: show.sync = "showmodal"> <h3 slot = "Header"> пользовательский заголовок </h3> </modal> </div>
10. Проверка проведения
Компоненты могут указывать требования проверки для реквизита. Это полезно, когда компоненты передаются другим, потому что эти требования к проверке образуют API компонента, гарантируя, что другие используют компонент правильно. В настоящее время значение реквизита является объектом, который содержит требования к проверке:
Vue.component ('Пример', {props: {// Обнаружение базового типа (`null` означает любой тип ok) propa: номер, // требуемый и строковый Propb: {type: string, требуется: true}, // число, с значением по умолчанию: {type: number, default: 100}, // Значение Default/Array. () {return {msg: 'hello'}}}, // указать эту опору как двустороннее привязка // Если тип привязки не является правильным, предупреждение будет выбрано Prope: {twoway: true}, // propf function function: {valdator: function (value) {return value> 10}}, // convert the Value (value) {return value> 10}}, // convert the value (value) varue). propg: {coerce: function (val) {return val + '' // Конвертировать значение в строку}}, proph: {coerce: function (val) {return json.parse (val) // Конвертировать строку json в объект}}}}});Другие примеры:
Vue.component ('modal', {template: '#modal-template', ops: {show: {type: boolean, требуется: true, twoway: true}}});11. Используйте слот для распределения контента
Элемент <lot> используется в качестве слота распределения контента в шаблоне компонента. Этот элемент будет заменен.
Слот с атрибутом имени называется названным слотом. Содержание с атрибутом слота будет распространяться по именем слотам с соответствующими именами.
Например, предположим, что у нас есть мультиинсердийный компонент с таким шаблоном, как:
<div> <slot name = "one"> </slot> <lot> </slot> <name = "два"> </slot> </div>
Шаблон родительского компонента:
<Многоинсертирование> <p slot = "one"> one </p> <p slot = "два"> два </p> <p> По умолчанию A </p> </multi-Insertion>
Результатом рендеринга является:
<div> <p slot = "one"> one </p> <p> по умолчанию A </p> <p slot = "два"> два </p> </div>