vue 基础回顾

vue 基础回顾

一、重要文件

  • node_modules:当前项目依赖的 js 包
  • assets:静态资源存放目录(图片)
  • components:公共组件存放目录
  • App.vue:主组件,页面的入口文件
  • main.js:整个项目入口文件
  • package.json:项目配置信息、依赖包管理
  • vue.config.js: vue-cli 配置文件

二、常用配置及操作

(1)修改端口

在 vue.vonfig.js 文件中做以下配置

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070
  }
})

三、基本使用方法

1. vue 组件

  • <template> (结构)
    • 只有一个根元素
    • 写html代码
  • <style> (样式)
    • 编写 CSS
    • 全局样式: 影响所有组件
    • 局部样式:影响当前组件
  • <script> (逻辑)
    • 空值模板的数据和行为

2. 文本插值

  • 作用:用来绑定 data 方法返回的对象属性
  • 用法:{{插值表达式}}
<template>
  <div>
    <h1>Hello, {{ name }}</h1>
    <p>You are {{ age }} years old.</p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '河狸',
      age: 18
    }
  }
}
</script>

3. 属性绑定

  • 作用:为标签的属性绑定 data 方法中返回的属性

  • 用法:v-bind:xxx,简写为 :xxx

<template>
  <div>
    <div><input type="text" v-bind:value="name"></div>
    <div><input type="number" v-bind:value="age"></div>
    <div><img :src="src"/></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '河狸',
      age: 18,
      src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'
    }
  }
}
</script>

4.事件绑定

  • 作用:为元素绑定对应的事件

  • 用法:v-on:xxx,简写为 @xxx

<template>
  <div>
    <input type="image" id="image" alt="Login" :src="src" v-on:click="handle1" />
    <input type="image" id="image" alt="Login" :src="src" @click="handle2" />
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '河狸',
      age: 18,
      src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'
    }
  },
  methods: {
    handle1() {
      alert('我是小河狸~')
    },
    handle2() {
      alert('我是大笨蛋~')
    }
  }
}
</script>

5.双向绑定

作用:表单输入项和 data 方法中的属性进行绑定,任意一方改变都会同步给另一方

用法:v-model

<template>
  <div>
    <div><input type="text" v-model="name"></div>
    <div><input type="text" v-bind:value="name"></div>
    <div><button @click="handle3">改名</button></div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '河狸',
      age: 18,
      src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'
    }
  },
  methods: {
    handle1() {
      alert('我是小河狸~')
    },
    handle2() {
      alert('我是大笨蛋~')
    },
    handle3() {
      this.name = '呆呆的小河狸'
    }
  }
}
</script>

6. 条件渲染

  • 作用:根据表达式的值来动态渲染页面元素

  • 用法:v-if、v-else、v-else-if

<template>
  <div>
    <h1>Hello, 
    <nobr v-if="age <=20">小河狸</nobr>
    <nobr v-else-if="age <=50">大河狸</nobr>
    <nobr v-else>超大河狸</nobr>
    </h1>
    <p>You are {{ age }} years old.</p>
  </div>
  <div>
    <div><input type="text" v-model="name"></div>
    <div><input type="number" v-model="age"></div>
    <div>
      <input type="image" id="image" alt="Login" :src="src" v-on:click="handle1" />
      <input type="image" id="image" alt="Login" :src="src" @click="handle2" />
    </div>
    <div><button @click="handle3">改名</button></div>
    
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name: '河狸',
      age: 18,
      src: 'https://th.bing.com/th/id/OIP.1a0WnlpFlpxePqohXEjh4QHaMM?rs=1&pid=ImgDetMain'
    }
  },
  methods: {
    handle1() {
      alert('我是小河狸~')
    },
    handle2() {
      alert('我是大笨蛋~')
    },
    handle3() {
      this.name = '呆呆的小河狸'
    }
  }
}
</script>

7. axios

Axios 是一个基于 promise 的 网络请求库,作用于浏览器和 node.js 中。使用Axios可以在前端项目中发送各种方式的HTTP请求。

  • 安装命令:npm install axios

  • 导入:import axios from 'axios'

参数说明:

  • url:请求路径
  • data:请求体数据,最常见的是JSON格式数据
  • config:配置对象,可以设置查询参数、请求头信息

注:在使用axios时,经常会遇到跨域问题。为了解决跨域问题,可以在 vue.config.js 文件中配置代理:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7070,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

axios的post请求示例:

axios.post('/api/admin/employee/login',{
      username:'admin',
      password: '123456'
    }).then(res => {
      console.log(res.data)
    }).catch(error => {
      console.log(error.response)
    })

axios的get请求示例:

axios.get('/api/admin/shop/status',{
        headers: {
          token: ‘xxx.yyy.zzz’
        }
      })

axios提供的统一使用方式示例二(可以发送各种方式的请求):

axios({
      url: '/api/admin/employee/login',
      method:'post',
      data: {
        username:'admin',
        password: '123456'
      }
    }).then((res) => {
      console.log(res.data.data.token)
      axios({
        url: '/api/admin/shop/status',
        method: 'get',
        params: {id: 100},
        headers: {
          token: res.data.data.token
        }
      })
    }).catch((error) => {
      console.log(error)
    })

四、路由 Vue-Router

vue 属于单页面应用,所谓路由,就是根据浏览器路径不同,用不同的视图组件替换这个页面内容。

1. 路由组成

  • VueRouter:路由器,根据路由请求在路由视图中动态渲染对应的视图组件
  • :路由链接组件,浏览器会解析成
  • :路由视图组件,用来展示与路由路径匹配的视图组件

2. 路由配置

具体配置方式:

  1. 在路由文件中配置路由路径和视图的对应关系:
//维护路由表,某个路由路径对应哪个视图组件
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
  ,
  {
    path: '/404',
    component: () => import('../views/404View.vue')
  },
  {
    path: "/:catchAll(.*)", // 不识别的path自动匹配404
    redirect: '/404',
	}
]

  1. 在视图组件中配置 router-link标签,用于生成超链接。在视图组件汇总配置router-view标签

点击不同的 router-link标签,router-view标签显示不同的视图

<router-link to="/">Home</router-link> 
<router-link to="/about">About</router-link> 
<router-link to="/test">Test</router-link> 
<!--视图组件展示的位置-->
<router-view/>
  1. 通过 js 实现路由跳转
<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <input type="button" value="路由跳转" @click="jump"/>        
  <router-view/>
</template>

<script>
  export default {
    methods: {
    jump() {
      this.$router.push('/about')
    }
  }
  }
</script>

3. 嵌套路由

1.在 src/router/index.js 中配置路由映射规则(嵌套路由配置)

   {
    path: '/c',
    component: () => import('../views/container/ContainerView.vue'),
    redirect: '/c/pi',
    //嵌套路由(子路由),对应的组件会展示在当前组件内部
    children: [//通过children属性指定子路由相关信息(path、component)
      {
        path: '/c/p1',
        component: () => import('../views/container/P1View.vue')
      },
      {
        path: '/c/p2',
        component: () => import('../views/container/P2View.vue')
      },
      {
        path: '/c/p3',
        component: () => import('../views/container/P3View.vue')
      }
    ]
  }

2.在ContainerView.vue 布局容器视图中添加,实现子视图组件展示

<el-main>
    <router-view/>
</el-main>

3.在ContainerView.vue 布局容器视图中添加,实现路由请求

<el-aside width="200px">
    <router-link to="/c/p1">P1</router-link><br>
    <router-link to="/c/p2">P2</router-link><br>
    <router-link to="/c/p3">P3</router-link><br>
</el-aside>

注意:子路由变化,切换的是【ContainerView 组件】中 <router-view></router-view> 部分的内容

五、状态管理 vuex

在多个组件之间共享数据,并且共享的数据是响应式的,即数据的变更能及时渲染到模板。

vuex 采用集中式存储管理所有组件的状态。

1. 概念

  • state:状态对象,集中定义各个组件共享的数据
  • mutations:类似于一个事件,用于修改共享数据,要求必须是同步函数
  • actions:类似于mutation,可以包含异步操作(ajax),通过调用mutation来改变共享数据

2.简单案例

import { createStore } from 'vuex'
import axios from 'axios'

export default createStore({
  state: {
    name: "小河狸"
  },
  getters: {
  },
  mutations: {
    setName(state, newname) {
      state.name = newname
    }
  },
  actions: {
    setNamebyAxios(context) {
      axios({
        url: '/api/home',
        method: 'get'
      }).then(res => {
        context.commit('setName', res.data.data)
      
      })
    }
  },
  modules: {
  }
})
<template>
  <div class="about">

      <div class="about">
        <h1>hi {{ $store.state.name }}</h1>
      </div>

    <input type="button" value="修改数据" @click="jump"/>
    <input type="button" value="修改数据" @click="jump1"/>
  </div>
</template>

<script>
export default {
  methods: {
    jump() {
      this.$store.commit('setName', '大河狸')
    },
    jump1() {
      this.$store.dispatch('setNamebyAxios')
    }
  }
}
</script>

六、TypeScript

1. 常用类型

TS中的常用类型如下:

类型 备注
字符串类型 string
数字类型 number
布尔类型 boolean
数组类型 number[],string[], boolean[] 依此类推
任意类型 any 相当于又回到了没有类型的时代
复杂类型 type 与 interface
函数类型 () => void 对函数的参数和返回值进行说明
字面量类型 “a”|“b”|“c” 限制变量或参数的取值
class 类 class Animal

相关推荐

  1. vue 基础回顾

    2024-04-03 09:54:04       6 阅读
  2. MySQL基础回顾02

    2024-04-03 09:54:04       23 阅读
  3. 深度学习基础回顾

    2024-04-03 09:54:04       21 阅读
  4. css基础回顾2

    2024-04-03 09:54:04       24 阅读
  5. 前端基础回顾es6相关知识

    2024-04-03 09:54:04       23 阅读

最近更新

  1. 软件架构演化方式的分类以及架构演化时期

    2024-04-03 09:54:04       0 阅读
  2. 美学心得(第二百六十一集) 罗国正

    2024-04-03 09:54:04       0 阅读

热门阅读

  1. 【2024最新】vue3的基本使用(超详细)

    2024-04-03 09:54:04       6 阅读
  2. freertosday3

    2024-04-03 09:54:04       4 阅读
  3. 平台介绍-大屏组件

    2024-04-03 09:54:04       5 阅读
  4. Facebook推广常见问题解惑答疑

    2024-04-03 09:54:04       4 阅读
  5. SegmentAnything导出Onnx模型分割图片

    2024-04-03 09:54:04       5 阅读
  6. 120.单例模式(C++设计模式)

    2024-04-03 09:54:04       3 阅读
  7. 【Node】使用Node.js构建简单的静态页面生成器

    2024-04-03 09:54:04       5 阅读
  8. 工厂方法模式:灵活的创建对象实例

    2024-04-03 09:54:04       5 阅读
  9. WPF —— 关键帧动画

    2024-04-03 09:54:04       3 阅读
  10. Yolov5封装detect.py面向对象

    2024-04-03 09:54:04       2 阅读
  11. Rancher(v2.6.3)——Rancher部署Minio(单机版)

    2024-04-03 09:54:04       3 阅读