Что такое компоненты?
Компонент является одной из самых мощных особенностей Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать многоразовый код. На более высоком уровне компоненты являются пользовательскими элементами, а компилятор Vue.js добавляет к нему специальные функции. В некоторых случаях компоненты также могут быть в форме нативных элементов HTML, расширенных с помощью функции IS.
Далее я представлю вам основные знания о односторонних переплетах Vuejs, двустороннем переплете, трансляции списка и ответных функциях. Конкретные детали следующие:
(I) одностороннее переплет
<div id = "app"> {{message}} </div> <script> new Vue ({el: '#App', data: {message: 'hello vue.js!'}}) </script>①e должен означать привязку, идентификатор привязки =
Это также можно изменить на следующее:
<div> {{сообщение}} </div>EL: '.App',
Так же эффективно.
Но если их много, это будет работать только для первого:
<div> {{message}} </div> <div> {{message}} </div> hello vue.js! {{message}}② Переменная сообщения в данных представляет значение {{Сообщение}
(2) Двусторонняя связка
<div id = "app"> {{message}} <br/> <input v-model = "message"/> </div> <script> new Vue ({el: '#App', data: {message: 'hello vue.js!'}}) </script>Эффект:
① Начальное значение находится в поле ввода ввода, а значение - значение атрибута сообщения в данных;
② Изменение значения ввода поле может повлиять на внешнее значение;
(Iii) возвращаемое значение функции
<div id = "app"> {{message ()}} <br/> <input v-model = "message ()"/> </div> <script> new Vue ({el: '#App', data: {message: function () {return 'hello vue.js!';}}}) </script>Эффект:
① Выходное значение также является возвращающимся значением сообщения;
② Недостатки: потеря двустороннего переплета!
(Iv) Список рендеринга
<div id = "app"> <ul> <li v-for = "list in todos"> {{list.text}} </li> </ul> </div> <script> new Vue ({el: '#App', data: {todos: [{text: "1st"}, {text: "2nd"}, {{3r? </script>Список в v-for похож на i in in in
Лично,
① Список в Todos можно понять как для списка в Todos
② Затем поймите список. Текст следующей строки как Todos [List] .Text
Тогда где этот тег V-для, он скопируется в нем несколько раз.
(V) Процесс ввода пользователя
<div id = "app"> <input v-model = "message"> <input type = "button" value = "value +1" v-on: click = "Add"/> <input type = "value =" value-1 "v-on: click =" minus "/> <input type =" value = "reset"/> v-on: click = reset "/> </> div> <script> vue (el vue (el vue (el vue> vue (elap Сообщение: 1}, методы: {add: function () {this.message ++;Эффект:
① Для значения окна ввода нажмите кнопку «Добавить один раз», и значение будет +1;
② Если он не может быть добавлен, результат будет возвращен таким образом, если нормальное выражение добавлено неправильно, например, NAN;
③ Значение сообщения в данных является начальным значением;
④ Методы - это коллекции функций, разделенных запятыми;
⑤ При получении значения добавьте это, например, This.Message получает значение сообщения.
(Vi) Многофункциональный
<div id = "app"> <input v-model = "val" v-on: keypress.enter = "addtolist"> <ul> <li v-for = "val в значениях"> {val.val}} <input type = "value =" delete "v-on: click = removelist ($ index)"/> </li> </ul> <crelist ($ index) "/> </li> </ul> <crelist ($ index)"/> </li> </ul> <crelist ($ index) '#App', Data: {val: "1", значения: []}, методы: {addTolist: function () {var val = parseint (this.val.trim ()); String (val + 1);Эффект:
① Значение в исходном поле ввода составляет 1;
② Нажмите Введите в поле ввода, чтобы преобразовать содержимое окна ввода в номер и добавить его в список. Преобразованный номер и кнопка удаления в списке, и значение в поле ввода будет изменено на значение, преобразованное в число и добавлено.
Как показано на картинке:
③ Его добавление использует двустороннее привязка, подтолкните входное значение к массиву значений в данных, а затем использует эффект списка рендеринга для вывода нескольких строк значений.
④in Кнопка тега, имя параметра функции дается параметр, который является индексом строки, а имя параметра - $ index
⑤ В теге имя функции запускаемой функции может быть добавлено с помощью кронштейнов или без скобков. Фактическое измерение, по -видимому, не имеет никакого эффекта.
(7) Краткое описание и API (1)
① {{имя переменной}}
Представляет связанную переменную, это. Имя переменной требуется при вызове
② v-model = ”переменная»
Используйте двустороннее привязка. Если тип не добавляется к входу, это текст. Если добавлен тип, это тип, например:
<input v-model = "date" type = "date"/> <li> {{date}} </li>Значение окна ввода типа даты будет связано вместе с содержимым, отображаемым тегом LI.
③ v-on: click = ”имя функции»
Эта функция запускается при нажатии, либо () может быть добавлено или нет. Индекс $ используется в качестве параметра для представления индекса, а значение индекса начинается с 0.
④ v-for
После обновления содержимого массива двусторонняя граница будет обновлена в режиме реального времени, как и V-модель;
Подобно утверждению for in, он используется много раз
⑤ V-on: событие
То есть и запускаемое событие, есть нажмите (нажмите), Keypress (нажмите)
События могут сопровождаться более конкретными вещами, такими как KeyPress.Enter - это возврат перевозки, keyPress.space - это пространство и т. Д.
Больше необходимо просмотреть
⑥ Новый Vue
Новым экземпляром Vue, затем передайте объект в качестве параметра этому экземпляру;
в:
EL означает связанный шаблон (он будет совпадать с первой границей)
Данные представляют данные, которые можно использовать непосредственно, например, в V-модели или {{имя переменной}}
методы
⑦ переменные вызовы внутри функции
Под этим. Имя, например:
data: {val: "1", значения: []}, методы: {addtolist: function () {console.log (this.val);Это. Val здесь представляет собой данные.
<li v-for = "val in values"> {{val.val}} <input type = "value =" delete "v-on: click =" removelist ($ index) "/> </li>Что касается причины, я лично думаю, что VAL здесь находится в рамках V-FOR, поэтому VAL в Val в значениях имеет более высокий приоритет в цепочке областей.
Выше приведено подробное объяснение первого вводного учебника Vuejs, представленного вам редактором (одностороннее связывание, двустороннее привязка, рендеринг списка, функция ответа). Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!