vue简介、环境配置、项目创建、路由配置、父子组件传值、路由模式修改

最新推荐文章于 2024-09-10 14:15:01 发布

2401_84411018

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量260

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84411018/article/details/138617672

版权

程序员专栏收录该内容

202 篇文章 0 订阅

订阅专栏

文末

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

在这里插入图片描述
可以看到首页有一些链接，这些链接是一些vue的文档以及常用的插件，可以帮助我们快速上手vue框架

vue项目目录文件介绍

vue项目目录
- build:放置的是webpack配置文件，一般不动,修改了必须重启服务器才能生效
- config:放置针对开发环境和线上环境的配置文件，一般不动修改后需重启
- node_modules：项目的依赖
- src:所有的源代码
  ·
  - components:各个组件所在文件
  - router：路由配置文件
  - main.js:主文件入口
- static:静态资源 //只有这个目录可以被外部访问到，如http://localhost:8080/static/mock/index.json 能访问到内容
- package.json:保存一些项目的配置信息

路由配置

首先创建组件
- apple组件代码
- banner组件代码
- 注意：style中添加scoped是为了让css代码仅仅在当前组件起作用，如果没有则会在所有子组件中都会起作用——面试题
然后在router的index.js中配置路由
最后在index组件中使用router-link进行路由跳转
- 由于路由是在children中配置的所以需要router-view将视图引入
页面展示
- apple组件
- banner组件

组件传值

父组件给子组件传值
父传子的核心理念：在父组件中引入子组件，然后直接给子组件传值，这里用：绑定data中的数据，不用则直接将后面的值直接传给子组件。
在子组件中使用props进行接收数据。如下所示：
- 父组件代码
- 子组件代码
- 页面展示
子传父
子组件通过自定义函数使用this.emit()方法将值传递给父组件
- 子组件
- 父组件
- 页面展示

在这里插入图片描述

子组件给子组件传值（兄弟组件传值）
兄弟组件通信通过公共仓库进行通信

文件目录
bus为公共文件
子组件1

<template>
  <div>
    <p>clild1</p>
    <p>{{msg}}</p>
    <p><button type="button" @click="click">点击</button></p>
  </div>
</template>

<script>
import bus from './bus.js'
export default{
  data(){
    return{
      msg:"clild1的消息"
    }
  },
  methods:{
    click(){
      bus.$emit("value1",this.msg)
    }
  }
}
</script>

<style>
</style>

子组件2

<template>
  <div>
    <p>clild2</p>
    <p>{{msg2}}</p>
  </div>
</template>

<script>
import bus from './bus.js'
export default{
  data(){
    return{
      msg2:""
    }
  },
  mounted() {
    var that = this;
    bus.$on('value1',function(data){
      console.log(data);
      that.msg2 = data
    })
  }
}
</script>

<style>
</style>