2025年vue学习步骤--开发笔记

科技前沿 • 2025-01-24 10:04 • 阅读 38

大家好，我是讯享网，很高兴认识大家。

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.父组件中
讯享网

用mymessage绑定变量message这个变量

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

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

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

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

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

如图：

app.vue

firstChild.vue

secondChild.vue

在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事件总线啦！

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

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

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

三种方法：

mutation修改状态：

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

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

actions异步修改状态：

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

大香蕉伊人网 -免费**av0755man.com