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

用户57923016702
16 阅读5分钟
  • 按照以上命令执行后
    在这里插入图片描述
    可以看到首页有一些链接，这些链接是一些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>

    • 父组件

    <template>
  <div>
    父组件
    <Child1></Child1>
    <Child2></Child2>
  </div>
</template>

<script>

import Child1 from './child1.vue';
import Child2 from './child2.vue'
export default{
  components:{Child1,Child2},
  data(){
    return{}
  }
}

</script>

<style>

</style>

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝