Vue components and file and folder naming conventions, SPA, creating routes, router-link related properties, routing to create multi-view single-page applications

Table of Contents

1. vue component (emphasis)

1.1 Component introduction

1.2 Local components

1.3 Global components

2. Custom events

2.1 Child -> Parent

2.2 Parent -> Child

3. Naming specifications for files and folders in Vue

4. SPA

4.1 Introduction to SPA

4.2 SPA technical points

5. Use routing to build multi-view single-page applications

5.1 Introduction of dependent libraries

5.2 Create custom components

6. Create routes

6.1 What is routing

6.2 Define routes

6.3 Create and mount the root instance

6.4 Navigation and display using RouterLink and RouterView components

7.router-link related attributes

7.1 to

7.2 replace

7.3 append

7.4 tag

7.5 active-class

7.6 exact-active-class

7.7 events

1.vue component (emphasis)

1.1 Component Introduction

• Component is one of the most powerful features of Vue.
• Components can extend HTML elements and encapsulate reusable code
• The component system allows us to build large applications with independent and reusable small components. The interface of almost any type of application can be abstracted into a component tree.
• Components can be divided into global components and local components

Component naming rules

• Use dash naming, such as: my-component. Vue recommends using this naming rule.
• Naming rules for capital letters, such as: MyComponent

props

• props is a custom property used by the parent component to pass data.
• The data of the parent component needs to be passed to the child component through props, and the child component needs to explicitly declare “prop” using the props option.

1.2 Local Component

Definition syntax: new Vue({el:’#d1′,components:{component name: {configuration options}}})

<div id="app">
     <div>
         <!--title is a custom attribute used to pass value, defined in the props of the custom component -->
         <button-counter title="Test"/>
     </div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //Local custom component
    components: {
    
        //Component name: {configuration item}
        'button-counter': {
            
            //Custom attributes used to pass values
            props:['title'],

            //Template, the html code written in the template, in which you can use {<!-- -->{}}, and Vue elements such as instructions
            template: '<button @click="doClick">{<!-- -->{title}}: local component, click counter: {<!-- -->{count}}</button> ',

            //Note: You need to use functions to define data in custom components
            data: function() {
                return {
                    count: 0
                }
            },
            
            //Define response event function
            methods: {
                doClick: function() {
                    //Note that the function of this here is to return a custom component, not the statement above
                    //vue instance.
                    this.count + + ;
                }
            }
        }
    }
});

Note: Why do we have to use functions to obtain data in custom components?
Each custom component uses a function to declare data, so that each instance can maintain an independent copy of the returned object. You must pay attention to this when defining a custom component.

1.3 Global Component

Modify the local component above into a global component.
Global component definition syntax: Vue.component (component name, configuration options)

<div id="app">
    <div>
        <button-counter title="Test"/>
    </div>
</div>

//Global components
Vue.component('button-counter', {

    //Custom attributes used to pass values
    props:['title'],
    
    //Template, the html code written in the template, in which you can use {<!-- -->{}}, and Vue elements such as instructions
    template: '<button @click="doClick">{<!-- -->{title}}: global component, click counter: {<!-- -->{count}}</button> ',

    //Note: You need to use functions to define data in custom components
    data: function() {
        return {
            count: 0
        }
    },
    
    //Define response event function
    methods: {
        doClick: function() {
            //Note that the function of this here is to return a custom component, not the statement above
            //vue instance.
            this.count + + ;
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    }
});

2. Custom events

Vue custom events are designed for communication between components. In Vue, the parent component passes data to the child component through prop. If you want to pass the data of the child component to the parent component, you can bind the custom event.

• Parent Vue instance->child Vue instance, pass data through prop
• Child Vue instance->parent Vue instance, passing data through events

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //For custom button-counter components, the Vue instance is the parent component
    //Define a test method in the parent component and call the method in the child component
    methods: {
        clickTest: function(msg) {
            console.log("test: " + msg);
        }
    },

    //Local custom component
    components: {

        //Component name: {configuration item}
        'button-counter': {

            //Custom attributes used to pass values
            props:['title'],

            //Template, the html code written in the template, in which you can use {<!-- -->{}}, and Vue elements such as instructions
            template: '<button @click="doClick">{<!-- -->{title}}: local component, count: {<!-- -->{count}}</button>\ ',

            //Note: You need to use functions to define data in custom components
            data: function() {
                return {
                    count: 0
                }
            },

            //Define response event function
            methods: {
                doClick: function() {
                    //Note that the function of this here is to return a custom component, not the vue instance declared above.
                    //Note that the event name uses a dash naming method
                    this.$emit("click-test","hello vue");
                }
            }
        }
    }
});

var vm = new Vue({
    el: '#app',
    data: {
        ts: new Date().getTime()
    },

    //For custom button-counter components, the Vue instance is the parent component
    //Define a test method in the parent component and call the method in the child component
    methods: {
        clickTest: function(msg) {
            console.log("test: " + msg);
        }
    },

    //Local custom component
    components: {

        //Component name: {configuration item}
        'button-counter': {

            //Custom attributes used to pass values
            //Note the use of camel case naming here!!!
            props:['titleDesc'],

            //Template, the html code written in the template, in which you can use {<!-- -->{}}, and Vue elements such as instructions
            template: '<button @click="doClick">{<!-- -->{titleDesc}}: local component, count: {<!-- -->{count}}</button>\ ',

            //Note: You need to use functions to define data in custom components
            data: function() {
                return {
                    count: 0
                }
            },

            //Define response event function
            methods: {
                doClick: function() {
                    //Note that the function of this here is to return a custom component, not the vue instance declared above.
                    //Note that the event name uses a dash naming method
                    this.count + + ;
                    console.log(this.titleDesc);
                }
            }
        }
    }
});

3. File and folder naming conventions in vue

1. Nomenclature
   CamelCase nomenclature (camelCase)
   Dash names (kebab-case) are all lowercase
   PascalCase

2. Folder naming
   kebab-case
   Try to use nouns, try to use one word

3. *.js file naming convention
   3.1 The main file index.js of all modules is all lowercase
   3.2 .js files belonging to components, using PascalBase style
   3.3 For other types of .js files, use kebab-case style

4. *.vue file naming convention
   Except index.vue, all other .vue files use PascalBase style.

5. *.less file naming convention
   Uniformly use kebab-case naming style

The first three points are more important and need to be remembered

Appendix 1: What are the files with the .less suffix?
1. What is less: LESS brings good news to web developers. Based on the syntax of CSS, it introduces variables, Mixin (mixin),
Functions such as operations and functions greatly simplify the writing of CSS and reduce the maintenance cost of CSS. As its name says, LESS allows us to do more things with less code.
2. Why there is less: CSS is a non-programmed language. CSS requires writing a large amount of seemingly illogical code, which is inconvenient to maintain and expand, and is not conducive to reuse.
3. The simplest example of less: use the @ symbol to define variables

四.SPA

4.1 SPA Introduction

A single page web application (SPA) is an application with only one web page. It is a web application that loads a single HTML page and dynamically updates the page when the user interacts with the application.

• Single page application:
  Only the first time the page will be loaded, each subsequent request will only obtain the necessary data. Then, the data obtained by parsing the js in the page will be displayed on the page.

• Traditional multi-page application:
  For traditional multi-page applications, each request to the server returns a complete page.

• Advantage
  Reduces request volume, speeds up page response, and reduces pressure on the server
  Better user experience, allowing users to experience the smoothness of native apps in web apps

4.2 SPA technical points

• ajax
• The use of anchor points (window.location.hash #) (in-page positioning technology)
• hashchange event window.addEventListener(“hashchange”,function () {})
  The hashchange event is a new API in HTML5, which is used to monitor changes in the hash value of browser links. The hashchange event is fired when the URL’s fragment identifier changes

5. Use routing to create a multi-view single-page application

5.1 Introduction of dependent libraries

Create a basic html project, create a demo page and introduce the js library file

5.2 Create custom components

There are two ways to create vue components:

• var MyComonent = Vue.component(“button-counter”, {…});
  Create a vue component and assign it to the MyComponent variable
• const Home = Vue.extend({});
  extend is a grammar that constructs a component. You give it parameters, and it gives you a component. Then you can apply this component to the global registration method Vue.component, or use it in any Vue template.

Relevant knowledge points:
What is the difference between const, var and let in js? Write an example each

Create a Home component and About component

//The component name uses PPascalCase style
const Home = Vue.extend({
    //A root element must be defined as a container to wrap the content elements in the template
    template: '<div><h1>Home component</h1><div>Home component content area</div></div>'
});

const About = Vue.extend({
    //A root element must be defined as a container to wrap the content elements in the template
    template: '<div><h1>About component</h1><div>About component content area</div></div>'
});

6. Create route

6.1 What is routing

Vue’s single-page application is based on routing and components. Routing is used to set access paths and map paths and components.
Traditional page applications use some hyperlinks to achieve page switching and jumps. In the vue-router single-page application, the switching between paths is actually the switching of components.
Routing is the path manager for SPA (Single Page Application). To put it more simply, vue-router is the link path management system of our WebApp.

The difference between route and router

• route: route
• router：router
• The router contains multiple routes

6.2 Define routing

//Define the route, "/" represents the root path, the name attribute can be used in the route, but it is not recommended to use it once.
var routes = [
    {path: '/home',component: Home},
    {path: '/about',component: About}
];

//Create router instance
const router = new VueRouter({
    routes: routes
});

6.3 Create and mount root instance

After using routing, the creation of Vue instances will be different from before. In the past, the el attribute was used to specify the boundary. After using routing, you need to use the Vue instance $mount method to mount the root instance.

//Create and mount the root instance
var vm = new Vue({
    //el: '#app',
    //Put the route into the vue instance
    router: router,
    data: {
        ts: new Date().getTime()
    }
}).$mount("#app");

6.4 Navigation and display using RouterLink and RouterView components

<div>
    <router-link to="/home">go to Home</router-link>
    <router-link to="/about">go to aboue</router-link>
</div>
<div>
     <router-view></router-view>
</div>

Routing content display area.

Seven.router-link related attributes

7.1 to

Link representing the destination route
<router-link to=”/home”>Home</router-link>
Home
The above example has been used, to can use either string or js expression

7.2 replace

If the replace attribute is set, router.replace() will be called instead of router.push() when clicked, and no history record will be left after navigation.
Example:

<router-link :to="{ path: '/home'}" replace></router-link>

If replace is configured, clicking the link will cause the history record to be cleared and rollback can no longer be performed.

Back-forward-programmatic navigation in navigation in vue

• this.$router.go(-1): represents going back
• this.$router.go(1): represents progress
• Switch to the route with path /home

this.$router.push({
       path:'/home'
});
//Or use path, recommended path
this.$router.push({
       path:'/home'
});

Example 1: Programmatic forward and backward buttons
1) Add forward and back buttons to the page,

<p>
    <button @click="previous">Forward</button>
    <button @click="next">Back</button>
</p

2) Add event handler

methods: {
    //go ahead
    previous: function() {
        this.$router.go(1);
    },
    //Back
    next: function() {
        this.$router.go(-1);
    }
}

vue $
In addition to data properties, Vue instances also expose some useful instance properties and methods. They are all prefixed with $ to distinguish them from user-defined properties

Example 2: Switch to the specified route:
Add a “Go Home” button.

<button @click="gotohome">Go home</button>

gotohome: function() {
    console.log("go to home");
    this.$router.push({
        path: '/home'
    });
}

Example 3, setting the default displayed components
This is very simple, just set the path of the route corresponding to the component that needs to be displayed by default to “/”

//Define routing table
var routes = [
    //Display home by default
    {path:'/', component:Home},
    {path:'/home', component:Home},
    {path:'/about', component:About}
];

Example 4:
If replace is configured, clicking the link will cause the history record to be cleared and rollback can no longer be performed.
For example: will

<router-link to="/home">Home</router-link>

Add the replace attribute and modify it to:

<router-link to="/home" replace>Home</router-link>

Through testing, you can see that after clicking home, the history record is cleared. So generally not used.

7.3 append

After setting the append attribute, the base path is added before the current (relative) path. For example, we navigate from /a to a relative path b. If append is not configured, the path is /b. If append is configured, it is /a/b (path append)

<router-link :to="{ path: 'relative/path'}" append></router-link>

7.4 tag

is rendered as an tag by default. Sometimes you want to be rendered as a certain tag, such as

<router-link to="/foo" tag="li">foo</router-link>

<router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>