Aprendizaje de base cero de Vue y axios

Configuración de Vue y creación de proyectos.

Antes de hacer esto, primero debes instalar nodejs

instalar andamios

Sitio web oficial

Inicio | Vue CLI (vuejs.org)

Ejecútelo primero y cambie a la fuente espejo de Taobao para una instalación más rápida.

Conjunto de configuración de registro npm http://registry.npm.taobao.org

Crear proyecto

Abra un archivo vacío con el compilador e ingrese el código de creación en la terminal

Aquí están los pasos

Seleccione N

Resultados de ejecución

Configurar el servicio

Después de configurar lo siguiente, puede cambiar el código y el efecto se actualizará en la página en tiempo real, lo cual es muy conveniente para el desarrollo.

Pero solo la versión comunitaria de idea tiene npm disponible aquí.

Sintaxis de plantilla

sintaxis de valor enlazado

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
 
<body>
  <div id="app">
    {
   
   { message }}
    <div>
      <!-- {
   
   {num++}}，不要这么写，别在这里运算，否则可能出错 -->
      {
   
   {num}}
    </div>
    <div>{
   
   {bool}}</div>
    <div>{
   
   { arr.find(v => v.name === '张三')?.age }}</div>
 
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
 
  <script>
    var app = new Vue({
      el: '#app',//element
      //把vue的实例绑定到id是app的上面
      //
      data: {
        message: 'Hello I\'m lmm',
        num: 1,
        bool: true,
        arr: [{ name: '张三', age: 20 }]
      }
    })
  </script>
</body>
 
</html>

Renderizar html (v-html)

<template>
  <div>
    <div>{
   
   {rowHtml}}</div>
    <div v-html="rowHtml"></div>
  </div>
</template>

<script>
export default {
  name:'test',
  data(){
    return{
      rowHtml: '<a href="https://www.taobao.com/">淘宝</a>'
    }
  }
}
</script>

Puede ver que la sintaxis vinculada a valores no puede representar enlaces.

Vincular atributos (v-bind)

Escenarios de uso

1. Vincular atributos HTML

Se utiliza para establecer dinámicamente los atributos de elementos, como href, src, etc.classid

<a v-bind:href="linkUrl">Click here</a>
<img v-bind:src="imageUrl" alt="Dynamic Image">

2. Vincular múltiples atributos

Se pueden vincular varias propiedades mediante la sintaxis de objetos.

<div v-bind="objectProps"></div>

export default {
  data() {
    return {
      objectProps: {
        id: 'my-div',
        class: 'my-class',
        title: 'This is a title'
      }
    }
  }
}

Ejemplo

<template>
  <div>
    <a :href="url">点击这里访问淘宝</a>
    <br>
    <img :src="img" alt="Demo Image">
    <br>
    
  </div>
</template>

<script>
import logo from '@/assets/logo.png';
export default {
  name: 'test',
  data() {
    return {
      url: 'https://www.taobao.com/',
      // img: '@/asset/logo.png'
      //注意要先导入才能用
      img:logo
    }
  }
}
</script>

Enlace de eventos (v-on)

Encuadernación rápida

Escribe directamente en línea

método de unión

<template>
  <div>
    <div :style="{ width: '100px', height: '100px', backgroundColor: color }" @click="changeColor" id="testColor">
      点我
    </div>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      color: 'red' // 初始化颜色为红色
    }
  },
  methods: {
    changeColor() {
      // 切换颜色
      this.color = this.color === 'red' ? 'blue' : 'red';
    }
  }
}
</script>

Sentencia (v-si)

Si es verdadero, renderice el contenido.

<template>
  <div>
    <div v-if="color === '红色'">红色</div>
    <div v-else>黑色</div>

  </div>
</template>

<script>
import logo from '@/assets/logo.png';
export default {
  name: 'test',
  data() {
    return {
      color:'黑色'
    }
  }
}
</script>

Representación de lista (v-for)

Cada elemento debe tener un índice único y una clave de enlace.

En el desarrollo real, cada elemento tiene un índice escrito, por lo que no se utiliza el índice.

Si no, utilice el índice para registrarlo.

<template>
  <div v-for="item in fruits">{
   
   {item}}</div>
  <div v-for="item in user" :key="item.id">用已写好的索引：{
   
   {key}}{
   
   {item.name}}</div>
  <div v-for="(item,index) in user" :key="index">用系统分配的索引：{
   
   {key}}{
   
   {item.name}}</div>

</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      fruits:['苹果','香蕉','西瓜'],
      user:[
        {
          id:'1001',
          name:'alicia'
        },
        {
          id:'1002',
          name:'fafa'
        },
        {
          id:'1003',
          name:'cami'
        }
      ]
    }
  },
  methods: {

  }
}
</script>

Encuadernación bidireccional (modelo v)

<template>
  <div>
    <input type="text" v-model="str">
    <p>{
   
   {str}}</p>
  </div>
</template>

<script>
export default {
  name: 'test',
  data() {
    return {
      str:''
    }
  },
  methods: {

  }
}
</script>

Conceptos básicos de los componentes

ámbito: si agrega este atributo al estilo, significa que el estilo actual solo tiene efecto en el componente actual.

Pasos para usar componentes

Organización de componentes

Lo que la imagen de arriba quiere expresar es que el uso de componentes se puede anidar.

Interacción de componentes de accesorios

prop permite pasar datos entre componentes

Casos de uso

Los componentes principales pasan datos a los componentes secundarios. El componente importado es el componente principal.

App.vue Componente (componente principal):

<template>
  <div id="app">
    <Test :age="age" :name="name" :arr="arr"></Test>
  </div>
</template>

<script>
import Test from "@/components/test";

export default {
  name: 'App',
  components: {
    Test
  },
  data() {
    return {
      age: 18,
      name: 'chen',
      arr: [1, 2, 3]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

test.vue Componentes (subcomponentes):

<template>
  <p>props传递数据</p>
  <div>{
   
   { age }}</div>
  <div>{
   
   { name }}</div>
  <div v-for="i in arr" :key="i">{
   
   { i }}</div>
</template>

<script>
export default {
  name: 'Test',
  props: {
    age: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: ''
    },
    arr: {
      type: Array,
      default: function () {
        return [];
      }
    }
  }
}
</script>

<style>
/* 添加样式 */
</style>

Tipo de accesorio

Cabe señalar que pasar matrices y objetos debe usar funciones para devolver

Interacción de componentes de eventos personalizados

Los eventos personalizados son una forma flexible para que los componentes secundarios interactúen con los componentes principales en Vue. Los componentes secundarios pueden this.$emitdesencadenar eventos a través de y los componentes principales manejan estos eventos a través de detectores de eventos. Esto hace que la comunicación entre componentes sea más modular y clara.

Los eventos personalizados pueden pasar datos en el componente en la dirección inversa. prp puede pasar datos del componente principal al componente secundario. Entonces, se puede lograr la operación inversa mediante el uso de eventos personalizados.$emit

Los componentes secundarios pasan datos a los componentes principales. El componente importado es el componente principal.

subcomponente

<template>
  <button @click="sendMsg">点击传递数据</button>
</template>

<script>
export default {
  name: 'Test',
  data(){
    return{
      msg:'子组件向父组件传递数据'
    }
  },
  methods:{
    sendMsg(){
      this.$emit('onEvent',this.msg)
    }
  }

}
</script>

<style>
/* 添加样式 */
</style>

componente principal

<template>
  <div id="app">
    <Test @onEvent="getMsg"></Test>
    <div>{
   
   {msg}}</div>
  </div>
</template>

<script>
import Test from "@/components/test";

export default {
  name: 'App',
  data(){
    return{
      msg:''
    }
  },
  components: {
    Test
  },
  methods:{
    getMsg(data){
      this.msg = data
    }
  }

}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Ciclo de vida del componente

Descripción general del ciclo de vida

El ciclo de vida de los componentes de Vue se puede dividir en las siguientes etapas:

fase de creación
Fase de montaje
etapa de actualización
fase de destrucción

Cada etapa tiene funciones de enlace de ciclo de vida específicas y puede ejecutar la lógica correspondiente en estas funciones de enlace.

1. Fase de creación

beforeCreate: Se llama después de que se inicializa la instancia pero antes de la observación de datos y la configuración del evento. datay no están disponibles en este momento methods.
created: Se ha creado la instancia y se han completado la observación de datos y la configuración del evento. En este momento, puede acceder a datay methods, computedpero el DOM aún no se ha generado.

2. Etapa de montaje

beforeMount: Se llama antes de que comience el montaje, renderla función se llama por primera vez. En este punto, la plantilla se ha compilado pero aún no se ha representado en el DOM.
mounted: Se llama después de completar el montaje, cuando el componente se ha renderizado en el DOM. Puede acceder a elementos DOM y realizar operaciones DOM. Las solicitudes de red se colocan aquí. Porque después de renderizar el elemento, aún necesita solicitar datos del fondo.

3. Fase de actualización

beforeUpdate: Se llama antes de que se actualicen los datos, renderla función se llamará nuevamente. En este punto, puede realizar algún procesamiento antes de que se actualice el DOM.
updated: Se llama después de que se actualizan los datos, cuando el DOM también se ha actualizado. Puede realizar algunas operaciones que dependen de las actualizaciones de DOM.

4. Fase de destrucción

beforeUnmount: Se llama antes de la descarga, cuando el componente aún puede acceder a sus datos y DOM.
unmounted: Se llama después de que se completa la desinstalación, cuando el componente y todos sus subcomponentes han sido destruidos. Aquí se pueden realizar trabajos de limpieza, como borrar temporizadores, cancelar solicitudes de red, etc.

eje

Instalación e introducción

Métodos de solicitud comunes

Si no se escribe, el valor predeterminado es obtener

Parámetros de consulta (obtener)

<template>
  <div>
    {
   
   {data}}
  </div>
</template>

<script>
export default {
  name: 'Test',
  data(){
    return{
      data:{}
    }
  },
  mounted(){
    this.$axios({
      url: 'http://hmajax.itheima.net/api/city',

      //查询参数
      params: {
        pname: '福建省'
      }
    }).then(result => {
      this.data = result
    })
  }

}
</script>

<style>
/* 添加样式 */
</style>

Envío de datos (publicación)

<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  mounted(){
    this.$axios({
      url: 'http://hmajax.itheima.net/api/register',
      method: 'post',
      data: {
        username: 'clmm1234567',
        password: '123123'
      }
    }).then(result => {
      console.log(result)
    })
  }


}
</script>

<style>
/* 添加样式 */
</style>

Resumir

Encapsulación de solicitudes de red

enrutamiento visual

aprender

Después de aprender el enrutamiento, recuerde seleccionar el enrutador al crear un proyecto vue y el archivo de enrutamiento se configurará automáticamente.

aplicación.vue

<template>
  <div>
    <router-link to="/">首页</router-link>|
    <router-link to="/about">关于</router-link>
    <div>123</div>
    <router-view></router-view>
    <div>321</div>

  </div>
</template>

<script>
// import Test from "@/components/Test.vue";

export default {
  name: 'App',
  components: {
    // Test
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

índice.js

import { createRouter, createWebHashHistory } from 'vue-router';
import HomeView from '../views/HomeView';
import AboutView from '../views/AboutView';

const routes = [
    {
        path: '/',
        name: 'Home',
        component: HomeView
    },
    {
        path: '/about',
        name: 'About',
        component: AboutView
    }
];

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

principal.js

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';

// 创建 Vue 应用实例
const app = createApp(App);

// 配置 axios 实例
app.config.globalProperties.$axios = axios;

// 使用路由
app.use(router);

// 挂载应用
app.mount('#app');

Parámetros de paso de ruta

configuración del enrutador

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path:'/news',
    name:'news',
    component: ()=>import("../views/NewsView")
  },
  {
    path:'/newsDetail/:name',
    name:'newsDetail',
    component: ()=>import("../views/NewsDetailView")
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Nueva vista

<template>
  <div>
    <ul>
      <li><router-link to="/newsDetail/网易">网易新闻</router-link></li>
      <li><router-link to="/newsDetail/百度">百度新闻</router-link></li>
      <li><router-link to="/newsDetail/猾伪">猾伪新闻</router-link></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "NewsView"
}
</script>

<style scoped>

</style>

NoticiasDetallesVer

<template>
  <div>
    <h3>新闻</h3>
    {
   
   {$route.params.name}}
  </div>
</template>

<script>
export default {
  name: "NewsDetailView"
}
</script>

<style scoped>

</style>

Configuración de enrutamiento anidado

índice.js

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    redirect:'/about/b',
    children: [
      {
        path: 'a',
        component: () => import('../views/AboutSub/About_a')
      },
      {
        path: 'b',
        component: () => import('../views/AboutSub/About_b')
      }
    ]
  }

]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

Acerca deView.vue

<template>
  <div class="about">
    <router-link to="/about/a">a     |     </router-link>
    <router-link to="/about/b">b</router-link>
    <router-view></router-view>
    <h1>This is an about page</h1>
  </div>
</template>

Cuando hace clic en la página Acerca de, el valor predeterminado es about_b porque se redirige.

Gestión del estado de Vue

Todos los componentes se pueden administrar de forma centralizada, a diferencia de los accesorios que solo pueden transferir datos entre padres e hijos.

Introducir la gestión estatal.

Verifique vuex al crear el proyecto.

Si marcó vuex al crear el proyecto, los primeros tres pasos a continuación no son necesarios.

núcleo de gestión del estado de vue

Caso: Conceptos básicos de la entrevista

Configurar enrutamiento

Primero haga un efecto de cambio de navegación inferior.

Configurar enrutamiento

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path:'/',
    component:()=>import('@/views/LayOut'),

    children:[
      {
        path:'/collect',
        component:()=>import('@/views/Collect')
      },
      {
        path:'/like',
        component:()=>import('@/views/Like')
      },
      {
        path:'/user',
        component:()=>import('@/views/User')
      },
      {
        path:'/articleList',
        component:()=>import('@/views/ArticleList')
      },
    ]
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

<template>
  <div>

    <div style="background-color: pink; width: 500px; height: 500px;">
      <router-view></router-view>
    </div>
    <nav>
      <router-link to="/articleList">面经 |</router-link>
      <router-link to="/collect">收藏 |</router-link>
      <router-link to="/like">喜欢 |</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

<style>
  a.router-link-active{
    color: red;
  }
</style>

Cabe señalar que se requiere vista de enrutador en Diseño

LayoutEl componente se utiliza como un componente empaquetado, lo que significa que es posible que deba representar el contenido de sus rutas secundarias. El componente Layouten <router-view>se utiliza para mostrar sus subrutas (como /article, /likeetc.). Esto permite que cada ruta secundaria Layoutse represente dentro del componente, y Layoutel componente puede contener un diseño común o una barra de navegación.

En resumen, el contenido del componente de ruta secundario Layoutse <router-view>utiliza para renderizar Layout. De esta manera, puede Layoutadministrar el diseño y la estructura de su aplicación en componentes mientras muestra dinámicamente diferentes subvistas.

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Layout"
}
</script>

<style scoped>

</style>

Representación de solicitud de página de inicio

<template>
  <div>
    <div v-for="item in articles"
         :key="item.id"
    >
      <p>{
   
   {item.stem}}</p>

    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleList",
  data(){
    return{
      articles:[]
    }
  },
  async created(){
    const { data } = await axios.get(
        'https://mock.boxuegu.com/mock/3083/articles',
    );
    this.articles = data.result.rows;
  }
}
</script>

<style scoped>

</style>

Ir a la página de detalles y pasar parámetros

parámetros de consulta

enrutamiento dinámico

Configuración de enrutamiento

{
    path:'/detail/:id',
    component:() => import('@/views/ArticleDetail')
  }

Uso de ruta

@click="$router.push(`/detalle/${item.id}`)"

<template>
  <div>
    <div v-for="item in articles"
         :key="item.id"
         @click="$router.push(`/detail/${item.id}`)"
    >
      <p>{
   
   {item.stem}}</p>

    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleList",
  data(){
    return{
      articles:[]
    }
  },
  async created(){
    const { data } = await axios.get(
        'https://mock.boxuegu.com/mock/3083/articles',
    );
    this.articles = data.result.rows;
  }
}
</script>

<style scoped>

</style>

Recepción de ruta a través de la página de detalles

esto.$route.params.id

<template>
  <div>
    面经详情
  </div>
</template>

<script>
export default {
  name: "ArticleDetail",
  created() {
    console.log(this.$route.params.id)
  }
}
</script>

<style scoped>

</style>

Representación de la página de detalles

<template>
  <div>
    {
   
   {article.content}}
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "ArticleDetails",
  data(){
    return{
      article:{}
    }
  },
  async created() {
    const id = this.$route.params.id
    console.log(this.$route.params.id)
    const {data} = await axios.get(`https://mock.boxuegu.com/mock/3083/articles/${id}`)
    this.article = data.result
  }
}
</script>

<style scoped>

</style>