Vue component programming (1): non-single-file components + component use in three steps (global registration and local registration) + summary of component use in Vue + several points for attention of components + nesting of components

Table of contents

1. Writing applications in the traditional way

2. Definition of components

3. Non-single-file components: one file contains n components

1. Points to pay attention to when creating components

2. The use of components is divided into three steps (emphasis)

1. Create component Vue.extend({ })

2. Register components (local registration and global registration)

3. Use (write component tags where components are needed)

 4. Summary of component usage in Vue

5. Several points for attention of components

1. The problem of component name

2. About component tags

 3. Shorthand way to create components

6. Nesting of components

---

1. Writing applications in the traditional way

Modular development is adopted.

 shortcoming:

1. The dependencies are confusing and not easy to maintain

2. The code reuse rate is not high

2. Definition of components

Realize the collection of local function codes (css, html, js) and resources (mp3, mp4, ttf, .zip) in the application .

Why use component development: Because the functions of a project are complex, component development can make code reuse, simplify project code, and improve operating efficiency.

Components:

3. Non-single-file components : one file contains n components

1. Points to pay attention to when creating components

When a component is created, it does not fix who the component serves (a component is a brick, where it needs to be moved)

Note 1: The configuration item of the component cannot write el (the purpose is: not to fix who the component serves)

Note 2: The configuration item data of the component must be written in a functional style , not an object style. The purpose is: when the component is called in different places, if the component configuration item data is an object, it refers to the data at the same address. Once one part is modified, other places will be automatically modified. If it is functional, return an object, and execute a function to return an object. Once modified somewhere, other places will not be automatically modified .

Note 3: The configuration item temple of the component is used to write the structure (html) of the component, and the template string is used , and the code inside should be wrapped with a div (or a block-level tag) . 

       //第一步：创建学校组件
        const school = Vue.extend({
            template: `
                    <div>
                        <h2>学校名称:{
   
   {schoolName}}</h2>
                        <h2>学校地址:{
   
   {schoolAddress}}</h2>
                    </div>
            `,
            data() {
                return {
                    schoolName: '田中央',
                    schoolAddress: '北京'
                }
            }
        })
        //第一步：创建一个学生组件
        const student = Vue.extend({
            template: `
                    <div>
                        <h2>学生姓名:{
   
   {studentName}}</h2>
                        <h2>学生年龄:{
   
   {studentAge}}</h2>
                    </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    studentAge: '20'
                }
            }
        })

 

2. The use of components is divided into three steps (emphasis)

1. Create a component Vue. extend ({ })

       //第一步：创建学校组件
        const school = Vue.extend({
            template: `
                    <div>
                        <h2>学校名称:{
   
   {schoolName}}</h2>
                        <h2>学校地址:{
   
   {schoolAddress}}</h2>
                    </div>
            `,
            data() {
                return {
                    schoolName: '田中央',
                    schoolAddress: '北京'
                }
            }
        })

2. Register components (local registration and global registration)

Partial registration: Only the template corresponding to the current vm can use this component (partial registration is used more)

Analysis: school:school The first school is the component name, and the second school is the variable name school saved by the component. When writing the component label, the component name is used. 

Global registration: all templates corresponding to vm can use this component

        //第二步:注册全局组件
        Vue.component('hello',hello);    //参数为：组件名hello，组件位置所保存的变量hello

3. Use (write component tags where components are needed)

turn out to be:

 Componentization:

 4. Summary of component usage in Vue

Three steps to use components in Vue:

        One: Define components (create components)

        Two: Register components

        Three: Use components (write component tags, etc.)

One: How to define a component?

        Created using Vue.extend(options), where options are almost the same as the options passed in when new Vue(options), but there are some differences:

        01.el do not write, why? --->In the end, all components must be managed by a vm, and the el in the vm decides which container to serve

        02. Data must be written in functional form, why? --->When avoiding components being reused, there is a reference relationship between data.

        Note: The component structure (html) can be configured using templete

Two: How to register components?

        01. Partial registration: pass in the components option when relying on new Vue

        02. Global registration: rely on Vue.component('component name', component)

Three: Write component tags:

        eg:<school></school>

        

<body>
    <h1>index页面</h1>
    <!-- 创建一个模板 app-->
    <div id="app">
        <p>{
   
   {msg}}</p>
        <hr>
        <hello></hello>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <student></student>
        <!-- 验证组件可以复用 -->
        <student></student>     
    </div>
    <!-- 创建一个模板 app2-->
    <div id="app2">
        <hello></hello>
    </div>
    <script src="./JS/axios.min.js"></script>
    <script src="./JS/axios.config.js"></script>
    <script>
        //第一步：创建学校组件
        const school = Vue.extend({
            template: `
                    <div>
                        <h2>学校名称:{
   
   {schoolName}}</h2>
                        <h2>学校地址:{
   
   {schoolAddress}}</h2>
                    </div>
            `,
            data() {
                return {
                    schoolName: '田中央',
                    schoolAddress: '北京'
                }
            }
        })
        //第一步：创建一个学生组件
        const student = Vue.extend({
            template: `
                    <div>
                        <h2>学生姓名:{
   
   {studentName}}</h2>
                        <h2>学生年龄:{
   
   {studentAge}}</h2>
                    </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    studentAge: '20'
                }
            }
        })
        //第一步：创建一个hello全局组件
        const hello = Vue.extend({
            template: `
                    <div>
                        <p>hello啊!{
   
   {name}}</p>
                    </div>
            `,
            data() {
                return {
                    name: 'wjj',
                }
            }
        })

        //第二步:注册全局组件
        Vue.component('hello',hello);    //参数为：组件名hello，组件位置所保存的变量hello

        new Vue({
            el: '#app',
            // 这里就不写data配置项了，因为要用的数据都在组件里面。也可以写，但是不要求必须是函数式
            data:{
                msg:'你好啊'
            },
            //第二步：注册组件（局部注册）
            components: {
                //组件们都是 key:value的形式
                school, //school:school,   组件名:组件所保存的变量名
                student
            }
        })
        new Vue({
            el:'#app2',
        })
    </script>
</body>

5. Several points for attention of components

1. The problem of component name

A single word consists of:

        The first way of writing (lowercase first letter): eg: school

        The second way of writing (the first letter is capitalized): eg: School

Made up of multiple words:

        The first way of writing: kebab-case naming: my-school

        The second way of writing: CamelCase naming: MySchool (requires Vue scaffolding support)

Remark:

        (1) The component name avoids the existing element names in HTML as much as possible , eg: h2, H2 will not work

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

 

 Note: You can use the name configuration item to specify the name that the component will render in the Vue developer tool. It means that the Vue development tool can see the name configuration item, and only the component name can be seen without the name configuration item:

2. About component tags

The first way of writing: <school></school>

The second way of writing: <school/> can only be used in a scaffolding environment.

Note: When scaffolding is not used, <school/> will cause subsequent components to fail to render.

 3. Shorthand way to create components

const school = Vue.extend(options) can be abbreviated as: const school = options

turn out to be:

        //第一步：创建学校组件
        const school = Vue.extend({
            template: `
                    <div>
                        <h2>学校名称:{
   
   {schoolName}}</h2>
                        <h2>学校地址:{
   
   {schoolAddress}}</h2>
                    </div>
            `,
            data() {
                return {
                    schoolName: '田中央',
                    schoolAddress: '北京'
                }
            }
        })

Shorthand:

        //第一步：创建学校组件
        const school ={
            template: `
                    <div>
                        <h2>学校名称:{
   
   {schoolName}}</h2>
                        <h2>学校地址:{
   
   {schoolAddress}}</h2>
                    </div>
            `,
            data() {
                return {
                    schoolName: '田中央',
                    schoolAddress: '北京'
                }
            }
        }

6. Nesting of components

Nested code demonstration of components:

 

 result:

Commonly used methods in development:

Define an app component (application, the entire web page), which is used to manage all components in the application .

vm only manages one component app, and then app manages all components in the application .

At this time, only one app tag 0.0 is written in the container 

 

<body>
    <h1>index页面</h1>
    <hr>
    <!-- 创建一个模板 app-->
    <div id="app">
        <!-- 第三步：编写组件标签 -->
        <app></app>
    </div>

    <script src="./JS/axios.min.js"></script>
    <script src="./JS/axios.config.js"></script>
    <script>
        //第一步：创建学生组件
        const student = Vue.extend({ //子组件要创建在父组件之前，不然会报错
            name: 'student',
            template: `
                    <div>
                        <h2>学生姓名:{
   
   {name}}</h2>
                        <h2>学生年龄:{
   
   {age}}</h2>
                    </div>
            `,
            data() {
                return {
                    name: 'wxx',
                    age: '22'
                }
            }
        })
        //第一步：创建学校组件
        const school = Vue.extend({
            template: `
                    <div>
                        <h2>学校名称:{
   
   {schoolName}}</h2>
                        <h2>学校地址:{
   
   {schoolAddress}}</h2>
                        <student></student>             
                    </div>
            `,
            data() {
                return {
                    schoolName: '田中央',
                    schoolAddress: '北京'
                }
            },
            components: { //套娃开始  父组件:school   子组件:student   子组件在父组件中去注册   子组件得标签要写在父组件的template中
                student: student
            }
        })
        const hello = Vue.extend({
            template: `
                <h1>{
   
   {msg}}</h1>
            `,
            data() {
                return {
                    msg: '欢迎来到北京学习'
                }
            }
        })

        //app组件
        const app = Vue.extend({
            template: `
                <div>
                    <school></school>
                    <hello></hello>
                </div>
            `,
            components: {
                school,
                hello
            }
        })
        new Vue({
            el: '#app',
            //第二步：注册组件（局部注册）
            components: {
                app
            }
        })
    </script>
</body>

 result:

If you don’t want to write anything in the container #app, what should you do?

         new Vue({
            template:`<app></app>`,
            el: '#app',
            //第二步：注册组件（局部注册）
            components: {
                app
            }
        })

 OK