Nomenclature
CamelCase (camelCase)
dash naming (kebab-case) all lowercase
PascalCase (PascalCase)

Folder name
kebab-case
try to use nouns, try to use a word

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

*.vue file naming convention
In addition to index.vue, other .vue files use the PascalBase style uniformly

*.less file naming convention
Use kebab-case naming style uniformly

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

Appendix 1: What is the file suffixed with
.less 1. What is less: LESS brings good news to web developers. Based on CSS syntax, it introduces functions such as variables, mixins,
operations and functions , greatly simplifies the writing of CSS, and reduces the cost of CSS maintenance, as its name says, LESS allows us to do more with less code.
2. Why there is less: CSS is a non-programmed language. CSS needs to write a lot of seemingly illogical code, which is inconvenient for maintenance and expansion, and is not conducive to reuse
. symbols to define variables

2 SPA

2.1 Introduction to SPA

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

Single-page application:
The page will be loaded only for the first time, and every subsequent request is only to obtain the necessary data. Then, the data obtained by the js parsing in the page is displayed on the page

Traditional multi-page applications:
For traditional multi-page applications, each request the server returns is a complete page

Advantages
Reduce the request volume, speed up the page response speed, and reduce the pressure on the server.
Better user experience, allowing users to feel the smoothness of the native app in the web app

2.2 SPA technical points

ajax
The use of anchors (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 the change of the hash value of the browser link. The hashchange event is fired when the fragment identifier of the URL changes

3 Use routing to build a multi-view single-page application

3.1 Introducing Dependent Libraries

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

<script src="js/vue.js"></script>
<script src="js/vue-router.min.js"></script>

3.2 Creating custom components

There are two ways to create vue components:

var MyComonent = Vue.component("button-counter", {...});
创建一个vue组件并赋给MyComponent变量

const Home = Vue.extend({});
extend是构造一个组件的语法器. 你给它参数，他给你一个组件,然后这个组件你可以作用到Vue.component这个全局注册方法里，也可以在任意vue模板里使用

Related knowledge points:

What is the difference between const, var and let in js? write an example

Create a Home component and About component

//组件名用PPascalCase风格
const Home = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: '<div><h1>Home组件</h1><div>Home组件内容区</div></div>'
});

const About = Vue.extend({
    //必须定义一个根元素作为容器,包裹模板中的内容元素
    template: '<div><h1>About组件</h1><div>About组件内容区</div></div>'
});

3.3 Create a route

3.3.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.
In traditional page applications, some hyperlinks are used to achieve page switching and jumping. In the vue-router single-page application, it is the switching between paths, which is actually the switching of components.
Routing is the path manager for SPA (Single Page Application). In layman's terms, 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

3.3.2 Defining Routes

//定义路由，"/"代表根路径，路由中可以使用name属性，一遍情况不建议使用
var routes = [
    {path: '/home',component: Home},
    {path: '/about',component: About}
];

//创建路由器实例
const router = new VueRouter({
    routes: routes
});

3.4 Create and mount the root instance

After using routing, the creation of Vue instances will be different from before. Originally, the el attribute was used to specify the boundary. After using routing, the root instance needs to be mounted using the $mount method of the Vue instance.

//创建和挂载根实例
var vm = new Vue({
    //el: '#app',
    //将路由放入vue实例
    router: router,
    data: {
        ts: new Date().getTime()
    }
}).$mount("#app");

3.5 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>

<router-view></router-view> routing content display area.

Show results:

4 router-link related properties

4.1 to

A link representing the destination route

<router-link to="/home">Home</router-link><!-- 字符串-->
<router-link v-bind:to="'home'">Home</router-link><!-- 使用 v-bind 的 JS 表达式 -->

The above example has been used, to can use either a string or a js expression

4.2 replace

If the replace property 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 no rollback can be performed.

Back-forward-programmatic navigation in navigation in vue

this.$router.go(-1) : Represents going back
this.$router.go(1): Represents moving forward
Switch to the route with path /home

this.$router.push({    
       path:'/home'
});

//或者使用path，推荐path
this.$router.push({    
       path:'/home'
});

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

<p>
    <button @click="previous">前进</button>
    <button @click="next">后退</button>
</p

2) Add event handler

methods: {
    //前进
    previous: function() {
        this.$router.go(1);
    },
    //后退
    next: function() {
        this.$router.go(-1);
    }
}

Vue 's $
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

Show results:

Example 2: Switch to the specified route :
Add a "go home" button.

<button @click="gotohome">回家</button>

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

Show results:

Example 3, set the default display component
This is very simple, just set the path of the route corresponding to the component that needs to be displayed by default to "/"

//定义路由表
var routes = [
    //默认显示home
    {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 no rollback can 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>

It can be seen from the test that after clicking home, the history record is cleared. So generally not used.

4.3 append

When the append property is set, 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 it is, it is /a/b (path append)

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

4.4 tag

<router-link> is rendered as an <a> tag by default, and sometimes you want <router-link> to render as some kind of tag, such as <li>. So we use the tag prop class to specify what kind of tag, and it will still listen for clicks and trigger navigation. (If no tag is specified, it will be rendered as a tag by default)

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

<li>foo</li>

4.5 active-class

Sets the CSS class name to use when the link is activated

<style>
	.activeClass{
	color: #FF0000;
	}
</style>

4.6 exact-active-class

Configure the class that should be activated when the link is matched exactly

4.7 event

Declare events that can be used to trigger navigation. Can be a string or an array containing strings.

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

Show results:

Routing & multi-view single-page application & router-link related properties

1 File and folder naming conventions in vue

2 SPA

2.1 Introduction to SPA

2.2 SPA technical points

3 Use routing to build a multi-view single-page application

3.1 Introducing Dependent Libraries

3.2 Creating custom components

Related knowledge points:

3.3 Create a route

3.3.1 What is routing

3.3.2 Defining Routes

3.4 Create and mount the root instance

3.5 Navigation and display using RouterLink and RouterView components

4 router-link related properties

4.1 to

4.2 replace

4.3 append

4.4 tag

4.5 active-class

4.6 exact-active-class

4.7 event

Guess you like