vue学习步骤--开发笔记

谁借莪１个温暖的怀抱￠ 2022-05-13 22:58 255阅读 0赞

vue安装使用脚手架工具：

\# 全局安装 vue-cli

1.npm install -g vue-cli;全局安装脚手架工具快速构建vue项目的工具

# 创建一个基于 webpack 模板的新项目

vue init webpack myvuedemoproject 构建我的基于webpack的vue项目

安装 vue 路由模块 vue-router 和网络请求模块 vue-resource，输入：cnpm install vue-router vue-resource --save。

进入项目，安装并运行：

$ cd my-project
    $ cnpm install
    $ cnpm run dev
     DONE  Compiled successfully in 4388ms
    
    > Listening at http://localhost:8080

`##`

父子组件之间的通信传值：

1.父组件中![70][]

用mymessage绑定变量message这个变量

2.在子组件中接收这个主要是用props接收变量然后在页面中使用

![70 1][]

父组件接收子组件的值的方法：如图，自定义一个事件givefather  并且在方法里面写 上this.$emit('dongson','我是参数'，'son give father'') 其中dongson是自定义的在父组件中的子组件名中使用 并且对其定义  参数可以是多个

![70 2][]

![70 3][]

就是这样  是不是目了然呀！！！

### **平级别的两个组件（兄弟组件之间的传值通讯）：** ###

先建立一个总的中央事件总线 如图：

![70 4][]

建立两个组件放到app.vue中并且在firstChild中使用Bus.$emit("eve",data);发送事件   在secondChild中接收事件 Bus.$on("eve",function(data)\{console.log(data)\}）;

如图：

app.vue

![70 5][]

firstChild.vue

![70 6][]

secondChild.vue

![70 7][]

### 方法2：兄弟传值： ###

在main.js中设置

new Vue({
      el: '#app',
      router,
      data:{
        Bus:new Vue(),
      },
      components: { App },
      template: '<App/>',
    })

组件中使用 this.$root.Bus代替Bus

this.$root.Bus.$emit('firstchangeemit',this.msg);//first

this.$root.Bus.$on('firstchangeemit',data=>{
        this.msg=data;
      });//second组件  这样就不需要引入eventBus事件总线啦！

###  多页面需要共享数据的时候需要用到vuex进行共享页面的数据： ###

![70 8][]

使用demo  在页面中点击加1 减1demo

![70 9][]

在组件中使用这些值和事件：引入store.js 操作

![70 10][]

state访问状态对象 给组件中的data赋值：

三种方法：

![70 11][]

mutation修改状态：

![70 12][]

![70 13][]

![70 14][]

![70 15][]

methods可以在下面再次定义别个方法，使用add时候有参数要在点击事件时候加上参数

getters计算过滤操作:getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

![70 16][]

![70 17][]

actions异步修改状态：

actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。（视频中有讲解）![70 18][]

![70 19][]

![70 20][]

[http://www.mopusheng.com/][http_www.mopusheng.com]

*  **    **[http://jgdqyj.com/list/?1.html][http_jgdqyj.com_list_1.html]

[70]: /images/20220514/9de910c79f42442a99e1edfb5ddb4a5c.png
[70 1]: /images/20220514/d0d0c197547c42d3abff37ea2a6c0bc0.png
[70 2]: /images/20220514/99bc6d72e10c4a5fbe35664abcccea85.png
[70 3]: /images/20220514/494bda3c44d14348800e66d621d8686a.png
[70 4]: /images/20220514/1d2f259963484959a4f0e027bbdea4ce.png
[70 5]: /images/20220514/5d0584be94c14e26a0dcd41f0b57ab26.png
[70 6]: /images/20220514/469836a6cfc34dbf8eee35701d104c7e.png
[70 7]: /images/20220514/c61d49a73cbb483287fe9cf3c94ea795.png
[70 8]: /images/20220514/0a7aba33db78484781addac758c6a4ae.png
[70 9]: /images/20220514/8e52db5a9dc241ff8bab8fdf6759aabd.png
[70 10]: /images/20220514/c236f4e82ae5440fa61444ef9943990f.png
[70 11]: /images/20220514/f38c1aa550034d57836fe93fe8328e60.png
[70 12]: /images/20220514/d9fb8c293e4b4dea8d9ecf1fcecaa381.png
[70 13]: /images/20220514/ff4937dac34f40d2b9ae984ce0930184.png
[70 14]: /images/20220514/9b1eddf825224819968b5b96b2d0eca0.png
[70 15]: /images/20220514/7886ae7157b34f51bb50aec7321bece9.png
[70 16]: /images/20220514/d089751081364c3290b23d174cbfa953.png
[70 17]: /images/20220514/f2777d615c9b454e96ea1daa51381a93.png
[70 18]: /images/20220514/277e74d7adbc4b4690701b89f4d47fba.png
[70 19]: /images/20220514/a1f4390a7f51453da27d98cf8d56c7ff.png
[70 20]: /images/20220514/940275d26cfd4e4f8fbde010a257abe5.png
[http_www.mopusheng.com]: http://www.mopusheng.com/
[http_jgdqyj.com_list_1.html]: http://jgdqyj.com/list/?1.html