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

admin管理员组

文章数量:1633915

vue简介及其环境配置

• 按照以上命令执行后
  
  可以看到首页有一些链接，这些链接是一些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>
    
    

  • 页面截图
    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()

  • 导入及创建实例
    

• 挂载
  

• 获取数据

  • 页面直接获取
    <h3>count:{{this.$store.state.count}}<h3>

• 修改数据

  • 修改数据需要在mutations中修改。
    
  • 提交时使用this.$storemit(),里面的参数是mutations中的函数名称。
    

本文标签： 路由父子组件模式环境