vue开发看这里

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

本文总结了vue核心知识点，便于大家快速开发vue前端项目。

Vue基础小知识点

• props

• • props做属性封装，
  • 接收父组件数据

• v-model

• • 数据双向

• v-for

• • item in list

• forEach和filter、find

    total(){
      let a = 0
      this.goodlist
      .filter(x=>x.goods_state)
      .forEach(x => {
        a += x.goods_count
      });
      return a
    }
const findResult = this.goodlist.find(x=>x.id===e.id)

创建vite工程

npm init vite-app 工程名
cd 工程名
npm install
npm run dev

自定义事件

//声明自定义事件--step1
emits:['change']
//触发自定义事件--step2
<button @click="onBtnClick">+1</button>

emits:['change'],
methods:{
  onBtnClick(){
  this.$emit('change')//点击按钮，触发自定义事件change
  }
}

• onBtnClick()可放参数e来捕获事件源：onBtnClick(e)---->e.target.xxx做捕获
• this.$emit('事件名',参数1)：可以传参数

//注册组件1---MyCounter省略
//监听自定义事件---step3
<my-counter @change="getCount"></my-counter>

methods:{
  getCount(){
  console.log('监听到了count值的变化')
  }
}

• getCount(e)--->可以接收参数

axios的使用

全局挂载axios

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

//导入axios
import axios from 'axios'

const app = createApp(App)
//全局挂载axios
axios.defaults.baseURL = 'https://www.escook.cn'
app.config.globalProperties.$http = axios
 

app.mount('#app')

调用get方法举例

methods: {
    async getGoodList(){
      const {data:res} = await this.$http.get('/api/cart')
      if(res.status !==200) return alert('商品请求失败')
      console.log(res)
      this.goodlist = res.list
    },

拦截器

拦截器会在每次发起axios请求和得到响应时触发。

请求拦截器

import { loading } from 'element-ui'
let loadingInstance = null
axios.interceptors.request.use(config=>{
  loadingInstance = loading.server({ fullscreen: true })
  return config
}[,第二个参数是请求失败的可以不写])

响应拦截器

axios.interceptors.response.use(response=>{
  loadingInstance.close()
  return response
}[,第二个参数是请求失败的可以不写])

proxy跨域代理

axios请求根路径改成项目运行路径

import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:4000'//改成了项目运行路径
app.config.globalProperties.$http = axios

配置proxy代理(根目录下创建vue.config.js)

module.exports = {
  devServer:{
    proxy:'真正要请求的地址'
  }
}

该功能仅在开发调试阶段生效

数据共享

父组件向子组件共享数据

父组件通过v-bind属性绑定向子组件共享数据，同时子组件需要使用props接收数据。

//父组件通过v-bind绑定向子组件共享数据--step1
<my-test-1 :msg="massage" :user="userinfo"></my-test-1>

data(){
  return {
    message: 'hello vue',
    userinfo: { name:'zs', age: 20 },
  }
}

<template>
  <p>{{msg}}</p>
  <p>{{user}}</p>
</template>
//子组件使用props接收数据---step2
<script>
    export default {
      props: ['msg', 'user'],
}

子组件向父组件共享数据

子组件通过自定义事件的方式向父组件共享数据。

//自定义事件
emits:['n1change'],//声明自定义事件
data(){
  return{
    n1:0,
  }
},
methods:	{
  addN1(){
    this.n1++,
    this.$emit('n1change',this.n1)//数据变化触发自定义事件
  }
}

//父组件监听子组件的自定义事件
<my-test-1 @n1change="getn1"></my-test-1>

data(){
  return {
    n1FromSon:0,
   }
},
methods:{
  getn1(n1){
    //通过形参接收子组件传递过来的数据
    this.n1FromSon = n1
  }
}

父子之间数据双向同步

兄弟之间数据共享

//要先安装第三方包mitt
//npm i mitt
import mitt from 'mitt'

const bus = mitt()

export default bus

<template>
    <div>
        <h3>数据发送方---count的值为{{count}}</h3>
        <button type="button" class="btn btn-primary" @click="add">+1</button>
    </div>
</template>
<script>
import bus from './eventBus.js'
export default {
    name:'Left',
    data() {
        return {
            count:0,
        }
    },
    methods: {
        add(){
            this.count++
            bus.emit('countChange',this.count)
        }
    },
}
</script>

template>
    <div>
        <h3>数据接收方---num的值为:{{num}}</h3>
        <!-- <button type="button" class="btn btn-primary" @click="count+=1">+1</button> -->
    </div>
</template>
<script>
import bus from './eventBus.js'
export default {
    name:'Right',
    data() {
        return {
            num:0,
        }
    },
    created() {
        bus.on('countChange',(count)=>{
            this.num = count
        })
    },
}
</script>

资料

📎06_组件高级 - 上.pdf

📎06_购物车案例.pdf

vue-router路由

基本步骤

1. 在项目中安装 vue-router 安装插件：npm install vue-router@next -S
2. 定义路由组件 就是先定义一下你要使用的组件
3. 声明路由链接和占位符

<!-- 声明路由链接 -->        
<router-link to="/home">首页</router-link>&nbsp
<router-link to="/movie">电影</router-link>&nbsp
<router-link to="/about">关于</router-link>

<!-- 声明路由占位符 -->
<router-view></router-view>

4. 创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：

① 从 vue-router 中按需导入两个方法

② 导入需要使用路由控制的组件

③ 创建路由实例对象

④ 向外共享路由实例对象

⑤ 在 main.js 中导入并挂载路由模块

// createRouter可以让我们创建路由实例对象
//  createWebHashHistory可以指定路由工作模式
 import { createRouter, createWebHashHistory} from 'vue-router'
// createRouter可以让我们创建路由实例对象
//  createWebHashHistory可以指定路由工作模式
 import { createRouter, createWebHashHistory} from 'vue-router'

//导入组件c
import Home from './MyHome.vue'
import Movie from './MyMovie.vue'
import About from './MyAbout.vue'

//  创建路由实例对象
const router = createRouter({
    // 通过history属性指定路由工作模式
    history:createWebHashHistory(),
    //通过routers数组指定路由规则
  //其中path是哈希地址，component是要展示的组件
    routes:[
        { path: '/',redirect: '/home'},  //路由重定向
        { path: '/home',component: Home},
        { path: '/movie',component: Movie},
        { path: '/about', component: About}  
    ]
})

export default router

• 路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向。

main.js中导入并挂载路由

import router from './components/10.next/router'
const app =createApp(App)
//挂载路由模块
app.use(router)
app.mount('#app')

5. 导入并挂载路由模块

路由高亮效果

• • 默认的高亮class类
  • 
  • 自定义路由高亮的class类

• • • 

嵌套路由

• 在子路由中声明子路由链接和子路由占位符

        <!-- 声明子路由链接 -->
        <router-link to="/about/tab1">Tab1</router-link>&nbsp
        <router-link to="/about/tab2">Tab2</router-link>
        <!-- 声明子路由占位符 -->
        <router-view></router-view>

• 子路由路径不要以/开头.

const router = createRouter({
    history:createWebHashHistory(),
    routes:[
        { path: '/',redirect: '/home'}, 
        { path: '/home',component: Home},
        { path: '/movie',component: Movie},
        { 
            path: '/about', 
            component: About,
            redirect: '/about/tab1',//重定向
          //嵌套路由----------------嵌套路由----------------嵌套路由--
            children:[
                { path: 'tab1', component: Tab1},
                { path: 'tab2', component: Tab2 },
            ]
          //嵌套路由----------------嵌套路由----------------嵌套路由--
        }
    ]
})

动态路由匹配---语雀吧

main中路由规则

主件中props接收动态参数id，再应用到path

编程式导航

• • 调用API发生跳转属于编程式导航
  • vue-router中两个常用的编程式导航API

• • • this.$router.push('hash地址')

• • • • 跳转到指定hash地址，从而展示对应组件
      • 

• • • this.$router.go(数值 n)

• • • • 实现导航历史的前进、后退
      • 

命名路由

• • 给路由规则起名字，即name属性

(这个是路由规则处)

• • 
  •