Chapter two: Componentized programming of Vue

1. Basic understanding of components (non-single-file components)

1.1 Three steps to using components:

Define component (create component)

Create with vue.extend (options), where options and new Vue(options) passed the same options, but there are a few differences (el, data)

// Create student component const student = Vue. Extend ({template: '// The template must be wrapped with the root element <div class="demo"> <h2> {{studentName}}</h2> <h2> {{age}}</h2> < button@click ="showName"> </ button@click ="showName">, // el:'#root', It is up to the VM to decide which container to serve. Data (){return {studentName:' haowue ', age:'20'}}, methods: {showName(){alert(this.studentname)}},})Copy the code
2. Register components

1. Partial registration: Pass in the Components option when relying on new Vue

// create vm new Vue({el:'#root', data:{MSG :' hello! }, // Step 2: register component (local register) components:{//student: short for student, key is the component name, value is the transfer variable (component address),}})Copy the code

2. Global registration: by Vue.component(‘ component name ‘, component)

Vue.component('student',student)
Copy the code
3. Use component (write component tag)
<div id='root'> <! <student></student> </div>Copy the code

1.2 Why Vue component data must be a function:

If data is a function, each time a component is reused, a new copy of data is returned, similar to creating a private data space for each component instance and letting each component instance maintain its own data. However, simply writing in object form makes all component instances share a copy of data, which will result in a result that all changes will change — avoiding reference relationships when components are reused.

1.3 About Components

1. About component names:

One word:

  • First (lowercase) : school
  • Second (uppercase) : School(echoes vue developer tools)

Multiple words:

  • The first (kebab-case naming) is my-school

  • Second (CamelCase naming) : MySchool (requires Vue scaffolding support)

Remark:

(1). Avoid existing HTML element names as much as possible, such as h2 or h2.

(2). You can use the name configuration item to specify the name of the component to render in the developer tools.

2. About component labels:

  • The first way:
  • The second way is:

Note: When scaffolding is not used, subsequent components cannot be rendered.

3. A shorthand:

Const school = vue. extend(options)

4. Non-single file components: A file contains N components

  1. Template authoring without prompts
  1. There is no build process to convert ES6 to ES5
  1. Component CSS is not supported
  1. It’s almost never used in real development

1.4 Component nesting

Standardized development:

Application is the root component of the VM, which is used to manage all components in the application

Note: All child components are placed before the parent component

Example:

<body> <div id="root"> <app></app> </div> </body> <script type="text/javascript"> vue.config. productionTip = false // Block Vue generates production prompts at startup. // Define student component const student = vue. extend({name: 'student', template: ` < div > < h2 > student's name: {{name}} < / h2 > < h2 > student age: {{age}} < / h2 > < / div > `, data () {return {name: "bright moon", the age: }}}) const school = vue. extend({name: 'school', template: ` < div > < h2 > school name: {{name}} < / h2 > < h2 > school address: {{address}} < / h2 > < student > < / student > < / div > `, data () {return {name: }}, // Register component (local) components: }}) // Define hello const hello = vue.extend ({template: '<h1>{{MSG}}</h1>', data() {return {MSG: 'Welcome! }}}) // Define app component const app = vue. extend({template: '<div> <hello></hello> <school></school> </div>', components: // Template: '<app></app>', el: '#root', // Register component (local) components: { app } }) </script>Copy the code

Effects in vue developer tools:

VueComponent constructor

Example: Create a school component

const school = Vue.extend({ name: 'school', template: ` < div > < h2 > school name: {{name}} < / h2 > < h2 > school address: {{address}} < / h2 > < / div > `, data () {return {name: 'the haoyue, address: // Create vm const vm = new Vue({el: '#root', Components: {school,}})Copy the code

1. The school component is essentially a constructor named VueComponent, which is not defined by programmers but generated by vue.extend.

console.log('@',school)

2. We just need to write<school/>or<school></school>, Vue will help us to create the instance object of the school component, which Vue will help us to execute:new VueComponent(options).

3. Special note: Each callVue.extend, returns a brand new VueComponent

Vue source code:

Here we declare a function (VueComponent) using function, and each call produces a new function definition

4. This refers to:

(1) component configuration:

The data function, the function in methods, the function in watch, and the function in computed are VueComponent instance objects.

Example:

const school = Vue.extend({ name: 'school', template: <div> <button @click="showName"> { showName() { console.log('showName', this) } }, })Copy the code

(2). New Vue(options) configuration:

The data function, the function in methods, the function in watch, and the function in computed are all Vue instances.

5.VueComponent instance object, hereafter referred to as VC (also known as: component instance object). Vue instance object, hereafter referred to as VM.

Vc and VM are twins: VC has all the functions that VM does, but VM doesn’t have all the functions that VC does — THE VM can specify which container the instance serves via el

3. Built-in relationship between Vue and VueComponent

  • Explicit prototype: prototype
  • Implicit archetypes:__proto__

Prototype: Each constructor has a prototype property that points to an object that is the prototype of the constructor instance

The prototype chain: Each instance has a __proto__ attribute pointing to the constructor’s prototype object to get properties and methods on the prototype object, and the constructor’s prototype object also has a __proto__ attribute pointing to another prototype object, and so on, until the very end of the prototype chain is null. So you go up one level at a time and you create a chain of prototypes.

The essence of stereotype chain: The implicit stereotype attribute of an instance always points to its creator’s stereotype object

Features: An implementation inherits properties and methods from one object to another

Constructors all have a Prototype property, which is the explicit prototype (property) pointing to the prototype object

Instance objects have a __proto__ attribute, that is, implicit archetypes (attributes) point to archetypes

Each prototype object has a Consttuctor property pointing to the constructor

The constructor new instantiates the instance object

Relationship between Vue and Component

Vue does one thing: make the implicit stereotype properties of VueComponent stereotypes that should point to Object stereotypes point to Vue stereotypes — the stereotypes of VueComponent stereotypes are Vue stereotypes

4. Single-file components

1. What is a single file component: file name to. The Vue end contains HTML, JS, and CSS.

2 Basic Structure:

<template> // component structure <div> // the contents of the template must be wrapped around a tag </div> </template> <script> // component interaction related code // exposed to use export default{ } </script> <stytle> // component style </stytle>Copy the code

\