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

用户57923016702
38 阅读4分钟 
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7d2ac7f0afc544e6bb520f824d58d9dc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772012049&x-signature=%2BHHLEnM0iCMx2goI8tkwb7siEYM%3D)
+ banner组件  
 ![在这里插入图片描述](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/50cabe4a83b74c50bfdbf6fba05579db~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772012049&x-signature=vviLy2ECeZZtY4WDJLe%2FSW2b6PY%3D)

组件传值

  • 父组件给子组件传值
    父传子的核心理念：在父组件中引入子组件，然后直接给子组件传值，这里用：绑定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>
    • 页面截图
      1、通信前
      在这里插入图片描述
      2、通信后
      在这里插入图片描述
vue修改路由配置模式
  • 去#号
  • 方法比较简单，直接在路由配置处添加一行代码：mode: 'history',什么都不加，默认为mode:'hash'。

在这里插入图片描述

vuex

Vuex多来管理状态，比如多个窗口使用的同一个数据，如用户登录信息，购物车信息等，在一个页面改变信息，其他页面同时修改。

  • Vuex由下面四部分组成

    • State–数据仓库：存储所有数据，数据的唯一来源
    • Getter–用来获取数据的，好比computed计算属性，从现有的state派生新的state
    • Mutation-用来修改数据的，通过comit修改，不能直接修改
    • Action-用来提交mutation

  • 安装
    cnpm i vuex --save,install可以简写为i。
    导入时报错：export 'watch' was not found in 'vue'

    • 如果是vue2，将vuex指定版本3.x.x版本
    • 如果是vue3，将vuex指定版本4.x.x版本

  • 创建实例
    New vuex.store()

    • 导入及创建实例
      在这里插入图片描述

  • 挂载
    在这里插入图片描述

  • 获取数据

总结

  • 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

  • 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

  • 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

  • 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！ 开源分享：docs.qq.com/doc/DSmRnRG…

avatar
文章
阅读
粉丝