Эта статья относится к официальным документам для составления более подробного кода и является более безопасным учебником для начинающих, чтобы читать и учиться.
Эта статья взята из официального документа:
http://cn.vuejs.org/guide/components.html
Что такое компоненты?
Компонент является одной из самых мощных особенностей Vue.js. Компоненты могут расширять элементы HTML и инкапсулировать многоразовый код. На более высоком уровне компоненты являются пользовательскими элементами, а компилятор Vue.js добавляет к нему специальные функции. В некоторых случаях компоненты также могут быть в форме нативных элементов HTML, расширенных с помощью функции IS.
Определение компонента
① Функция компонентов:
【1】 Расширить HTML -элементы и инкапсулировать многоразовый код;
【2】 Компоненты являются пользовательскими элементами, а компилятор Vuejs может добавлять в них специальные функции;
【3.
② Напишите стандартный компонент:
Он разделен на следующие шаги:
[1] Место, где установлен компонент, должно быть элемент HTML, отображаемый экземпляром VUE. В частности, например, элемент HTML, такой как <div id = ”app»> </div> выше и его дочерние узлы;
【2】 Определите компонент, используйте
var variable name = vue.extend ({template: «Вот содержимое шаблона HTML»}) создается в форме «var btn = vue.extend ({template:« <titne> Это кнопка </button> »})【3】 Зарегистрируйте определенный компонент для экземпляра VUE, который позволит заменить указанный тег на содержимое компонента.
Как код:
// зарегистрировать его на vue.component («Добавить кнопку», btn);
В частности, каждая из следующих тегов (в рамках корневого экземпляра Vue)
<ddd-boutton> </add-button>
Будет
<Кнопка> Это кнопка </button>
Заменил.
[4] Приведенный выше метод является глобальной регистрацией (кнопка «Добавить» каждого экземпляра VUE будет заменена на то, что мы определяем);
Решением является локальная регистрация.
Например, код: (это установлен атрибут шаблона. Вы также можете разместить тег <dddmaton> </add-button> в <div id = "app"> </div>, когда этот атрибут недоступен.
<div id = "app"> </div> <script> // Определить компонент var btn = vue.extend ({template: "<tutry> Это кнопка </button>"}) vue.component ("add-button", btn); // Создание корневого экземпляра, то есть пусть VUE вступит в силу на этом root var vm = new Vue ({el: '#App', шаблон: "<ddd-button> </add-button>"}); </script>③ Локальные регистрационные компоненты:
Проще говоря, это вступает в силу только на этом экземпляре Vue. Конкретный метод состоит в том, чтобы пропустить шаг регистрации;
Затем при объявлении экземпляра VUE он будет добавлен в свойство компонентов (это объект, размещенный в форме KV) (обратите внимание, что это слово имеет еще один s)
Как код:
<div id = "app"> </div> <script> // Определить компонент var btn = vue.extend ({template: "<tutry> Это кнопка </button>"}) // Создать корневой экземпляр, то есть, пусть Vue осуществляется в этом root var vm = new vue ({el: '#App', template: "<dled-button> var-button>" «Добавить кнопку»: BTN}}); </script>Примечание:
Согласно официальному учебному пособию, этот метод (ссылка на локальную регистрацию) также применим к другим ресурсам, таким как директивы, фильтры и переходы.
④Simplify Шаги:
【1】 Определение компонентов и регистрации компонентов завершаются за один шаг:
// Определите компонент vue.component ("Добавить-кнопку", {Template: "<tutry> Это кнопка </button>"});【2】 Во время локальной регистрации определение и этап регистрации завершены:
// Создание корневого экземпляра, то есть пусть Vue вступит в силу на этом корне var vm = new Vue ({el: '#App', шаблон: "<ddd-ware> </add-button>", компоненты: {"Add-button": {Template: "<tutne> Это кнопка </button>"}}});⑤data атрибуты
Невозможно напрямую добавлять атрибуты данных в компонент (недействительный);
Причина заключается в том, что если это сделано, атрибут данных компонента может быть объектом, и этот объект также может быть передан извне (например, сначала объявить объект, а затем объект - это значение данных), что может привести к тому, что все копии компонента обмениваются объектом (который извне передается), что очевидно неверно.
Следовательно, атрибут данных должен быть функцией, а затем существует возвратное значение, которое является значением атрибута данных.
И это возвратное значение должно быть совершенно новым объектом (то есть глубокой копией, избегая нескольких компонентов, разделяющих объект);
Как код:
var vm = new Vue ({el: '#App', шаблон: "<ddd-button> </add-button>", компоненты: {"add-button": {template: "<tood> Это кнопка {{btn}} </button>", data: function () {return {btn: "123"};);Кроме того, если это так, значение BTN одинаково (потому что они на самом деле разделяют объект)
<div id = "app"> </div> <div id = "app2"> </div> <script> var obj = {btn: "123"}; var vm = new Vue ({el: '#App', шаблон: "<ddd-button> </add-button>", компоненты: {"add-button": {template: "<tutry> Это кнопка {{btn}} </button>", data: function () {return obj;}}}}}}}}}}}); obj.btn = "456"; var vm2 = new vue ({el: '#app2', шаблон: "<ddd-button> </add-button>", компоненты: {"add-button": {template: "<tutry> Это кнопка {{btn}} </butter>", data: function () {object obj;}}}}}); </script>Примечание:
Когда атрибут EL используется в vue.extend (), он также должен быть функцией.
⑥ Особенности:
[1] Согласно официальному учебному пособию, некоторые элементы HTML имеют ограничения на то, какие элементы могут быть введены в него;
Но на самом деле, я не нашел никаких проблем с собственным тестом, поэтому я не понимаю.
【2】 Дайте мне URL, если что -то действительно произойдет, я изучу его обратно.
http://cn.vuejs.org/guide/components.html#u6a21_u677f_u89e3_u6790
Выше приведено примером анализа определения компонента Vuejs в 8 -й главе Vuejs, представленной вам. Я надеюсь, что это будет полезно для вас. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит вам вовремя. Большое спасибо за вашу поддержку сайту wulin.com!