Component foundation of component-based programming

One 、 Definition of components

1、 Realization Local functions in application Of Code and resources Of aggregate ;

2、 every last Function module All are Components , Each component includes html、css、js Three files ;

Be careful ：

1、 Components No, el attribute , At the time of initial definition, it was not determined which container to serve , Can be... At any time Other components or vm call ,“ A component is a brick , Where to move ”

Two 、 Not a single file component

That is to say a html contained Multiple components ;

1、 Use steps ：

（1） Use extend Create components ：

stay script label Written in , Can contain template attribute Used to add html structure , example ：template:` ... `, example ：const school = Vue.extend({ ... })

data To write Functional expression ;

principle ： Because if it is Object type Words , All the elements Reuse this component when The data used is the same , Easy to cause One Elements change Component data , the other one The data of the element is also With change ; But if it is Functional expression , Every time components are reused , Metropolis Create a new function , Data changes will not affect each other .

（2） Certified components

Partial registration ：new Vue({ components:{ ... } })

Global registration ：<script>Vue.component(' Component name ', Components )</script>

（3） Use components

<school></school>

<div id="root">
        <!--  The third step ： Use of components  -->
        <school></school>
        <student></student>
</div>

<script>

    // First step ： establish school Components 
    const s = Vue.extend({

        // Use template To write html page 
        template:`
            <div>
                <h2> School name ：{
   {schoolName}}</h2>
                <h2> School address ：{
   {address}}</h2>
            </div>
        `,

        // Can't use el Bind the element served by death , When defining components, you must not set el, All components will eventually be made up of one vm Manage and decide which element to serve 
        // el:'#root',

        // Be careful ： there data Write it as a function !
        // Because if it's object-oriented , All elements use the same data when reusing this component , It is easy to cause an element to change the assembled data , The data of another element also changes 
        // But if it's functional , Every time components are reused , Will create a new function , Data changes will not affect each other 
        data(){
            return{
                schoolName:' Silicon Valley ',
                address:' Beijing ',
            }
        }
    })

    // First step ： establish student Components 
    const student = Vue.extend({
        // have access to name Attribute to define the name of the attribute used for display in the developer tool 
        name:'stu',
        
        // Use template To write html page 
        template:`
            <div>
                <h2> The student's name ：{
   {studentName}}</h2>
                <h2> Student age ：{
   {age}}</h2>
            </div>
        `,

        data(){
            return{
                studentName:' Li Si ',
                age:18
            }
        }
    }) 

    // Global registration 
    Vue.component('student',student)

    // establish vue
    new Vue({
        el:'#root',
        // The second step ： Use component labels components Certified components （ Partial registration ）
        components:{
            school:s // Abbreviation form , The complete method is as follows ：school:school
        }
    })
</script>

2、 matters needing attention

（1） Many words make up

Use - Connect , Finally, the page will display the word All capitals ;

example ：new Vue({ components:{ 'my-school':s } }), page ：MySchool

（ important ） In scaffolding ： The first letters of both words are capitalized ;

example ：new Vue({ components:{ MySchool:s } })

（2） One word makes up  

No matter what Initial lowercase （school） still Capitalization （School）, stay On the page Will be displayed as title case In the form of ;

（3） Don't Use html Existing tag name （h2、h3） As Component name ;

（4） label How to write it ：

         double label ：<s></s>

         single label ：<s/>

（5） Create the Abbreviation form ：

You can put Vue.extend Omit , Will automatically call , example ：const school ={ ... }

3、 ... and 、VueComponent

The component is essentially a VueComponent Constructor for , And not defined by programmers , It is Vue.extend Generated ;

We just need to write <school> or <school></school>,vue analysis Will help us create School Instance object , namely ：Vue Help us carry out new VueComponent(options)

Particular attention ： Every time you call Vue.extend All the returned ones are one all-new VueComponent！！

1、 About this The direction of ：

（1） In component configuration ：

data function 、methods function 、watch function 、computed Function , their this All are 【VueComponent Instance object 】

（2）new Vue(options) Configuration in progress ：

data function 、methods function 、watch function 、component Function , What the hell this All are 【vue Instance object 】

2、VueComponent abbreviation vc（ It can also be called Component instance object ）

ps：vue The instance object is abbreviated as ：vm

Four 、VueCpmponent.prototype.__proto__=vm.prototype

Meaning of existence ： Give Way Componentized instances （vc） You can also visit vue Prototype Upper Properties and methods ;