Nomenclatura
CamelCase (camelCase)
nombre de guión (kebab-case) todo en minúsculas
PascalCase (PascalCase)

Nombre de la carpeta
kebab-case
intente usar sustantivos, intente usar una palabra

Convención de nomenclatura de archivos *.js
3.1 El archivo principal index.js de todos los módulos está en minúsculas
3.2 Los archivos .js que pertenecen a los componentes, use el estilo PascalBase
3.3 Otros tipos de archivos .js, use el estilo kebab-case

*Convención de nomenclatura de archivos .vue
Además de index.vue, otros archivos .vue usan el estilo PascalBase de manera uniforme

*Convención de nomenclatura de archivos .less
Use el estilo de nomenclatura kebab-case de manera uniforme

¡Los tres primeros puntos son más importantes y deben recordarse! ! !

Apéndice 1: Qué es el archivo con el sufijo
.less 1. Qué es menos: LESS trae buenas noticias a los desarrolladores web.Basado en la sintaxis de CSS, introduce funciones como variables, mixins,
operaciones y funciones, simplifica enormemente la escritura de CSS, y reduce el costo de mantenimiento de CSS, como su nombre lo dice, LESS nos permite hacer más con menos código.
2. Por qué hay menos: CSS es un lenguaje no programado. CSS necesita escribir una gran cantidad de código aparentemente ilógico, lo que es un inconveniente para el mantenimiento y la expansión, y no es propicio para reutilizar
símbolos para definir variables.

2 BALNEARIOS

2.1 Introducción al SPA

Una aplicación de una sola página (SPA) es una aplicación con una sola página web, una aplicación web que carga una sola página HTML y actualiza dinámicamente la página a medida que el usuario interactúa con la aplicación.

Aplicación de una sola página:
la página se cargará solo por primera vez, y cada solicitud posterior es solo para obtener los datos necesarios. Luego, los datos obtenidos por el análisis js en la página se muestran en la página

Aplicaciones tradicionales de varias páginas:
para las aplicaciones tradicionales de varias páginas, cada solicitud que devuelve el servidor es una página completa

Ventajas
Reduzca el volumen de solicitudes, acelere la velocidad de respuesta de la página y reduzca la presión sobre el servidor
Mejor experiencia de usuario, lo que permite a los usuarios sentir la fluidez de la aplicación nativa en la aplicación web

2.2 Puntos técnicos del SPA

ajax
El uso de anclas (window.location.hash #) (tecnología de posicionamiento en la página)
hashchange event window.addEventListener("hashchange",function () {})
El evento hashchange es una nueva API en html5, que se usa para monitorear el cambio del valor hash del enlace del navegador. El evento hashchange se activa cuando cambia el identificador de fragmento de la URL

3 Utilice el enrutamiento para crear una aplicación de una sola página con vistas múltiples

3.1 Introducción a las bibliotecas dependientes

Cree un proyecto html básico, cree una página de demostración e introduzca un archivo de biblioteca js

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

3.2 Creación de componentes personalizados

Hay dos formas de crear componentes vue:

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

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

Puntos de conocimiento relacionados:

¿Cuál es la diferencia entre const, var y let en js? escribir un ejemplo

Crear un componente Inicio y un componente Acerca de

//组件名用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 Crear una ruta

3.3.1 ¿Qué es el enrutamiento?

La aplicación de una sola página de Vue se basa en enrutamiento y componentes. El enrutamiento se utiliza para establecer rutas de acceso y mapear rutas y componentes.
En las aplicaciones de página tradicionales, se utilizan algunos hipervínculos para lograr cambios y saltos de página. En la aplicación de página única vue-router, es el cambio entre rutas, lo que en realidad es el cambio de componentes.
El enrutamiento es el administrador de rutas para SPA (aplicación de página única). En términos sencillos, vue-router es el sistema de gestión de ruta de enlace de nuestra aplicación web.

La diferencia entre ruta y enrutador.

ruta: ruta
enrutador: enrutador
El enrutador contiene varias rutas.

3.3.2 Definición de rutas

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

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

3.4 Crear y montar la instancia raíz

Después de usar el enrutamiento, la creación de instancias de Vue será diferente a la anterior. Originalmente, el atributo el se usó para especificar el límite. Después de usar el enrutamiento, la instancia raíz debe montarse usando el método $mount de la instancia de Vue.

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

3.5 Navegación y visualización con los componentes RouterLink y RouterView

<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> área de visualización de contenido de enrutamiento.

Mostrar resultados:

4 propiedades relacionadas con el enlace del enrutador

4.1 a

Un enlace que representa la ruta de destino.

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

Se ha utilizado el ejemplo anterior, para poder usar una cadena o una expresión js

4.2 reemplazar

Si se establece la propiedad replace, se llamará a router.replace() en lugar de router.push() cuando se haga clic, y no quedará ningún registro de historial después de la navegación.
Ejemplo:

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

Si se configura reemplazar, al hacer clic en el enlace se borrará el registro del historial y no se podrá realizar una reversión.

Navegación programática atrás-adelante en navegación en vue

this.$router.go(-1) : Representa volver
this.$router.go(1): Representa el avance
Cambiar a la ruta con ruta /home

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

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

Ejemplo 1: Botones de avance y retroceso programáticos
1) Agregar botones de avance y retroceso en la página,

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

2) Agregar controlador de eventos

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

$ de Vue
Además de las propiedades de los datos, las instancias de Vue también exponen algunas propiedades y métodos de instancia útiles. Todos tienen el prefijo $ para distinguirlos de las propiedades definidas por el usuario.

Mostrar resultados:

Ejemplo 2: cambiar a la ruta especificada :
agregue un botón "ir a casa".

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

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

Mostrar resultados:

Ejemplo 3, configure el componente de visualización predeterminado
Esto es muy simple, simplemente configure la ruta de la ruta correspondiente al componente que debe mostrarse de forma predeterminada en "/"

//定义路由表
var routes = [
    //默认显示home
    {path:'/', component:Home}, 
    {path:'/home', component:Home},
    {path:'/about', component:About}
];

Ejemplo 4:
si se configura reemplazar, al hacer clic en el enlace se borrará el registro del historial y no se podrá realizar una reversión.
Por ejemplo: voluntad

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

Agregue el atributo de reemplazo y modifíquelo a:

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

Se puede ver en la prueba que después de hacer clic en Inicio, se borra el registro del historial. Así que generalmente no se usa.

4.3 agregar

Cuando se establece la propiedad append, la ruta base se agrega antes de la ruta actual (relativa). Por ejemplo, navegamos de /a a una ruta relativa b, si append no está configurado, la ruta es /b, si lo está, es /a/b (path append)

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

4.4 etiqueta

<router-link> se representa como una etiqueta <a> de forma predeterminada y, a veces, desea que <router-link> se represente como algún tipo de etiqueta, como <li>. Por lo tanto, usamos la clase prop de etiqueta para especificar qué tipo de etiqueta, y aún escuchará los clics y activará la navegación. (Si no se especifica ninguna etiqueta, se representará como una etiqueta de forma predeterminada)

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

<li>foo</li>

4.5 clase activa

Establece el nombre de la clase CSS para usar cuando se activa el enlace

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

4.6 clase activa exacta

Configure la clase que debe activarse cuando el enlace coincida exactamente

4.7 evento

Declare eventos que se pueden usar para desencadenar la navegación. Puede ser una cadena o una matriz que contiene cadenas.

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

Mostrar resultados:

Enrutamiento y aplicaciones de una sola página de vista múltiple y propiedades relacionadas con el enlace del enrutador

1 Convenciones de nomenclatura de archivos y carpetas en vue

2 BALNEARIOS

2.1 Introducción al SPA

2.2 Puntos técnicos del SPA

3 Utilice el enrutamiento para crear una aplicación de una sola página con vistas múltiples

3.1 Introducción a las bibliotecas dependientes

3.2 Creación de componentes personalizados

Puntos de conocimiento relacionados:

3.3 Crear una ruta

3.3.1 ¿Qué es el enrutamiento?

3.3.2 Definición de rutas

3.4 Crear y montar la instancia raíz

3.5 Navegación y visualización con los componentes RouterLink y RouterView

4 propiedades relacionadas con el enlace del enrutador

4.1 a

4.2 reemplazar

4.3 agregar

4.4 etiqueta

4.5 clase activa

4.6 clase activa exacta

4.7 evento

Supongo que te gusta