Shulou(Shulou.com)06/01 Report--

This article mainly shows you "vue how to create components", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to create components in vue" this article.

Way: 1, the use of "Vue.extend" to create a global vue component, syntax for 'Vue.component (' component name', created out of the component template object); 2, the use of "Vue.component" to create components; 3, the use of template elements to define the HTML template structure of the component.

This article operating environment: windows10 system, Vue2.9.6 version, DELL G3 computer.

Several ways for vue to create components

1. Use Vue.extend to create global Vue components

/ / 1.1 use Vue.extend to create a global Vue component / / var com1 = Vue.extend ({/ / template: 'this is a component created using Vue.extend' / / through the template attribute Specify the HTML structure to be displayed by the component / /}) / / 1.2 use Vue.component ('component name', the component template object created) / / Vue.component ('myCom1', com1) / / if the component name uses the hump name when using Vue.component to define the global component, then when referencing the component, you need to change the uppercase hump to lowercase letters and at the same time Two words ago, use-link / / if you don't use the hump, you can just use the name. / / Vue.component ('mycom1', com1) / / Vue.component the first parameter: the name of the component. When referencing the component in the future, it will be a tag form to introduce its / / second parameter: the component created by Vue.extend, where template is the HTML content Vue.component (' mycom1') to be displayed by the component in the future. Vue.extend ({template: 'this is a component created using Vue.extend'}) / / create an Vue instance Get ViewModel var vm = new Vue ({el:'# app', data: {}, methods: {}})

2. Directly use Vue.component to create

/ Note: no matter how the component is created, the template attribute of the component points to the template content that must have and can only have a unique root element Vue.component ('mycom2', {template:' this is the component 123'} created directly using Vue.component) / / create a Vue instance Get ViewModel var vm = new Vue ({el:'# app', data: {}, methods: {}})

3. Outside the controlled # app, use the template element to define the HTML template structure of the component

This is through the template element, externally defined component structure, this way, code can only prompt and highlight easy to use, not bad! This is the private login component Vue.component ('mycom3', {template:' # tmpl'}) / / create a Vue instance and get ViewModel var vm = new Vue ({el:'# app', data: {}, methods: {}}) Var vm2 = new Vue ({el:'# app2', data: {}, methods: {}, filters: {}, directives: {}, components: {/ / define the login of private components within the instance: {template:'# tmpl2'}} }) these are all the contents of the article "how vue creates components" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.